Jadikan CSS sebuah email inline
Outlook dan beberapa webmail mengabaikan atau menghapus blok <style>. Menjadikannya inline adalah langkah mekanis yang membosankan, penghubung antara desain yang berfungsi di sebuah peramban dan desain yang berfungsi di sebuah kotak masuk.
- Berjalan sepenuhnya di peramban Anda
- Berfungsi tanpa koneksi
- Tanpa unggah
- Tanpa pendaftaran
- Tanpa watermark
Memuat alat…
Cara kerjanya
- Tempel HTML-nya beserta blok <style>-nya.
- Tekan “Inline the CSS” (jadikan CSS inline).
- Salin atau unduh hasilnya, lalu periksa di pratinjau di bawah.
Kenapa tidak ada yang diunggah
Semua yang dikerjakan halaman ini dijalankan oleh kode di dalam tab peramban Anda, memakai mesin yang sama dengan yang menampilkan halaman web. File dibaca dari disk ke memori tab Anda, diolah di sana, lalu ditulis kembali sebagai unduhan. File itu tidak pernah dikirim ke mana pun — tidak ke kami, tidak ke pihak ketiga.
Buktikan sendiri
- Buka alat pengembang peramban Anda (F12) lalu pilih tab “Network” (Jaringan).
- Muat file Anda dan jalankan alatnya.
- Permintaan yang akan Anda lihat hanya mengambil kode alat itu sendiri — dan, pada beberapa alat berat, mesin sumber terbukanya dari CDN publik — ditambah satu ping kunjungan halaman yang kecil ke loreatec.jp (alamat dan judul halaman, tidak lebih). Tidak satu pun membawa file Anda.
Pertanyaan yang sering diajukan
Kenapa media query tidak bisa dijadikan inline?
Karena sebuah style inline tidak punya kondisi yang menyertainya — style itu selalu berlaku. Media query adalah sebuah kondisi, jadi ia hanya bisa hidup di dalam blok <style>. Itulah sebabnya email yang responsif membutuhkan keduanya: style inline untuk desain dasarnya, dan blok <style> untuk tata letak di ponsel, dengan menerima kenyataan bahwa program email yang menghapus <style> akan menampilkan desain dasarnya saja.
Apa yang terjadi pada :hover?
Masalah yang sama, jawaban yang sama: itu tetap tinggal di blok <style>. Perlakukan efek hover sebagai bonus untuk program email yang mendukungnya, jangan pernah sebagai sesuatu yang menjadi sandaran pesannya.
Mana yang menang, style inline saya yang sudah ada atau stylesheet-nya?
Milik Anda. Apa pun yang sudah ada di dalam atribut style dipertahankan dan diletakkan setelah aturan-aturan yang datang dari stylesheet-nya, jadi itu tetap menang menimpanya — sama seperti di sebuah peramban.
Apakah ini sama dengan yang dilakukan alat newsletter saya?
Kebanyakan dari mereka menjadikannya inline saat mengirim, ya. Alat ini untuk kasus ketika Anda menyerahkan HTML-nya ke orang lain, mengirim lewat sebuah API, atau menelusuri kenapa sebuah aturan tidak selamat.