CSS для Email-рассылок: особенности и ограничения

Почему CSS в email — это квест на выживание? 🏋️

Веб и email — два разных мира. В браузере ты король: Flexbox, Grid, анимации, переменные. В email-рассыпках — словно вернулся в 2005 год: таблицы, инлайновые стили и молитвы, чтобы всё отобразилось в Outlook.

Главный принцип:

В email-дизайне ты не пишешь CSS — ты договариваешься с почтовыми клиентами.

🔧 Что поддерживают почтовые клиенты?

Сводка поддержки CSS (актуально на 2024 год):

Свойство	Gmail	Outlook	Apple Mail	Yahoo
`margin/padding`	✔️	⚠️	✔️	✔️
`background-image`	❌	❌	✔️	❌
`flexbox/grid`	❌	❌	✔️	❌
`@media`	⚠️	❌	✔️	❌

⚠️ Outlook использует движок Word (!) для рендеринга писем. Да-да, того самого Word из 2003 года.

💡 4 золотых правила email-верстки

1. Таблицы вместо div

Почтовые клиенты любят таблицы как в 90-е. Даже кнопку лучше завернуть в <table>.

<table align="center" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td style="background: #FF6B6B; padding: 12px 24px; border-radius: 4px;">
      <a href="#" style="color: white; text-decoration: none;">Купить сейчас</a>
    </td>
  </tr>
</table>

2. Инлайновые стили — обязательно

<style> в <head> сработает только в Apple Mail. Все стили пиши прямо в тегах:

<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">
  Текст письма
</p>

3. Ширина = 600–800px

Идеальный диапазон для большинства клиентов. Больше — будет обрезаться, меньше — выглядеть как SMS 2000-х.

4. Тестируй, тестируй, тестируй

Используй сервисы вроде Litmus или Email on Acid. Данила Бежин как-то сказал: «Письмо, не протестированное в Outlook, — билет в один конец в спам».

🎨 Как добавить красоты без CSS3?

Градиенты

Только фоновые картинки (и то не везде). Альтернатива — «полоска» с градиентом, вставленная как <img>.

Анимации

Забудь. Максимум — GIF (но Outlook покажет только первый кадр).

Кастомные шрифты

Работают в Apple Mail, но в Gmail и Outlook — нет. Всегда добавляй fallback:

<p style="font-family: 'Helvetica Neue', Arial, sans-serif;">
  Текст с запасным вариантом
</p>

📱 Адаптивность в email

Медиа-запросы поддерживают только Apple Mail и некоторые мобильные клиенты.

Хак: Используй «резиновые» таблицы с width="100%" и max-width:

<table width="100%" style="max-width: 600px;">
  <tr>
    <td>Это подстроится под экран</td>
  </tr>
</table>

💥 Пример: Верстаем email-шаблон

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Промо-письмо</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif;">
  <!-- Обертка -->
  <table align="center" width="100%" style="max-width: 600px;">
    <tr>
      <td style="padding: 20px; text-align: center;">
        <!-- Лого -->
        <img src="logo.png" alt="Логотип" style="max-width: 200px;">

        <!-- Заголовок -->
        <h1 style="color: #2C3E50;">Специальное предложение!</h1>

        <!-- Кнопка -->
        <table align="center" cellpadding="0" cellspacing="0" style="margin: 20px 0;">
          <tr>
            <td style="background: #3498DB; border-radius: 5px;">
              <a href="#" style="color: white; text-decoration: none; display: block; padding: 12px 24px;">Получить скидку</a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

🔮 Будущее email-верстки

CSS-переменные уже тестируются в Apple Mail. Dark Mode поддерживается через медиа-запросы (@media (prefers-color-scheme: dark)). Но пока главное правило остаётся прежним:

Сначала стабильность, потом креатив.

Совет от Данилы Бежина: «Если хочешь проверить, насколько адски твой email-код — открой его в Outlook 2013. Выживет — значит, ты мастер» 😈.

Теперь ты готов покорять инбоксы! Пиши код, тестируй, и пусть письма всегда попадают во «Входящие».