Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Pengaturan Email CSS (Pengaturan Atribut Gaya)

PengembangTeks

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

HTML dengan

Memandu

CSS Email Inliner (Style Attribute Inliner)

Pengaturan Email CSS (Pengaturan Atribut Gaya)

Ubah HTML dengan blok menjadi markup yang siap untuk email dengan setiap aturan CSS dipindahkan ke atribut style=\"\". Pelanggan email menghapus atau mengabaikan blok , sehingga pindah ke atribut inline adalah satu-satunya cara yang dapat diandalkan untuk mempertahankan desain Anda di Gmail, Outlook, Yahoo, dan Apple Mail.

Tempel HTML penuh Anda di sebelah kiri; alat ini menganalisis setiap pilihan pilihan, menyelesaikan kekhususan CSS secara tepat seperti yang dilakukan oleh browser, dan menulis pernyataan menang ke setiap elemen yang sesuai. Aturan pseudo-kelas seperti :hover dan setiap query @media dipertahankan dalam blok sisa, karena pelanggan email yang mendukungnya tetap membutuhkannya di sana.

Cara Penggunaan

Tempel HTML Anda — dokumen penuh atau fragmen dengan blok — ke bidang masukan.
Putuskan apakah ingin mempertahankan media query dan aturan pseudo-kelas (disarankan untuk email responsif).
Opsional, hapus atribut class dari hasil setelah gaya diinline.
Toggle tampilan rapi pada atau off tergantung pada apakah Anda ingin hasil yang mudah dibaca atau kompak.
Salin HTML yang diinline atau unduh sebagai file, lalu tempel langsung ke penyedia email Anda.

Fitur

Penggabungan yang sadar terhadap kekhususan – Menyelesaikan ID, kelas, atribut, dan tipe elemen secara tepat seperti urutan cascade browser.
Pengelolaan !important – Deklarasi !important eksternal secara tepat mengalahkan gaya inline biasa, sesuai dengan spesifikasi CSS.
Pertahankan media query – Aturan @media responsif dipertahankan agar titik pemutus mobile tetap berfungsi.
Pertahanan fallback pseudo-kelas – Aturan :hover, :focus, dan ::before tidak bisa diinline; alat ini mempertahankannya dalam blok yang telah diperkecil.
Blok ganda – Menangani dokumen dengan beberapa tag gaya di <head> atau <body>.
Penghapusan kelas opsional – Hapus atribut class=\"\" yang sekarang tidak lagi diperlukan untuk memperkecil ukuran payload.
Tampilan rapi hasil keluaran – Output HTML yang terindentasi dan mudah dibaca atau output kompak satu baris.
100% sisi klien – HTML Anda tidak pernah meninggalkan browser. Tidak ada unggah, tidak ada pemrosesan server.

IKLAN · HAPUS?

 Tanya Jawab Umum

Mengapa email HTML perlu CSS diinline daripada menggunakan blok style?

Banyak pelanggan email — terutama versi lama Outlook dan beberapa penyedia email web — menghapus elemen kepala secara keseluruhan atau memasang pesan dalam sandbox sehingga gaya eksternal dan terintegrasi diabaikan. Atribut style langsung pada setiap elemen adalah satu-satunya bentuk deklarasi yang dihormati oleh setiap pelanggan email utama, sehingga langkah inline adalah keharusan untuk desain yang harus terlihat sama di Gmail, Outlook, Yahoo, dan Apple Mail.
Apa itu kekhususan CSS dan mengapa urutan cascade penting untuk inline?

Kekhususan adalah bobot yang diberikan CSS kepada pilihan berdasarkan ID, kelas, atribut, pseudo-kelas, dan tipe elemen. Ketika dua aturan menargetkan properti yang sama pada elemen yang sama, browser mempertahankan nilai dari aturan dengan kekhususan yang lebih tinggi; jika ada keterkaitan, urutan sumber menentukan pemenang, dengan aturan yang lebih terakhir menang. Sebuah alat inline harus memainkan algoritma tersebut per deklarasi, karena jika aturan dengan kekhususan rendah menggantikan aturan dengan kekhususan tinggi, maka desain yang ditampilkan akan berubah secara diam-diam.
Bagaimana flag !important berinteraksi dengan gaya inline?

Dalam urutan cascade standar, gaya inline berada pada tingkat asal yang lebih tinggi daripada stylesheet penulis, sehingga biasanya mengalahkan aturan kelas atau elemen. Flag !important adalah satu-satunya pengecualian: deklarasi !important dari stylesheet penulis mengalahkan deklarasi inline yang tidak penting. Itulah sebabnya tombol yang berwarna putih !important dalam kelas tetap menampilkan warna putih bahkan jika elemen tersebut memiliki style=\"color: blue\".
Mengapa aturan pseudo-kelas seperti :hover atau elemen pseudo seperti ::before tidak bisa diinline?

Atribut style menampung deklarasi yang berlaku secara kondisional terhadap elemen yang dimilikinya. Aturan pseudo-kelas menggambarkan suatu kondisi — hover, focus, checked — dan elemen pseudo menggambarkan konten yang dihasilkan yang tidak memiliki node DOM nyata. Kedua konsep tidak memiliki bentuk yang sesuai untuk inline, sehingga setiap alat inline harus mempertahankan aturan tersebut dalam blok style sisa untuk sebagian kecil pelanggan email yang mendukungnya.
Apa yang terjadi pada query @media selama proses inline?

Query media adalah aturan kondisional yang hanya berlaku ketika ukuran viewport memenuhi syarat. Karena atribut style tidak dapat menyatakan aplikasi kondisional, query media harus dipertahankan secara utuh di dalam blok style. Desain email responsif mengandalkan query min-width dan max-width untuk mengganti tata letak di perangkat mobile, sehingga menghapusnya akan menghancurkan perilaku responsif secara keseluruhan.