CSS Formatter dan Minifier

Cara memformat atau minify CSS

1. Tempel stylesheet Anda, atau klik Buka file untuk memuat file .css (hingga 10 MB).
2. Pilih Indentasi (2 spasi, 4 spasi, atau tab) dan apakah Anda menginginkan Baris kosong antar-aturan.
3. Klik Format (rapikan) untuk mendapatkan kode yang mudah dibaca, atau Minify untuk mendapatkan versi terkecil.
4. Untuk minify, biarkan Gabungkan aturan saat minify tercentang agar hasilnya optimal, dan Pertahankan komentar /*! */ tercentang untuk menjaga header lisensi.
5. Salin atau unduh hasilnya. Baris status menampilkan ukuran sebelum dan sesudah, dalam byte, serta persentase yang dihemat.

Jika ada kurung kurawal yang hilang, alat ini berhenti dan memberi tahu Anda di baris mana { yang tidak ditutup atau } yang berlebih berada, alih-alih menghasilkan kode yang rusak.

Rapikan: CSS yang mudah dibaca dan konsisten

Format (rapikan) memakai js-beautify, formatter yang ada di banyak editor kode. Setiap deklarasi ditaruh di barisnya sendiri, isi setiap aturan dan at-rule seperti @media dan @supports diberi indentasi, setiap selector dalam satu grup ditulis di barisnya sendiri, dan spasi ditambahkan setelah titik dua pada setiap deklarasi. Baris kosong yang sudah ada dipertahankan (paling banyak satu berturut-turut), sehingga bagian-bagian logis file Anda tetap terlihat. Formatter tidak pernah mengubah nilai, urutan aturan, atau makna selector: yang berubah hanya spasi.

Ini berguna untuk membaca CSS yang sudah di-minify dari sebuah situs web, meninjau stylesheet yang dihasilkan alat lain, atau merapikan file yang diedit oleh beberapa orang dengan kebiasaan berbeda.

Minify: CSS lebih kecil dengan csso

Minify memakai csso (CSS Optimizer), minifier struktural. Selain menghapus spasi dan komentar, csso menulis ulang stylesheet menjadi bentuk yang setara tetapi lebih pendek:

• warna dipersingkat (#ff0000 menjadi red, #ffffff menjadi #fff);
• satuan dan angka nol disederhanakan (0px menjadi 0, 0.5em menjadi .5em);
• deklarasi ganda dihapus dan properti shorthand digabung jika aman;
• dengan Gabungkan aturan saat minify, aturan dengan deklarasi identik dikelompokkan (a{color:red} b{color:red} menjadi a,b{color:red}) dan deklarasi yang tertimpa dibuang.

Restrukturisasi aman untuk stylesheet biasa, tetapi memindahkan deklarasi. Jika CSS Anda bergantung pada urutan cascade yang sangat spesifik, misalnya hack browser, hapus centang opsi ini: csso kemudian hanya akan memadatkan setiap aturan di tempatnya.

Komentar dihapus, kecuali komentar “penting” yang diawali /*!, yang biasa dipakai untuk lisensi. Hapus centang Pertahankan komentar /*! */ untuk ikut menghapusnya.

Ukuran sebelum dan sesudah

Baris status membandingkan ukuran masukan dan hasil dalam byte UTF-8. Kode yang dirapikan biasanya lebih besar daripada aslinya; kode yang di-minify umumnya menghemat 20 hingga 50% pada CSS yang ditulis manual. Ingat bahwa server juga mengompres file dengan gzip atau Brotli, sehingga penghematan saat transfer lebih kecil daripada angka mentahnya, tetapi minify tetap mengurangi waktu parsing dan ukuran file di cache.