Свойства Flex / Grid удаляются в электронной почте 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 фильтрует эти свойства?

Это нормально ?


php gmail css flexbox css-grid
person Baptiste Arnaud    schedule 07.09.2016    source источник

Ответы (1)


arrow_upward
41
arrow_downward

Разработка электронных писем в формате HTML не похожа на разработку веб-сайтов в формате HTML. Существует огромный технологический разрыв между почтовыми клиентами и веб-браузерами. Как будто браузеры продолжают развиваться, а почтовые клиенты застряли в 1998 году.

В мире электронной почты в формате HTML встроенные и внешние стили — это плохо, CSS3 — это плохо, JavaScript — это плохо, а встроенные стили и таблицы для макета — это хорошо. В этом мире методы кодирования старой школы живы и здоровы.

Неудивительно, что Gmail удалит свойства CSS3. Лучше всего придерживаться таблиц и встроенных стилей.

ОБНОВЛЕНИЕ: Gmail теперь поддерживает встроенные стили.

Дополнительная информация:

person Michael Benjamin    schedule 07.09.2016