Свойства флексбокса удаляются в письме Gmail
У меня есть скрипт на PHP, который отправляет следующий HTML по почте:
<html class="no-js" lang="en">
<body>
<div style="width: 70%;background-color: #060b2b;margin: auto;flex-direction: column;display: flex;">
<h1 style="margin-top: 50px;color: white;margin-left: auto;margin-right: auto;">Vous avez reçu une nouvelle notification.</h1>
<div style="width: 80%;padding: 50px;margin-top: 50px;background-color: #222;margin-left: auto;margin-right: auto;display: flex;">
<p style="color:white;margin: auto;text-align: center;">{{$notification}}</p>
</div>
<a href="" style="margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;color: white;padding:15px;background-color: #0E0E0E;">Accéder à mon compte</a>
</div>
</body>
</html>
Но полученное письмо (когда я проверяю основной div) не показывает свойство flex-direction: column;
Кажется, что Gmail фильтрует эти свойства?
Это нормально ?
Решение
Разработка HTML-писем не похожа на разработку HTML-сайтов. Существует огромный технологический разрыв между почтовыми клиентами и веб-браузерами. Как будто браузеры продолжают развиваться, но почтовые клиенты застряли в 1998 году.
В мире электронной почты HTML встроенные и внешние стили плохие, CSS3 плохой, JavaScript плохой, в то время как .. встроенные стили и таблицы для верстки хороши. В этом мире методы кодирования старой школы живы и здоровы.
Неудивительно, что Gmail удалит свойства CSS3. Лучше всего придерживаться таблиц и встроенных стилей.
ОБНОВИТЬ: Gmail теперь поддерживает встроенные стили.
Дополнительная информация:
Другие решения
Других решений пока нет …