Какие CSS-свойства рискованны в HTML-письме?
Избегайте или ограничивайте float, background-image, position, flex/grid, box-shadow и сложные селекторы. Движок Word в Outlook и часть веб-клиентов их игнорируют или искажают. Предпочтительны табличная разметка и простой инлайн-CSS.
Кратко
- ✓Вёрстку делайте таблицами, а не float/flex/grid.
- ✓Для фоновых картинок задавайте запасной цвет.
- ✓html2email помечает свойства с частичной поддержкой.
Избегайте или ограничивайте float, background-image, position, flex/grid, box-shadow и сложные селекторы. Движок Word в Outlook и часть веб-клиентов их игнорируют или искажают. Предпочтительны табличная разметка и простой инлайн-CSS.
| Свойство | В письме |
|---|---|
float | Ненадёжно в Outlook; используйте таблицы |
background-image | Outlook игнорирует; VML + цвет фона |
position: absolute/fixed | Не поддерживается |
flex / grid | Заменяйте вложенными таблицами |
box-shadow | Часто игнорируется в Outlook |
Рискованные CSS-свойства в письме - предпочтительны таблицы и инлайн-стили.
Почему float ненадёжен?
Float часто ломается в Outlook. Используйте таблицы и атрибуты выравнивания вместо плавающих колонок.
А background-image?
Outlook игнорирует фоны из CSS. Добавляйте VML-запасной вариант и всегда задавайте цвет фона.
Безопасны ли border-radius и box-shadow?
Radius частично поддерживается; shadow в Outlook часто игнорируется. Тестируйте и делайте запас с прямыми углами.
Можно ли position или z-index?
Избегайте absolute/fixed; Outlook и многие веб-клиенты их не учитывают. Держите порядок слоёв простым и линейным.
Как html2email находит рискованные свойства?
CssPropertyValidator ищет float, background-image и другие свойства с частичной поддержкой и выдаёт предупреждения с контекстом.
Чем заменить flex/grid?
Вложенными таблицами с явными ширинами. На мобильных складывайте колонки через медиа-запросы там, где они есть, но оставляйте табличный fallback.
Работают ли градиенты?
Во многих веб-клиентах да, в Outlook - нет. Задавайте запасной цвет.
Сложные селекторы допустимы?
Держите селекторы простыми. Многие клиенты убирают CSS из head; инлайн на элементах надёжнее.
Валидатор подсвечивает свойства с частичной поддержкой.
Цифры и источники
- Движок Word в Outlook игнорирует background-image и многие правила position/float.
- Градиенты в Outlook не поддерживаются; нужен запасной цвет.
- html2email помечает рискованные свойства, чтобы вы могли перейти на таблично-безопасные паттерны.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации