Stylizowanie e-maili HTML dla Gmaila

99

Generuję wiadomość e-mail w formacie HTML, która korzysta z wewnętrznego arkusza stylów, tj

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

Podczas przeglądania w Gmailu wydaje się, że wszystkie style w wewnętrznym arkuszu stylów są ignorowane. Wygląda na to, że Gmail ignoruje wszystkie style inne niż reguły wbudowane, np

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

Czy to moja jedyna opcja stylizowania wiadomości e-mail w formacie HTML wyświetlanych w Gmailu?

— Dónal
źródło

14

Tak, to jedyny, ponieważ wielu internetowych klientów poczty e-mail nie rozpoznaje wewnętrznych arkuszy stylów. Właściwie styl inline jest zalecanym sposobem projektowania biuletynów html.

— Mike

O ile wiem, można oczekiwać, że czytniki e-maili będą obsługiwać html 3.2 i css 1.1.

Jak wygenerowałeś swój e-mail? Chodzi mi o to, że con dodajesz kod tworzenia intencji?

— RaphMclee

7

Generalnie dobrą praktyką jest używanie <html>tagu otwierającego ;)

— Zaz

1

Gmail jest do bani. Aplikacja na iOS i aplikacja internetowa!

— Adrian Florescu

19

Tutejsze odpowiedzi są nieaktualne, ponieważ od dzisiaj 30 września 2016. Gmail jest obecnie rozwijają się wsparcie dla styleznacznika w head, a także zapytań multimedialnych. Jeśli Twoim jedynym zmartwieniem jest Gmail, możesz bezpiecznie korzystać z klas, takich jak nowoczesny programista!

W celach informacyjnych możesz sprawdzić oficjalne dokumenty CSS Gmaila .

Na marginesie, Gmail był jedynym głównym klientem, który nie obsługiwał style( odniesienie , dopóki i tak nie zaktualizują). Oznacza to, że możesz prawie bezpiecznie przestać umieszczać style w linii. Niektórzy bardziej nieznani klienci mogą ich nadal potrzebować.

— Matthew Johnson
źródło

1

Wygląda na to, że nadal nie działa. Wypróbowaliśmy to w Lakmusie, ale to nie działa. Czy jest jakiś szczególny powód?

— Arian

@ArianHosseinzadeh Co nie działa? Dodano odniesienie do ich dokumentacji w tej sprawie.

— Matthew Johnson,

Wypróbowaliśmy to w Lakmusie i ignoruje on style nieliniowe. Czy wypróbowałeś <style> dla Gmaila po tym, jak to ogłosili? zadziałało ?

— Arian

1

@ArianHosseinzadeh Zrobiłem kopiowanie i wklejanie z ich przykładu w ich dokumentach i przepuściłem przez putsmail . Style są wyświetlane w Gmailu. Zweryfikowałem aplikację Gmail na Androida i Gmaila w przeglądarce Chrome. Domyślam się, że podglądy Litmusa nie zostały zaktualizowane, aby odzwierciedlić zmianę.

— Matthew Johnson,

1

Zastanawiałem się, dlaczego moje style nie działają i zdałem sobie sprawę, że umieściłem je w bodytagu zamiast w headtagu.

— palswim

67

Używaj stylów wbudowanych do wszystkiego. Ta witryna skonwertuje Twoje klasy na style wbudowane: http://premailer.dialect.ca/

— podst
źródło

2

Ta strona jest niesamowita. Pokazuje ostrzeżenia i wyświetla zwykły tekst, a także ponownie tworzy HTML.

— jamesbar2

1

Ten Premailer jest w Rubim, źródło: github.com/premailer/premailer . Istnieje jeszcze jeden w Pythonie: premailer.io źródło: github.com/peterbe/premailer , oba są open source.

— Maxime R.

1

Ta odpowiedź nie jest już dokładna. gmail obsługuje style i klasy oraz posiada oficjalną dokumentację na ten temat - zobacz odpowiedź Matthew Johnsona poniżej.

— mikemaccana

12

