Kompres CSS (Minify)
Contoh kecil menyusut dari 98 menjadi 66 byte (32,7% lebih kecil) hanya dengan membuang komentar dan spasi: .card{display:flex;margin:0 auto}.card>.title:hover{color:#123456}
Cara memakai
- Tempel CSS Anda ke kotak input.
- Biarkan "Simpan komentar /*!" aktif jika file Anda punya header lisensi yang harus tetap ada. Matikan untuk membuang semua komentar.
- Lihat ukuran sebelum dan sesudah, lalu salin CSS yang sudah dikompres.
Cara menghitung
Alat ini hanya membuang hal yang tidak mungkin mengubah cara CSS dibaca: komentar, jeda baris, indentasi, serta spasi di sekitar { } ; , > dan setelah titik dua. Titik koma terakhir sebelum kurung kurawal penutup juga dibuang.
Alat ini tidak memendekkan warna, angka atau satuan, tidak menggabungkan aturan, dan tidak mengubah urutan atau nama apa pun. Misalnya 0px dan #ffffff tetap seperti semula. Batas ini disengaja agar hasilnya bisa ditebak dan aman, dengan konsekuensi penghematan sedikit lebih kecil dibanding pengoptimal penuh.
Spasi tetap dipertahankan di tempat yang bermakna: kombinator turunan sebelum :hover, spasi di antara nilai seperti margin: 0 auto, spasi di "and (min-width: 600px)", dan spasi di sekitar + dan - di dalam calc(). String berkutip, nilai url() tanpa kutip seperti data URI, dan escape disalin persis.
Alat ini memberi peringatan jika ada komentar, string atau url() yang tidak ditutup, dan kurung kurawal yang tidak seimbang. Hasil tetap dibuat, jadi periksa aslinya jika muncul peringatan.
Pertanyaan umum
Apakah tampilan halaman akan berubah?
Seharusnya tidak. Hanya spasi dan komentar yang dibuang, dan spasi tetap disimpan di tempat yang penting. Jika ada perbedaan, pakai yang asli dan periksa apakah ada kurung kurawal atau kutip yang hilang, yang akan muncul sebagai peringatan.
Kenapa penghematannya lebih kecil dari minifier lain?
Pengoptimal penuh juga menggabungkan aturan, memendekkan nilai, dan membuang kode yang tidak dipakai. Langkah-langkah itu bisa mengubah hasil pada kasus tertentu, jadi alat ini tidak melakukannya. Pada CSS yang ditulis tangan, spasi dan komentar biasanya menyumbang sebagian besar penghematan.
Bagaimana dengan komentar /*!?
Secara bawaan komentar yang diawali /*! disimpan, karena itu cara umum menandai pemberitahuan lisensi. Matikan opsinya untuk membuang komentar itu juga.
Bisakah hasilnya dipakai di produksi?
Bisa untuk CSS biasa, termasuk aturan bersarang dan custom property. Seperti alat apa pun, uji hasilnya di halaman Anda sebelum dirilis dan simpan file sumber yang mudah dibaca.
Apakah CSS saya diunggah?
Tidak. Semuanya berjalan di browser Anda.