pengembangan-web-mp-pd.com

Styling email HTML untuk Gmail

Saya membuat email html yang menggunakan stylesheet internal, mis.

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

Saat dilihat di Gmail, tampaknya semua gaya di stylesheet internal diabaikan. Sepertinya Gmail mengabaikan semua gaya selain aturan inline, mis.

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

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

83
Dónal

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

61
substate

Gmail memulai dukungan dasar untuk tag gaya di area kepala. Belum menemukan yang resmi tetapi Anda dapat dengan mudah mencobanya sendiri.
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 kepala sendiri terbatas pada div yang berisi badan surat

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

Jawaban di sini sudah usang, pada hari ini 30 Sep 2016. Gmail saat ini meluncurkan dukungan untuk tag style di head, serta pertanyaan media. Jika Gmail adalah satu-satunya masalah Anda, Anda aman menggunakan kelas seperti pengembang modern!

Untuk referensi, Anda dapat memeriksa dokumen resmi gmail CSS.

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

11
Matthew Johnson

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

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

Image showing how to do this in Mandrill

2
Mark Amery

Saya setuju dengan semua orang yang mendukung kelas DAN gaya inline. Anda mungkin sudah mempelajari ini 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 memiliki kesalahan dalam CSS saya? Jalankan melalui Validator CSS (misalnya http://www.css-validator.org/ ) dan lihat apa yang terjadi. Saya melakukan itu setelah menemukan beberapa masalah tampilan Gmail, dan yang mengejutkan saya, beberapa deklarasi gaya spesifik Microsoft Outlook muncul sebagai kesalahan.

Yang masuk akal bagi saya, jadi saya menghapusnya dari style sheet dan memasukkannya ke dalam blok kode only for Microsoft, 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 hanya contoh sederhana, tetapi, siapa tahu, mungkin berguna beberapa saat.

1
Shawn Spencer

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

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

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

0
Chad Dupuis