Стилізація HTML-адреси електронної пошти для Gmail

99

Я створюю HTML-лист, який використовує внутрішню таблицю стилів, тобто

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

При перегляді в Gmail здається, що всі стилі у внутрішній таблиці стилів ігноруються. Здається, Gmail ігнорує всі стилі, крім вбудованих правил, наприклад

 <h2 style="color: red">Email content here</foo>

Це мій єдиний варіант стилізації електронних листів HTML під час перегляду в Gmail?

— Dónal
джерело

14

Так, це єдиний, оскільки багато веб-клієнтів електронної пошти не розпізнають внутрішні таблиці стилів. Насправді вбудований стиль є рекомендованим способом створення HTML-бюлетенів.

— Майк

Наскільки мені відомо, від читачів електронної пошти можна очікувати, що вони підтримують html 3.2 та css 1.1.

Як ви створили свою електронну пошту? Я маю на увазі, що ви додаєте код створення наміру?

— RaphMclee

7

Як правило, корисно застосовувати вступний <html>тег;)

— Заз,

1

Gmail відстій. Додаток для iOS та веб-додаток теж!

— Адріан Флореску

19

Відповіді тут застаріли, станом на сьогодні 30 вересня 2016 року Gmail в даний час викочує підтримку для styleтега в head, а також медіа - запитів. Якщо Gmail - це ваша єдина проблема, ви можете безпечно використовувати класи, як сучасний розробник!

Для довідки ви можете перевірити офіційні документи CSS gmail .

Як побічне зауваження, Gmail був єдиним основним клієнтом, який не підтримував style( посилання , поки вони все одно не оновляться). Це означає, що ви можете майже спокійно перестати вбудовувати стилі. Деякі з найбільш незрозумілих клієнтів вони все ще можуть їх потребувати.

— Метью Джонсон
джерело

1

Схоже, це все одно не працює. Ми спробували це в Лакмусі, але це не працює. Чи є якась особлива причина?

— Аріан

@ArianHosseinzadeh Що не працює? Додано посилання на їх документацію з цього питання.

— Метью Джонсон,

Ми спробували це в Лакмусі, і він ігнорує нелінійні стилі. Ви пробували <style> для gmail після того, як вони про це оголосили? це спрацювало ?

— Аріан

1

@ArianHosseinzadeh Я зробив copy-n-paste з їхнього прикладу в своїх документах і провів через putmail . Стилі відображаються в Gmail. Я перевірив Android gmail і gmail у браузері Chrome. Я припускаю, що попередні перегляди Лакмусу не були оновлені, щоб відобразити зміни.

— Метью Джонсон,

1

Мені було цікаво, чому мої стилі не працюють, і зрозумів, що помістив їх у bodyтег, а не в headтег.

— palswim

67

Використовуйте вбудовані стилі для всього. Цей сайт перетворить ваші класи на вбудовані стилі: http://premailer.dialect.ca/

— піддержава
джерело

2

Цей сайт чудовий. Відображає попередження та дає вам звичайний текст, а також змінює ваш HTML.

— jamesbar2,

1

Цей премайлер знаходиться в Ruby, джерело: github.com/premailer/premailer . У Python є ще один: premailer.io джерело: github.com/peterbe/premailer , обидва є відкритими.

— Максим Р.

1

Ця відповідь вже не є точною. gmail підтримує стилі та класи та має офіційні документи на цю тему - див. відповідь Метью Джонсона нижче.

— mikemaccana

12

Gmail запустив базову підтримку тегів стилів в області голови. Поки що нічого офіційного не знайшов, але ви можете легко спробувати самі.
Здається, селектори класу та ідентифікатора ігноруються, але селектори базових елементів працюють.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

він створить тег стилю у власній області голови, обмеженої div, що містить тіло пошти

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

— 777
джерело

Він все ще не підтримує медіа-запити, хоча це трохи шкода. Заняття та посвідчення особи також дуже корисні :)

— Eoin

2

Зараз вони також роблять медіа-запити та отримують повну підтримку стилів css. stackoverflow.com/questions/39759764 / ...

— crowmagnumb

7

Я погоджуюся з усіма, хто підтримує класи та вбудовані стилі. Можливо, ви вже про це дізналися, але якщо у вашій таблиці стилів є одна помилка, Gmail не враховуватиме її.

Ви можете подумати, що ваш CSS ідеальний, адже ви робили це так часто, чому в моєму CSS виникають помилки? Запустіть його через CSS Validator (наприклад, http://www.css-validator.org/ ) і подивіться, що станеться. Я зробив це, зіткнувшись з деякими проблемами з дисплеєм Gmail, і на мій подив, кілька декларацій стилів, визначених Microsoft Outlook, виявилися помилками.

Що для мене мало сенс, тому я видалив їх із таблиці стилів і помістив у only for Microsoftблок коду приблизно так:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Це лише простий приклад, але, хто знає, це може стати в нагоді деякий час.

— Шон Спенсер
джерело

Дякую, частина про недійсний CSS заощадила мені багато часу. Якщо ви все ще поруч, дайте мені знати, будь ласка.

— Майстер тіней - вухо для вас

1

Привіт @ShadowWizard. Я не був на деякий час, але повернувся. Радий, що це заощадило вам трохи часу.

— Шон Спенсер

Вітаю, просто хотів переконатися, що щедрість не буде витрачена даремно. :-)

— Майстер тіней - вухо для вас

2

Як сказали інші, деякі програми електронної пошти не читатимуть стилі css. Якщо у вас вже є веб-адреса електронної пошти, ви можете використати такий інструмент від zurb для вбудовування всіх своїх стилів:

http://zurb.com/ink/inliner.php

Це дуже зручно при використанні таких шаблонів, як згадані вище, від mailchimp, монітора кампанії тощо, оскільки вони, як ви виявили, не працюватимуть у деяких програмах електронної пошти. Цей інструмент залишає розділ вашого стилю для поштових програм, які будуть його читати, та розміщує всі стилі в рядку, щоб отримати більш універсальну читабельність у бажаному форматі.

— Чад Дюпюї
джерело

Дякуємо за посилання.

— Шон Спенсер

2

Зверніть увагу, що служби та інструменти для надсилання електронних листів можуть вбудовувати ваш CSS для вас, дозволяючи CSS у <style>тегах працювати в Gmail.

Наприклад, якщо ви надсилаєте електронні листи за допомогою MailChimp, ваш CSS із <style>тегів автоматично вставляється за замовчуванням. За допомогою Mandrill ви можете ввімкнути цю функцію (хоча вона вимкнена за замовчуванням з міркувань продуктивності ), встановивши прапорець «Вбудовані стилі CSS в електронній пошті HTML» у розділі «Надсилання за замовчуванням» на вкладці Налаштування:

Зображення, на якому показано, як це зробити в Mandrill

— Марк Амері
джерело

0

У мене була та ж проблема під час проектування шаблону в Mailjet. Рішенням проблеми був мінімізований CSS-код всередині <style>тегів.

— Войтех Реміш
джерело