Styling email HTML untuk Gmail

Question 1

Saya membuat email html yang menggunakan lembar gaya internal, yaitu

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

Jika dilihat di Gmail, sepertinya semua gaya di stylesheet internal diabaikan. Tampaknya Gmail mengabaikan semua gaya selain aturan sebaris, mis

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

Apakah ini satu-satunya pilihan saya untuk mengatur gaya email HTML saat dilihat dengan Gmail?

Question 2

Jawaban di sini sudah usang, mulai hari ini 30 Sep 2016. Gmail saat ini meluncurkan dukungan untuk styletag di head, serta kueri media. Jika Gmail adalah satu-satunya perhatian Anda, Anda aman menggunakan kelas seperti pengembang modern!

Untuk referensi, Anda dapat memeriksa dokumen CSS resmi gmail .

Sebagai catatan tambahan, Gmail adalah satu-satunya klien utama yang tidak mendukung style( referensi , sampai mereka tetap memperbaruinya). Itu berarti Anda hampir dapat dengan aman berhenti menempatkan gaya sebaris. Beberapa klien yang tidak jelas mungkin masih membutuhkannya.

Question 3

Gunakan gaya sebaris untuk semuanya. Situs ini akan mengonversi kelas Anda ke gaya sebaris: http://premailer.dialect.ca/

Question 4

Gmail memulai dukungan dasar untuk tag gaya di area kepala. Belum menemukan apa pun yang resmi, tetapi Anda dapat mencobanya sendiri dengan mudah.
Tampaknya mengabaikan pemilih kelas dan id tetapi pemilih elemen dasar berfungsi.

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

itu akan membuat tag gaya di area kepalanya sendiri terbatas pada div yang berisi badan surat

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

Question 5

Saya setuju dengan semua orang yang mendukung kelas DAN gaya sebaris. Anda mungkin telah mempelajarinya sekarang, tetapi jika ada satu kesalahan dalam style sheet Anda, Gmail akan mengabaikannya.

Anda mungkin berpikir bahwa CSS Anda sempurna, karena Anda sudah sering melakukannya, mengapa saya mengalami kesalahan dalam CSS saya? Jalankan melalui Validator CSS (misalnya http://www.css-validator.org/ ) dan lihat apa yang terjadi. Saya melakukannya setelah mengalami beberapa masalah tampilan Gmail, dan yang mengejutkan saya, beberapa deklarasi gaya khusus Microsoft Outlook muncul sebagai kesalahan.

Yang masuk akal bagi saya, jadi saya menghapusnya dari style sheet dan memasukkannya ke dalam only for Microsoftblok kode, seperti:

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

Ini hanyalah contoh sederhana, tetapi, siapa tahu, ini mungkin berguna suatu saat.

Question 6

Seperti yang dikatakan orang lain, beberapa program email tidak akan membaca gaya css. Jika Anda sudah memiliki email web yang ditulis, Anda dapat menggunakan alat berikut dari zurb untuk menyebariskan semua gaya Anda:

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

Ini sangat berguna saat menggunakan template seperti yang disebutkan di atas dari mailchimp, monitor kampanye, dll. Karena, seperti yang Anda temukan, tidak akan berfungsi di beberapa program email. Alat ini meninggalkan bagian gaya Anda untuk program email yang akan membacanya dan meletakkan semua gaya sebaris untuk mendapatkan keterbacaan yang lebih universal dalam format yang Anda inginkan.

Question 7

Perhatikan bahwa layanan dan alat untuk mengirim email mungkin dapat menyebariskan CSS untuk Anda, memungkinkan CSS dalam <style>tag berfungsi di Gmail.

Misalnya, jika Anda mengirim email dengan MailChimp, CSS dari <style>tag Anda akan disisipkan secara otomatis secara default. Dengan Mandrill, Anda dapat mengaktifkan fungsionalitas ini (meskipun dinonaktifkan secara default karena alasan kinerja ) dengan mencentang kotak "Gaya Inline CSS di Email HTML" di bagian "Mengirimkan Default" pada tab Pengaturan:

Gambar yang menunjukkan cara melakukan ini di Mandrill

Question 8

Saya mengalami masalah yang sama saat mendesain template di Mailjet. Solusi dari masalah ini adalah meminimalkan kode CSS di dalam <style>tag.

Answer 1

99

Saya membuat email html yang menggunakan lembar gaya internal, yaitu

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

Jika dilihat di Gmail, sepertinya semua gaya di stylesheet internal diabaikan. Tampaknya Gmail mengabaikan semua gaya selain aturan sebaris, mis

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

Apakah ini satu-satunya pilihan saya untuk mengatur gaya email HTML saat dilihat dengan Gmail?

html css gmail html-email Dónal
sumber

14

Ya, ini adalah satu-satunya karena banyak klien email berbasis web tidak mengenali lembar gaya internal. Sebenarnya styleing inline adalah cara yang direkomendasikan untuk mendesain newsletter html.

Mike

Sejauh yang saya tahu, pembaca email diharapkan mendukung html 3.2 dan css 1.1.

Bagaimana Anda menghasilkan email Anda? Maksud saya, apakah Anda menambahkan kode untuk membuat maksud?

RaphMclee

7

Biasanya praktik yang baik untuk menggunakan <html>tag pembuka ;)