Gmail rozpoczął podstawową obsługę tagów stylów w obszarze głowy. Nie znalazłem jeszcze nic oficjalnego, ale możesz łatwo spróbować samemu.
Wydaje się, że ignoruje selektory klasy i identyfikatora, ale podstawowe selektory elementów działają.

<!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>

utworzy znacznik stylu w swoim własnym obszarze nagłówka, ograniczonym do elementu div zawierającego treść wiadomości

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

— fuchs777
źródło

Wciąż nie obsługuje zapytań o media, co jest trochę wstydem. Klasy i identyfikatory też się przydadzą :)

— Koniec

2

Teraz wykonują również zapytania o media i pełnią wsparcie dla stylów CSS. stackoverflow.com/questions/39759764/…

— crowmagnumb

7

Zgadzam się z każdym, kto wspiera zajęcia ORAZ style inline. Być może już się tego nauczyłeś, ale jeśli w Twoim arkuszu stylów jest jeden błąd, Gmail go zignoruje.

Możesz pomyśleć, że twój CSS jest doskonały, ponieważ robiłeś to tak często, dlaczego miałbym mieć błędy w moim CSS? Uruchom go przez walidator CSS (na przykład http://www.css-validator.org/ ) i zobacz, co się stanie. Zrobiłem to po napotkaniu pewnych problemów z wyświetlaniem Gmaila i ku mojemu zdziwieniu kilka specyficznych deklaracji stylu programu Microsoft Outlook pojawiło się jako błędy.

To miało dla mnie sens, więc usunąłem je z arkusza stylów i umieściłem w only for Microsoftbloku kodu, na przykład:

<!--[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]-->

To tylko prosty przykład, ale kto wie, może się kiedyś przydać.

— Shawn Spencer
źródło

Dzięki, część dotycząca nieprawidłowego CSS zaoszczędziła mi dużo czasu. Jeśli nadal jesteś w pobliżu, daj mi znać, proszę.

— Shadow Wizard is Ear For You

1

Hej @ShadowWizard. Nie było mnie na chwilę, ale wróciłem. Cieszę się, że zaoszczędziło ci to trochę czasu.

— Shawn Spencer,

Na zdrowie, chciałem tylko upewnić się, że nagroda nie zostanie zmarnowana. :-)

— Shadow Wizard is Ear For You

2

Jak powiedzieli inni, niektóre programy pocztowe nie odczytują stylów CSS. Jeśli masz już napisaną internetową wiadomość e-mail, możesz użyć następującego narzędzia zurb, aby wstawić wszystkie swoje style:

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

Jest to niezwykle przydatne, gdy używasz szablonów takich jak te wymienione powyżej z mailchimp, monitora kampanii itp., Ponieważ, jak odkryłeś, nie będą działać w niektórych programach pocztowych. To narzędzie pozostawia twoją sekcję stylów dla programów pocztowych, które będą je czytać i umieszcza wszystkie style w tekście, aby uzyskać bardziej uniwersalną czytelność w pożądanym formacie.

— Chad Dupuis
źródło

Dziękuję za link.

— Shawn Spencer,

2

Pamiętaj, że usługi i narzędzia do wysyłania e-maili mogą być w stanie wbudować CSS za Ciebie, umożliwiając CSS w <style>tagach działanie w Gmailu.

Na przykład, jeśli wysyłasz e-maile za pomocą MailChimp, Twój kod CSS z <style>tagów zostanie domyślnie wstawiony automatycznie. W Mandrill możesz włączyć tę funkcję (chociaż jest ona domyślnie wyłączona ze względu na wydajność ), zaznaczając pole „Wbudowane style CSS w wiadomościach e-mail HTML” w sekcji „Domyślne wysyłanie” na karcie Ustawienia:

Obraz pokazujący, jak to zrobić w Mandrill

— Mark Amery
źródło

0

Miałem ten sam problem podczas projektowania szablonu w Mailjet. Rozwiązaniem problemu był zminimalizowany kod CSS wewnątrz <style>tagów.

— Vojtěch Remiš
źródło