Gmail теперь поддерживает display: none;: Что это значит для вашего дизайна писем

Gmail является источником многих головных болей для разработчиков email-рассылок. Отсутствие поддержки многих свойств CSS — включая отсутствие поддержки тега

I will not show

I will not show

```

Изменение было внедрено для всей линейки клиентов, включая Gmail, Google Apps и Inbox by Gmail.

Что осталось без изменений — так это то, что Gmail по-прежнему не поддерживает CSS-классы или ID, а это значит, что вам все равно придется прописывать любой CSS inline и переносить всю информацию о стилях — включая свойство `display:none;` — в тело вашего HTML-письма.

## Другие последствия

Как и при любом изменении поддержки CSS в почтовых клиентах, поддержка `display:none;` в Gmail имеет несколько интересных последствий:

### Лайфхак для управления масштабированием шрифтов в приложении Gmail на iOS

В версии приложения Gmail для iOS автоматическое масштабирование шрифтов было реальной проблемой. Размер шрифта увеличивался, из-за чего письма выглядели сломанными. Был введен лайфхак, чтобы предотвратить это:

`

`

Теперь, когда `display:none;` поддерживается в Gmail (включая приложение для iOS), этот лайфхак больше не работает, снова «ломая» сотни писем! Есть решение — просто удалите или переместите `display:none;` из вашего inline CSS во встроенный CSS. Джастин Кху из Fresh Inbox написал об этом исправлении здесь.

### Скрытие элементов с помощью хака селектора атрибутов (включая media-queries!)

Хотя Gmail обычно не поддерживает CSS в ``, некоторые CSS-селекторы работают, в частности lang и summary только для адресов @gmail.com. Например:

`* [summary~="foo"]{ {display:none;} }`

Это можно использовать для выбора элементов в HTML, которые также будут работать в Gmail:

`

`

Теперь, когда Gmail поддерживает `display:none;`, вы могли бы использовать его в сочетании с media query для скрытия контента в веб-почте Gmail:

```

@media screen and (max-width: 600px) {

* [summary~="hide"] {display:none;}

}

```

## Идеи о том, чем заняться во все свободное время, которое вы больше не тратите на исправления Gmail

Теперь, когда вы будете тратить гораздо меньше времени на разработку и отладку своих писем, чем же вы займетесь в свободное время? Вот несколько предложений:

**Скрестите пальцы, чтобы это изменение было постоянным**

Иногда поставщики почтовых ящиков тестируют изменения в своих движках рендеринга, но могут откатить их в любое время. Давайте надеяться, что они никогда не отберут это изменение. Почему бы не написать им в Twitter и не дать знать, как мы ценим эти новости?

**Загрузите библиотеку сниппетов Litmus**

Со всеми вашими новыми лайфхаками `display:none;` для Gmail.

**Почитайте книгу**

Это нормально, даже если книга о письмах. Вот наша рекомендация.

**Тестируйте, тестируйте и еще раз тестируйте**

Продолжайте тестировать*каждое*письмо, которое вы отправляете, потому что почтовые клиенты будут и впредь внедрять такие незаявленные изменения.

## Предварительно просматривайте свои письма в Gmail

Как эти изменения повлияли на дизайн ваших писем? Используйте Litmus, чтобы мгновенно просмотреть свое письмо в Gmail — и более чем в 50 других почтовых клиентах — и убедиться, что ваш дизайн отображается именно так, как вы планировали.

Это обновление от Gmail является ярким примером того, как почтовые клиенты вносят изменения в поддержку, не уведомляя сообщество разработчиков. Всегда проверяйте, что ваше письмо выглядит идеально. Тестируйте каждое письмо перед отправкой.