Stylizowanie e-maili HTML dla Gmaila

Question 1

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?

Question 2

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ć.

Question 3

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

Question 4

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>

Question 5

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ć.

Question 6

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.

Question 7

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

Question 8

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

Answer 1

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?

html css gmail html-email 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

Answer 2

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

Answer 3

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

Answer 4

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

RaphMclee

Answer 5

7

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

Zaz

Answer 6

1

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

Adrian Florescu

Answer 7

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

Answer 8

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

Answer 9

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

Matthew Johnson,

Answer 10

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

Answer 11

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,

Answer 12

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

Answer 13

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

Answer 14

2

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

jamesbar2

Answer 15

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.

Answer 16

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

Answer 17

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>

Answer 18

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

Koniec

Answer 19

2

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

crowmagnumb

Answer 20

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ć.

Answer 21

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

Answer 22

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,

Answer 23

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

Shadow Wizard is Ear For You

Answer 24

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.

Answer 25

Dziękuję za link.

Shawn Spencer,

Answer 26

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

Answer 27

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

Stylizowanie e-maili HTML dla Gmaila

Odpowiedzi: