Какие атрибуты html/css безопасны для почты?

Недавно я разрабатывал информационный бюллетень для моего клиента. Как бы то ни было, я не могу найти хорошую информацию о том, какие css и html безопасны для использования в основных почтовых клиентах.

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

Это список популярных почтовых клиентов, которые я заимствовал из монитора кампании. (Если я забыл что-нибудь, скажите, пожалуйста)

Microsoft Outlook
Apple Mail
Hotmail
Yahoo! Mail
Gmail

Вопрос в том, какие теги, атрибуты, особые причуды присутствуют в этих основных браузерах и как их можно легко избежать.

Спасибо за помощь,

Ответ 1

Вот несколько сообщений, которые помогут вам начать:

http://css-tricks.com/using-css-in-html-emails-the-real-story/

http://www.sitepoint.com/code-html-email-newsletters/

Ответ 2

В Campaign Monitor имеется подробный и полный список поддержки CSS в общих почтовых клиентах.

http://www.campaignmonitor.com/css/

Ответ 3

Вы можете найти исчерпывающий список поддерживаемых и не поддерживаемых CSS-функций для всех основных почтовых клиентов по адресу Стандартный проект по электронной почте

Действительно полезный бутстрап для разработки HTML-писем, у которого есть тонна исключающих ошибок, HTML-ссылка для электронной почты

И как правило - всегда используйте таблицы и все HTML-теги старой школы (align, center, valign, color и т.д.). Некоторые чтение по теме.

Ответ 4

Вот чит-лист css для электронной почты. http://intenseminimalism.com/2010/email-css-cheatsheet/

Ответ 5

PDF-формат таблицы для поддержки CSS в разных почтовых клиентах: Предоставляет информацию для веб-клиентов, настольных клиентов в разных ОС и мобильных почтовых клиентах.

Поддержка CSS разными клиентами электронной почты

https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=5320&_ga=1.228308635.745708791.1442556968

Ответ 6

Gmail уже поддерживает тег style в голове

Вы можете использовать подмножество селекторов CSS для применения стилей. Поддержка Gmail селекторов классов, элементов и идентификаторов.

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>This text is blue.</p=>
      <p>Jerry</p>
    </div>
  </body>
</html>

И медиа-запросы:

Вы можете использовать стандартные мультимедийные запросы CSS для настройки стиля электронного письма в соответствии с текущим устройством пользователя. Gmail поддерживает запросы по ширине, ориентации и разрешению экрана.

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>