Mengirim snippet CSS inline secara one-off di email HTML atau template blog post, di mana kamu ingin byte-nya mengecil tapi tidak punya build chain. Cek cepat berapa banyak "lemak" di sebuah stylesheet sebelum memutuskan apakah optimizer sungguhan layak dipasang. Menempelkan CSS pretty-printed dari vendor untuk diramping demi dimasukkan ke third-party widget.

Menghapus block comment ( /* … */ ) — single-line // toh bukan plain CSS yang valid. Mengciutkan whitespace di sekitar { } : ; , dan combinator ( > ~ + ). Membuang trailing semicolon sebelum } . Memotong leading zero ( 0.5 → .5 ) dan menghapus unit dari nol ( 0px → 0 ). Memendekkan hex color jika persis sama ( #aabbcc → #abc ).

Ini structural minify, bukan optimizer penuh. Tool ini tidak menggabungkan selector duplikat, mengubah urutan rule, atau menulis ulang shorthand. Untuk itu, jalankan cssnano atau esbuild di build pipeline kamu. Source map tidak dihasilkan. Jika kamu mendebug CSS minified di production, kirim mereka secara terpisah. Jangan minify CSS yang kamu commit. Commit source yang pretty; minify saat build/deploy. Mencampur keduanya membuat review diff jadi menderita. Kompresi modern dominan. Brotli/gzip di wire melakukan sebagian besar pekerjaan minification. Penghematan terbesar datang dari menghapus rule yang tidak terpakai — itu pekerjaan tree-shaking, bukan minification.

CSS Minifier

Strip komentar, whitespace, dan redundansi dari CSS. Lihat ukuran sebelum/sesudah dan persen penghematan.

Input

Output

Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi

Untuk apa ini?

CSS yang readable di source — dengan comment, indentasi, dan whitespace yang bermakna — membengkakkan file yang diunduh user kamu. Structural minifier menghilangkan semua byte kosmetik (comment, deretan whitespace, nol redundan, hex code yang setara tapi lebih pendek) tanpa mengubah arti rule-nya. Tool ini menjalankan pass tersebut di browser kamu dan menampilkan ukuran sebelum/sesudah supaya kamu bisa melihat penghematannya.

Kapan digunakan

Mengirim snippet CSS inline secara one-off di email HTML atau template blog post, di mana kamu ingin byte-nya mengecil tapi tidak punya build chain.
Cek cepat berapa banyak "lemak" di sebuah stylesheet sebelum memutuskan apakah optimizer sungguhan layak dipasang.
Menempelkan CSS pretty-printed dari vendor untuk diramping demi dimasukkan ke third-party widget.

Apa yang dilakukan

Menghapus block comment (/* … */) — single-line // toh bukan plain CSS yang valid.
Mengciutkan whitespace di sekitar { } : ; , dan combinator (> ~ +).
Membuang trailing semicolon sebelum }.
Memotong leading zero (0.5 → .5) dan menghapus unit dari nol (0px → 0).
Memendekkan hex color jika persis sama (#aabbcc → #abc).

Kesalahan umum

Ini structural minify, bukan optimizer penuh. Tool ini tidak menggabungkan selector duplikat, mengubah urutan rule, atau menulis ulang shorthand. Untuk itu, jalankan cssnano atau esbuild di build pipeline kamu.
Source map tidak dihasilkan. Jika kamu mendebug CSS minified di production, kirim mereka secara terpisah.
Jangan minify CSS yang kamu commit. Commit source yang pretty; minify saat build/deploy. Mencampur keduanya membuat review diff jadi menderita.
Kompresi modern dominan. Brotli/gzip di wire melakukan sebagian besar pekerjaan minification. Penghematan terbesar datang dari menghapus rule yang tidak terpakai — itu pekerjaan tree-shaking, bukan minification.