Gaya Inline untuk Email
Terapkan CSS secara inline untuk memastikan perenderan konsisten di berbagai klien email.
Gaya Inline untuk Email adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Mengapa Gaya Sebaris
Banyak klien surel—yang paling terkenal adalah Gmail web sebelum Mei 2016 dan beberapa aplikasi seluler hingga sekarang—menghapus atau menulis ulang blok <style> dan lembar gaya eksternal. Atribut style="..." sebaris adalah satu-satunya CSS yang dijamin tetap ada di setiap klien.
Tulis dalam CSS Eksternal, Kirim dengan Gaya Sebaris
Menulis gaya sebaris dengan tangan sulit dipelihara. Tulis surel menggunakan tag <style> dan nama kelas biasa, lalu jalankan alat penyisip gaya sebaris (Juice, Premailer, mjml) saat proses pembuatan untuk menyalin setiap aturan ke atribut style elemen yang sesuai sebelum dikirim.
Kekhususan Pemilih Menentukan
Gaya sebaris memiliki kekhususan tertinggi setelah !important. Kueri media yang ingin menimpa nilai sebaris harus menggunakan !important pada setiap properti, karena deklarasi sebaris akan menang tanpa memperhatikan konteks @media.
@media (max-width: 600px) {
.col {
width: 100% !important;
display: block !important;
}
}Alat Penyisip Gaya Tidak Menyentuh @media
Alat penyisip gaya hanya menyalin aturan yang cocok dengan elemen individual; blok @media tetap berada di dalam tag <style> karena tidak dapat diratakan. Hal ini tidak masalah—Gmail dan alat penghapus lainnya membiarkan gaya sebaris tetap utuh, sementara klien yang mendukung tag <style> menerapkan kueri media di atasnya.
Hindari Sintaks Singkat
Beberapa klien bermasalah dengan sintaks singkat: font: 14px/1.4 Arial mungkin diabaikan sepenuhnya. Gunakan bentuk lengkap (font-family, font-size, line-height) agar setiap properti dapat berfungsi atau gagal secara independen.
Selalu Tetapkan Warna dan Latar Belakang
Mode gelap secara otomatis membalikkan warna di banyak klien. Menetapkan color dan background-color secara eksplisit pada wadah teks mencegah bencana berupa teks hitam di atas latar belakang hitam. Selalu gunakan keduanya secara berpasangan.
Satuan Panjang
Gunakan px untuk ukuran. rem, vh, dan vw memiliki dukungan yang tidak konsisten. Persentase berfungsi pada tabel untuk tata letak selebar penuh; lebar piksel absolut pada tabel dan sel dalam ditampilkan secara identik di semua klien.
Tumpukan Font yang Aman untuk Web
Font web melalui @font-face berfungsi di Apple Mail, iOS Mail, dan Thunderbird, tetapi gagal di Outlook dan Gmail. Gunakan tumpukan yang aman untuk web sebagai nilai sebaris (Arial, Helvetica, sans-serif), dan gunakan @font-face hanya sebagai peningkatan bertahap untuk klien yang mendukungnya.
Gambar Latar dan Outlook
background-image sebaris pada div berfungsi di klien modern, tetapi diabaikan oleh Outlook. Gunakan bgcolor sebagai cadangan dan VML kondisional <v:rect> untuk Outlook agar setiap klien menampilkan latar yang setara secara visual, meskipun kesetiaan tampilan penuh tidak memungkinkan.
Uji pada Klien Nyata
Gaya sebaris tampak benar dalam pratinjau peramban, tetapi masih dapat ditampilkan secara berbeda di Gmail, Outlook, atau iOS Mail. Gunakan Litmus, Email on Acid, atau pratinjau Mailtrap gratis untuk memverifikasi setiap klien utama sebelum mengirim kampanye.
Atur Ulang Gaya
Tambahkan reset kecil di dalam tag <style> (margin: 0 pada body, line-height: 100% pada tabel, border: none pada gambar) untuk menetralkan gaya bawaan klien. Bungkus reset tersebut dalam kueri media jika ingin menerapkannya hanya di tempat <style> dihormati.
Uji Pemahaman
Mengapa kueri media dalam surel HTML memerlukan !important pada setiap properti?
Ringkasan
Surel memerlukan gaya sebaris agar tetap berfungsi setelah gaya dihapus oleh klien, tetapi biasanya gaya ditulis dalam <style> lalu dijadikan sebaris saat proses build. Gunakan !important di dalam kueri media untuk mengatasi spesifisitas sebaris, utamakan properti lengkap daripada singkatan, tetapkan color dan background-color secara eksplisit, gunakan satuan px, dan uji pada klien nyata sebelum mengirim.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Gaya Inline untuk Email” gratis?
Ya — teks lengkap “Gaya Inline untuk Email” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Gaya Inline untuk Email”?
Terapkan CSS secara inline untuk memastikan perenderan konsisten di berbagai klien email. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Gaya Inline untuk Email” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pendekatan Tata Letak Berbasis Tabel
- Gaya Inline untuk Email
- Penanganan Gambar di Klien Email
- Pengujian dengan Litmus dan Email on Acid