outlook.com, как настроить таргетинг css на определенный класс

Я разрабатываю электронное письмо в формате HTML, и я сделал так, чтобы оно выглядело настолько хорошо, насколько это возможно, в почтовых клиентах, которые я тестировал. Сейчас я проверяю это на Outlook.com, и у него есть некоторые проблемы (вероятно, из-за того, что они не поддерживают поля), поэтому я хочу добавить некоторые условные стили для этого клиента.

Я знаю, что Outlook.com оборачивает электронную почту в класс .ExternalClass и добавляет к любым пользовательским классам ecx, поэтому я попробовал что-то вроде

* {color:black;}
.ExternalClass * {color:red;}
.ExternalClass .ecxMyClass {color:blue;}
.ExternalClass .MyClass {color:green;}

просто чтобы увидеть, какой селектор изменит цвет текста. Я не могу заставить ни одного из них работать. Также я не могу найти, где определяются мои стили с помощью инспектора, такого как Firebug.

Согласно http://www.campaignmonitor.com/css/, Outlook.com должен поддерживать теги стиля в голову или тело и должны иметь возможность использовать классы в качестве селекторов.

Почти все мои стили определены встроенными, но я хочу добавить отступ к элементу только в Outlook.com, поэтому я не могу просто добавить его встроенный. Как настроить таргетинг на собственный элемент класса в Outlook.com?


css email outlook html-email outlook.com
person Devin Crossman    schedule 12.07.2013    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Я настоятельно рекомендую вам удалить поля из электронной почты и вместо этого использовать отступы или пустые (nbsp) ячейки таблицы. Оба поддерживаются на 100%, и, как вы начинаете понимать, прыжки через обручи для определенных клиентов могут очень быстро стать действительно грязными. Пустые ячейки таблицы с nbsp в них — лучший вариант, так как иногда отступы могут быть удалены, если ваш подписчик пересылает электронное письмо кому-то другому.

При этом, если вы хотите ориентироваться на Outlook, а не на других клиентов, есть условные теги mso, которые можно использовать.

Не уверен, что это работает для Outlook.com, но попробуйте:

<!--[if gte mso 15]><!-->
 // This will only be seen by Outlook 2013
<![endif]-->
person John    schedule 15.07.2013
comment
Условный комментарий работает только для электронных писем Outlook, но не для Outlook.com. - person josh1978; 18.05.2016

arrow_upward
1
arrow_downward

CSS — это другая игра с мячом для Outlook. Как я уверен, вы сталкивались с кодированием для электронной почты, существуют серьезные ограничения, и часто лучше уменьшить свои ожидания, чем пытаться заставить что-то работать.

Вот ссылка на то, какие стили CSS будут работать для различных почтовых клиентов http://www.campaignmonitor.com/css/

person AdamSchuld    schedule 12.07.2013
comment
Спасибо, но это не ответ на мой вопрос. Я знаю, что outlook.com поддерживает свойство css, которое я пытаюсь установить, но я не знаю, как настроить его с помощью селекторов css. - person Devin Crossman; 13.07.2013
comment
@Devin В своем первоначальном вопросе вы использовали селекторы, которые не работают в Outlook.com - цель веб-сайта состояла в том, чтобы показать вам это. Когда дело доходит до гарантии отступов во всех почтовых клиентах, лучше вручную создавать отступы, используя ячейки таблицы, а не свойства CSS. - person AdamSchuld; 13.07.2013

arrow_upward
0
arrow_downward

Outlook.com будет потреблять условные комментарии, поэтому ничего из вышеперечисленного не будет работать должным образом.

Подробнее об альтернативном подходе см. в этой теме. /а>.

person Roman Edirisinghe    schedule 26.03.2014

arrow_upward
0
arrow_downward

Теги mso больше не работают, по-видимому, вместо этого попробуйте этот CSS-хак

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
   /* This will be specific to outlook.com */
    span[class~=x_outlook] {  
      color: #26d0ae;
    }
    /* This styling will work on the mobile apps of Microsoft Outlook (both ios and android) */
    body[data-outlook-cycle] .outlook {
      color: #26d0ae;
    }
</style>
</head>

<body class="body">
  Neutral
  <span class="outlook">
    This span is a chameleon
  </span>
</body>
</html>

person Gaurav Thakur    schedule 07.11.2019