Почтовые клиенты — инструменты, которые подписчики используют для просмотра ваших email-рассылок (например, Gmail, Outlook или Apple Mail), — могут быть довольно капризными приложениями. Из-за особенностей обработки HTML и CSS в почтовых клиентах многие email-маркетологи сталкиваются с проблемами отображения своих писем.
Одной из главных причин некорректного отображения писем является разный уровень поддержки CSS в разных почтовых клиентах. Понимание того, какие CSS-свойства и где поддерживаются — это уже половина успеха. Вторая половина — знать, в какой части кода письма размещать эти стили.
Существует три основных способа включения CSS в HTML-документ: инлайн (внутри строки), встроенный (embedded) и использование внешней таблицы стилей. Хотя инлайн и встроенные стили находятся внутри HTML-документа, внешние таблицы стилей подгружаются извне по URL с сервера. Многие почтовые клиенты блокируют такой подход из соображений безопасности. Именно поэтому большинство email-маркетологов полагаются либо на встроенные, либо на инлайн-стили CSS.
## Что такое инлайн CSS?
Когда вы используете инлайн-стили, вы применяете свойства CSS непосредственно к HTML-элементам внутри тела вашего письма. В то время как в веб-разработке можно безопасно использовать встроенные или внешние стили, некоторые почтовые клиенты их не поддерживают. Это традиционно вынуждало email-маркетологов переносить все стили в инлайн-формат.
Для примера сравните два фрагмента кода — встроенный и инлайн:
«`
a {
color: rebeccapurple;
font-size: 24px;
font-weight: bold;
text-decoration: none;
}
«`
«`
«`
Оба варианта достигают одного и того же результата, но они находятся в разных местах HTML-файла. Встроенные стили включаются в блок