CSS Minifier

Tempel stylesheet untuk menghapus spasi dan komentar, mempersingkat nilai seperti #ff0000 → red, dan menggabungkan rule duplikat dengan optimasi struktural CSSO.

Berjalan di browser AndaTanpa daftarTidak ada yang diunggah

Output terminifikasi

Cara menggunakan CSS Minifier

  1. Tempel CSS atau buka file .css.
  2. Biarkan Restrukturisasi aktif untuk menggabungkan rule dan deklarasi, atau matikan untuk proses aman yang hanya menghapus spasi.
  3. Biarkan Pertahankan komentar lisensi aktif untuk menyimpan catatan /*! … */.
  4. Bandingkan ukuran asli, terminifikasi, dan setelah gzip.
  5. Salin hasilnya atau unduh output.min.css.

Cara kerja minifikasi CSS

Tool ini memakai CSSO (CSS Optimizer), yang mem-parsing stylesheet Anda menjadi syntax tree lalu mencetaknya kembali dalam bentuk setara yang paling pendek. Selain menghapus spasi dan komentar, CSSO menerapkan penulisan ulang nilai yang aman:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Rule kosong dan deklarasi duplikat dibuang

Apa fungsi “restrukturisasi”?

Restrukturisasi memeriksa seluruh stylesheet: rule dengan deklarasi identik digabung menjadi satu daftar selector (.a,.b{color:red}), dan selector yang berulang dikombinasikan. Ini sering menghemat 5–15% lagi pada stylesheet nyata. CSSO hanya menggabungkan jika urutan cascade tetap sama, tetapi jika Anda mengandalkan override yang tidak biasa, Anda bisa mematikannya untuk minifikasi yang murni sintaksis.

Mengapa perlu minify CSS?

CSS memblokir rendering: browser tidak bisa menggambar halaman sampai stylesheet di <head> selesai diunduh dan di-parsing. CSS yang lebih kecil berarti First Contentful Paint lebih cepat dan Core Web Vitals lebih baik, yang membantu pengguna sekaligus peringkat pencarian. Kombinasikan minifikasi dengan gzip atau Brotli di server untuk hasil terbaik.

Pertanyaan yang sering diajukan

Apakah aman melakukan minify CSS?
Ya. Spasi dan komentar tidak memengaruhi cara CSS dirender, dan penulisan ulang nilai oleh CSSO setara menurut spesifikasi. Restrukturisasi menjaga urutan cascade; matikan jika Anda menginginkan output yang paling konservatif.
Apakah mendukung CSS modern seperti custom property, nesting, dan @layer?
Ya. Custom property (--var), @media, @supports, @layer, @container, dan sintaks grid dipertahankan.
Bisakah CSS yang sudah di-minify dikembalikan?
CSS terminifikasi bisa diindentasi ulang dengan formatter apa pun, tetapi komentar yang dihapus tidak bisa dipulihkan. Simpan file sumber asli Anda dan perlakukan file terminifikasi sebagai hasil build.
Apakah stylesheet saya diunggah ke suatu tempat?
Tidak. Minifikasi berjalan di browser Anda; tidak ada yang dikirim ke server.

Tools terkait

JavaScript Minifier Kompres dan mangle JS dengan Terser, lengkap dengan statistik ukuran dan gzip. HTML Minifier Hapus komentar dan spasi, serta minify CSS/JS inline. SQL Formatter Rapikan atau minify SQL untuk PostgreSQL, MySQL, T-SQL, BigQuery, dan lainnya. JSON Formatter Rapikan, minify, dan validasi JSON dengan error per baris/kolom.