Penyusun CSS Email
Masukkan aturan blok CSS <style> ke dalam atribut style setiap tag HTML yang cocok, untuk email HTML di mana sebagian besar klien melepas tag <style>. Mendukung tag sederhana, kelas, ID, dan pemilih tag+kelas — tidak ada kombinasi turunan, pseudo-class, atau lcascade spesifisitas.
Input
When off, rules this tool can't inline are dropped instead of preserved.
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-email-inliner \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"htmlInput": "<style>p { color: red; }</style><p>Hello</p>",
"keepUnsupportedRules": "true",
"removeClassAttrs": ""
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-email-inliner` tool (CSS Email Inliner) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-email-inliner/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Penyusun CSS Email — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukan alat ini
Sebagian besar klien email — Gmail, Outlook, dan banyak lainnya — menghapus blok <style> dan konten <head> ketika mereka merender email HTML, atau mengabaikannya secara tidak dapat diprediksi. Satu-satunya CSS yang dijamin bertahan adalah CSS yang ditulis langsung pada setiap elemen sebagai atribut style="...". "CSS inlining" adalah proses mengambil aturan yang ditulis dalam blok <style> normal dan menyalin deklarasinya ke setiap elemen yang cocok, sehingga email dirender dengan benar di mana pun tanpa mengandalkan dukungan stylesheet.
Alat ini melakukan itu: tempel HTML yang berisi blok <style>, dan itu menulis ulang setiap tag yang cocok dengan atribut style inline yang membawa deklarasi yang diselesaikan, kemudian menghapus (atau secara opsional menyimpan) blok <style> asli.
Ruang lingkup jujur: pemilih sederhana saja
Mesin pemilih CSS penuh — kombinasi turunan (div p), kombinasi anak/saudara (div > p, p + span), pseudo-class dan pseudo-element (a:hover, p::first-line), pemilih atribut ([href]), dan resolusi lcascade berbasis spesifisitas — adalah masalah parsing yang benar-benar sulit tanpa DOM browser nyata untuk dipertanyakan. Alat ini berjalan secara isomorfik (browser, server, dan API) tanpa parser DOM yang tersedia, jadi secara sengaja tidak mencoba apa pun dari itu.
Apa yang didukungnya, cocok dengan pemindaian berbasis pola dari sumber HTML mentah:
- Pemilih tag —
p,td,h1 - Pemilih kelas —
.button - Pemilih ID —
#header - Pemilih tag + kelas —
p.intro
Apa pun yang lain dalam stylesheet Anda — pemilih turunan, pseudo-class, pemilih atribut, daftar koma yang mencampurkan bentuk yang didukung dan tidak didukung — diklasifikasikan sebagai "tidak didukung" dan, secara default, disimpan di blok <style> di bagian atas output daripada dihapus secara diam-diam atau tidak cocok. Matikan itu jika Anda lebih suka output tidak memiliki blok <style> sama sekali.
Juga tidak ada lcascade spesifisitas: ketika dua atau lebih aturan yang didukung cocok dengan elemen yang sama, aturan yang muncul lebih lambat dalam stylesheet Anda menang untuk properti apa pun yang keduanya atur — terlepas dari apakah itu pemilih tag, kelas, atau ID. Browser nyata akan menimbang pemilih ID di atas pemilih kelas di atas pemilih tag; alat ini tidak. Atribut style="..." pra-ada elemen selalu dipertahankan dan selalu menang atas apa pun yang ditarik dari stylesheet.
Jika template email Anda bergantung pada pemilih turunan, pseudo-class, atau resolusi spesifisitas yang tepat, gunakan inliner berbasis alat pembangun — juice atau Premailer keduanya menerapkan mesin pemilih penuh dan merupakan pilihan yang tepat untuk stylesheet kompleks.
Cara menggunakannya
- Tempel HTML yang berisi blok
<style>ke dalam kotak input. - Biarkan "Simpan aturan tidak didukung" dicentang untuk mempertahankan media query, aturan pseudo-class, dan pemilih lain yang alat ini tidak dapat disusun dalam blok
<style>di bagian atas output (sebagian besar klien email yang mendukung media query sama sekali masih akan membaca blok<style>yang ditempatkan di sana). Batalkan pilihan untuk menghapusnya sepenuhnya. - Centang "Hapus atribut class" jika Anda ingin
class="..."dihapus dari output setelah gaya telah disusun — berguna karena beberapa inbox menandai email yang masih mereferensikan nama kelas eksternal. - Salin atau unduh HTML hasil dari panel output.
Output diperbarui secara otomatis saat Anda mengedit input.
FAQ
Akankah ini menangani seluruh template email saya dengan benar?
Ini menangani kasus umum — tag, kelas, ID, dan aturan tag+kelas — dengan benar. Jika stylesheet Anda menggunakan pemilih turunan, pseudo-class, atau bergantung pada spesifisitas CSS untuk menyelesaikan konflik antara aturan, alat ini akan meninggalkan aturan tersebut dalam blok <style> daripada menebak, jadi periksa output sebelum mengirim. Lihat bagian ruang lingkup di atas.
Apa yang terjadi pada kueri @media?
Mereka tidak dapat disusun (media query tidak terikat pada elemen tunggal), jadi mereka ditinggalkan dalam blok <style> dalam output ketika "Simpan aturan tidak didukung" dicentang. Beberapa klien email (terutama Apple Mail dan versi Outlook/Gmail yang lebih baru) memang membaca blok <style> untuk media query bahkan setelah menghapus styling lainnya — itulah alasan yang tepat mengapa alat ini menyimpannya di sana daripada membuangnya.
Elemen saya sudah memiliki atribut style="..." — apa yang terjadi padanya?
Itu disimpan dan selalu lebih diutamakan daripada apa pun yang disusun dari stylesheet, sesuai dengan cara browser nyata memprioritaskan gaya inline atas aturan stylesheet.
Apakah itu memvalidasi atau memperbaiki HTML yang rusak? Tidak — ini adalah transformasi best-effort, bukan validator HTML. Pada input yang buruk bentuknya, ia kembali ke pengembalian HTML Anda yang tidak berubah daripada menghasilkan output yang berantakan atau kesalahan.
Privasi
Alat ini berjalan sepenuhnya di browser Anda. HTML Anda — termasuk tautan apa pun yang disematkan, piksel pelacakan, atau konten yang dipersonalisasi — tidak pernah diunggah ke server.