Gaya Sebaris untuk E-mel

Gaya sebaris mempunyai kekhususan tertinggi selepas !important. Pertanyaan media yang mahu mengatasi nilai sebaris mesti menggunakan !important pada setiap sifat, kerana tanpa itu pengisytiharan sebaris akan sentiasa diutamakan tanpa mengira konteks @media.

Alat penyisip gaya hanya menyalin peraturan yang sepadan dengan elemen individu; blok @media kekal di dalam tag <style> kerana tidak boleh diratakan. Ini tidak menjadi masalah — Gmail dan alat lain yang membuang gaya mengekalkan gaya sebaris, manakala klien yang menghormati tag <style> menggunakan pertanyaan media di atasnya.

Sesetengah klien bermasalah dengan bentuk singkatan: font: 14px/1.4 Arial mungkin diabaikan sepenuhnya. Gunakan bentuk panjang (font-family, font-size, line-height) supaya setiap sifat sama ada berfungsi atau gagal secara berasingan.

Mod gelap membalikkan warna secara automatik dalam banyak klien. Menetapkan color dan background-color secara jelas pada bekas teks mengelakkan bencana teks hitam pada latar belakang hitam. Sentiasa tetapkan kedua-duanya bersama.

Gunakan px untuk saiz. rem, vh dan vw mempunyai sokongan yang tidak konsisten. Peratusan berfungsi pada jadual untuk susun atur selebar penuh; lebar mutlak dalam piksel pada jadual dan sel dalaman dipaparkan secara sama dalam semua klien.

Fon web melalui @font-face berfungsi dalam Apple Mail, iOS Mail dan Thunderbird, tetapi gagal dalam Outlook dan Gmail. Gunakan susunan selamat web sebagai nilai sebaris (Arial, Helvetica, sans-serif), dan jadikan @font-face semata-mata sebagai peningkatan berperingkat untuk klien yang menyokongnya.

background-image sebaris pada div berfungsi dalam klien moden tetapi diabaikan oleh Outlook. Gunakan bgcolor sebagai sandaran dan VML bersyarat <v:rect> untuk Outlook supaya setiap klien memaparkan latar belakang yang setara secara visual walaupun ketepatan sepenuhnya tidak dapat dicapai.

Gaya sebaris mungkin kelihatan betul dalam pratonton pelayar, tetapi masih boleh dipaparkan secara berbeza dalam Gmail, Outlook atau iOS Mail. Gunakan Litmus, Email on Acid atau pratonton Mailtrap percuma untuk mengesahkan setiap klien utama sebelum menghantar kempen.

Tambahkan tetapan semula kecil dalam teg <style> (margin: 0 pada body, line-height: 100% pada jadual, border: none pada imej) untuk meneutralkan gaya lalai klien. Balutkannya dalam pertanyaan media jika anda mahu menggunakannya hanya pada tempat <style> dihormati.

E-mel memerlukan gaya sebaris supaya kekal selepas dilucutkan oleh klien, tetapi pengarang biasanya menulisnya dalam <style> dan menjadikannya sebaris semasa binaan. Gunakan !important dalam pertanyaan media untuk mengatasi kekhususan sebaris, utamakan sifat bentuk panjang berbanding bentuk ringkas, tetapkan color dan background-color secara eksplisit, gunakan unit px, dan uji dalam klien sebenar sebelum menghantar.