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