Zaz

1

Gmail payah. Aplikasi iOS dan aplikasi berbasis web juga!

Adrian Florescu

Answer 2

14

Ya, ini adalah satu-satunya karena banyak klien email berbasis web tidak mengenali lembar gaya internal. Sebenarnya styleing inline adalah cara yang direkomendasikan untuk mendesain newsletter html.

Mike

Answer 3

Sejauh yang saya tahu, pembaca email diharapkan mendukung html 3.2 dan css 1.1.

Answer 4

Bagaimana Anda menghasilkan email Anda? Maksud saya, apakah Anda menambahkan kode untuk membuat maksud?

RaphMclee

Answer 5

7

Biasanya praktik yang baik untuk menggunakan <html>tag pembuka ;)

Zaz

Answer 6

1

Gmail payah. Aplikasi iOS dan aplikasi berbasis web juga!

Adrian Florescu

Answer 7

19

Jawaban di sini sudah usang, mulai hari ini 30 Sep 2016. Gmail saat ini meluncurkan dukungan untuk styletag di head, serta kueri media. Jika Gmail adalah satu-satunya perhatian Anda, Anda aman menggunakan kelas seperti pengembang modern!

Untuk referensi, Anda dapat memeriksa dokumen CSS resmi gmail .

Sebagai catatan tambahan, Gmail adalah satu-satunya klien utama yang tidak mendukung style( referensi , sampai mereka tetap memperbaruinya). Itu berarti Anda hampir dapat dengan aman berhenti menempatkan gaya sebaris. Beberapa klien yang tidak jelas mungkin masih membutuhkannya.

Matthew Johnson
sumber

1

Sepertinya masih belum berfungsi. Kami mencobanya di Litmus, tetapi tidak berhasil. Apakah ada alasan khusus?

Arian

@ArianHosseinzadeh Apa yang tidak berhasil? Menambahkan referensi ke dokumentasi mereka tentang masalah tersebut.

Matthew Johnson

Kami mencobanya di Litmus, dan mengabaikan stylings non-inline. Sudahkah Anda mencoba <style> untuk gmail setelah mereka mengumumkannya? apa itu bekerja ?

Arian

1

@ArianHosseinzadeh Saya melakukan copy-n-paste dari contoh mereka di dokumen mereka, dan menjalankannya melalui putmail . Gaya ditampilkan di gmail. Saya memverifikasi aplikasi gmail Android dan gmail di browser Chrome. Dugaan saya adalah bahwa pratinjau lakmus belum diperbarui untuk mencerminkan perubahan.

Matthew Johnson

1

Saya bertanya-tanya mengapa gaya saya tidak berfungsi, dan menyadari bahwa saya telah menempatkannya di dalam bodytag, bukan di headtag.

palswim

Answer 8

1

Sepertinya masih belum berfungsi. Kami mencobanya di Litmus, tetapi tidak berhasil. Apakah ada alasan khusus?

Arian

Answer 9

@ArianHosseinzadeh Apa yang tidak berhasil? Menambahkan referensi ke dokumentasi mereka tentang masalah tersebut.

Matthew Johnson

Answer 10

Kami mencobanya di Litmus, dan mengabaikan stylings non-inline. Sudahkah Anda mencoba <style> untuk gmail setelah mereka mengumumkannya? apa itu bekerja ?

Arian

Answer 11

1

@ArianHosseinzadeh Saya melakukan copy-n-paste dari contoh mereka di dokumen mereka, dan menjalankannya melalui putmail . Gaya ditampilkan di gmail. Saya memverifikasi aplikasi gmail Android dan gmail di browser Chrome. Dugaan saya adalah bahwa pratinjau lakmus belum diperbarui untuk mencerminkan perubahan.

Matthew Johnson

Answer 12

1

Saya bertanya-tanya mengapa gaya saya tidak berfungsi, dan menyadari bahwa saya telah menempatkannya di dalam bodytag, bukan di headtag.

palswim

Answer 13

67

Gunakan gaya sebaris untuk semuanya. Situs ini akan mengonversi kelas Anda ke gaya sebaris: http://premailer.dialect.ca/

substate
sumber

2

Situs ini luar biasa. Menampilkan peringatan dan memberi Anda keluaran teks biasa serta menyusun ulang HTML Anda.

jamesbar2

1

Premailer ini ada di Ruby, sumber: github.com/premailer/premailer . Ada satu lagi di Python: premailer.io source: github.com/peterbe/premailer , keduanya open source.

