CSS Minifier
Shrink CSS for production instantly
CSS Asli
Opsi
CSS yang Diminify
Ikhtisar
CSS Minifier menghapus komentar dan mengompresi whitespace dari stylesheet Anda untuk mengurangi ukuran file untuk produksi — unduhan lebih kecil, parsing dan rendering lebih cepat. Tempel CSS yang terbaca dan dapatkan output ringkas secara instan, dengan perbandingan ukuran sebelum/sesudah secara langsung dan tingkat kompresi yang dapat disesuaikan.
Yang Dikontrol Minifier Ini
- •Kompresi whitespace: minifier yang sadar kutipan dan komentar menghapus spasi, baris baru, dan baris kosong sambil membiarkan konten string tidak tersentuh
- •Penghapusan komentar: hapus komentar /* ... */, atau pertahankan — misalnya untuk menjaga header lisensi — melalui toggle preservasi komentar
- •Optimisasi warna: memperpendek warna hex 6 digit dan nilai rgb() menjadi singkatan hex 3 digit bila memungkinkan
- •Tingkat kompresi: mode Normal melakukan minifikasi whitespace, komentar, dan warna yang aman; mode Aggressive juga menghapus angka nol awal yang berlebihan (0.5px → .5px) dan menghapus digit dari panjang bernilai nol (0px → 0)
- •Perbandingan ukuran: lihat ukuran asli, ukuran hasil minifikasi, dan persentase pengurangan berdampingan
- •Output yang dapat diunduh: simpan hasil minifikasi langsung sebagai file .css
Kapan Anda Meminifikasi CSS
- •Memperkecil stylesheet sebelum menerapkannya ke produksi untuk mengurangi waktu muat halaman
- •Menyiapkan cuplikan CSS kecil untuk disematkan inline dalam tag <style> atau email HTML tanpa membuatnya membengkak
- •Memeriksa dengan cepat seberapa banyak stylesheet akan mengecil sebelum menyiapkan pipeline PostCSS atau build lengkap
- •Meminifikasi stylesheet satu kali untuk CodePen, gist, atau prototipe statis di mana langkah build tidak praktis
- •Membandingkan ukuran hasil minifikasi dengan anggaran performa untuk audit Core Web Vitals atau Lighthouse
Cara Meminifikasi CSS
- 1.Tempel CSS Anda ke editor input, atau unggah file .css
- 2.Pilih kompresi Normal atau Aggressive, dan tentukan apakah akan mempertahankan komentar
- 3.Output hasil minifikasi dan persentase pengurangan ukuran muncul secara otomatis
- 4.Salin output atau unduh sebagai file .css
- 5.Periksa jumlah byte sebelum/sesudah untuk mengonfirmasi penghematan ukuran sebelum deploy
Kasus Khusus yang Perlu Diketahui
- •Penghapusan angka nol agresif (0px → 0) aman untuk unit panjang, tetapi melewati konten string dan komentar serta membiarkan perhitungan di dalam ekspresi calc() tidak tersentuh
- •Whitespace di dalam string yang dikutip — nama font-family, content: "...", path url() — selalu dipertahankan persis; hanya whitespace struktural di luar string dan komentar yang dihapus
- •Minifier ini tidak mengganti nama kelas, menggabungkan selector duplikat, atau menghapus aturan yang tidak terpakai — itu memerlukan optimizer terintegrasi build-tool seperti cssnano atau PurgeCSS
Keterbatasan
- •Ini adalah minifikasi whitespace, komentar, dan warna, bukan optimisasi penuh — untuk pengurangan ukuran maksimal (penggabungan selector, penghapusan aturan duplikat, penghapusan CSS yang tidak terpakai), gunakan minifier terintegrasi build-tool seperti cssnano atau PurgeCSS
- •Output hasil minifikasi kehilangan semua keterbacaan — selalu simpan sumber asli Anda di bawah kontrol versi
- •Stylesheet yang sangat besar mungkin lambat diproses sepenuhnya di browser — untuk pipeline build produksi, integrasikan minifikasi ke dalam PostCSS atau bundler Anda alih-alih alat browser satu kali
Perlu Arah Sebaliknya?
Jika Anda memiliki CSS yang diminifikasi atau dikompresi dan perlu membaca atau men-debug-nya, gunakan CSS Beautifier. Alat ini memulihkan indentasi, properti yang terurut, dan spasi yang konsisten sehingga stylesheet benar-benar terbaca.