Maxime R.

1

Jawaban ini tidak lagi akurat. gmail mendukung gaya dan kelas serta memiliki dokumen resmi tentang subjek tersebut - lihat jawaban Matthew Johnson di bawah.

mikemaccana

Answer 14

2

Situs ini luar biasa. Menampilkan peringatan dan memberi Anda keluaran teks biasa serta menyusun ulang HTML Anda.

jamesbar2

Answer 15

1

Premailer ini ada di Ruby, sumber: github.com/premailer/premailer . Ada satu lagi di Python: premailer.io source: github.com/peterbe/premailer , keduanya open source.

Maxime R.

Answer 16

1

Jawaban ini tidak lagi akurat. gmail mendukung gaya dan kelas serta memiliki dokumen resmi tentang subjek tersebut - lihat jawaban Matthew Johnson di bawah.

mikemaccana

Answer 17

Gmail memulai dukungan dasar untuk tag gaya di area kepala. Belum menemukan apa pun yang resmi, tetapi Anda dapat mencobanya sendiri dengan mudah.
Tampaknya mengabaikan pemilih kelas dan id tetapi pemilih elemen dasar berfungsi.

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

itu akan membuat tag gaya di area kepalanya sendiri terbatas pada div yang berisi badan surat

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

Answer 18

Itu masih tidak mendukung kueri Media meskipun yang agak memalukan. Kelas dan ID juga berguna :)

Eoin

Answer 19

2

Mereka sekarang melakukan kueri media juga dan dukungan yang lebih lengkap untuk gaya css. stackoverflow.com/questions/39759764/…

crowmagnumb

Answer 20

Saya setuju dengan semua orang yang mendukung kelas DAN gaya sebaris. Anda mungkin telah mempelajarinya sekarang, tetapi jika ada satu kesalahan dalam style sheet Anda, Gmail akan mengabaikannya.

Anda mungkin berpikir bahwa CSS Anda sempurna, karena Anda sudah sering melakukannya, mengapa saya mengalami kesalahan dalam CSS saya? Jalankan melalui Validator CSS (misalnya http://www.css-validator.org/ ) dan lihat apa yang terjadi. Saya melakukannya setelah mengalami beberapa masalah tampilan Gmail, dan yang mengejutkan saya, beberapa deklarasi gaya khusus Microsoft Outlook muncul sebagai kesalahan.

Yang masuk akal bagi saya, jadi saya menghapusnya dari style sheet dan memasukkannya ke dalam only for Microsoftblok kode, seperti:

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

Ini hanyalah contoh sederhana, tetapi, siapa tahu, ini mungkin berguna suatu saat.

Answer 21

Terima kasih, bagian tentang CSS yang tidak valid menghemat banyak waktu saya. Jika Anda masih ada, beri tahu saya.

Shadow Wizard adalah Ear For You

Answer 22

1

Hai @ShadowWizard. Aku pergi sebentar tapi aku kembali. Senang bisa menghemat waktu.

Shawn Spencer

Answer 23

Cheers, hanya ingin memastikan bounty tidak terbuang percuma. :-)

Shadow Wizard adalah Ear For You

Answer 24

Seperti yang dikatakan orang lain, beberapa program email tidak akan membaca gaya css. Jika Anda sudah memiliki email web yang ditulis, Anda dapat menggunakan alat berikut dari zurb untuk menyebariskan semua gaya Anda:

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

Ini sangat berguna saat menggunakan template seperti yang disebutkan di atas dari mailchimp, monitor kampanye, dll. Karena, seperti yang Anda temukan, tidak akan berfungsi di beberapa program email. Alat ini meninggalkan bagian gaya Anda untuk program email yang akan membacanya dan meletakkan semua gaya sebaris untuk mendapatkan keterbacaan yang lebih universal dalam format yang Anda inginkan.

Answer 25

Terima kasih untuk tautan inlinernya.

Shawn Spencer

Answer 26

Perhatikan bahwa layanan dan alat untuk mengirim email mungkin dapat menyebariskan CSS untuk Anda, memungkinkan CSS dalam <style>tag berfungsi di Gmail.

Misalnya, jika Anda mengirim email dengan MailChimp, CSS dari <style>tag Anda akan disisipkan secara otomatis secara default. Dengan Mandrill, Anda dapat mengaktifkan fungsionalitas ini (meskipun dinonaktifkan secara default karena alasan kinerja ) dengan mencentang kotak "Gaya Inline CSS di Email HTML" di bagian "Mengirimkan Default" pada tab Pengaturan:

Gambar yang menunjukkan cara melakukan ini di Mandrill

Answer 27

0

Saya mengalami masalah yang sama saat mendesain template di Mailjet. Solusi dari masalah ini adalah meminimalkan kode CSS di dalam <style>tag.

Vojtěch Remiš
sumber

Styling email HTML untuk Gmail

Jawaban: