Cara menggunakan
- Tempel CSS ke kotak input, buka file .css, atau coba contohnya.
- Pilih Beautify untuk kode yang mudah dibaca atau Minify untuk output terkecil.
- Saat melakukan beautify, pilih 2 spasi, 4 spasi, atau tab.
- Salin hasilnya atau unduh sebagai file .css. Jika kurung kurawal atau tanda kutip tidak seimbang, error akan menampilkan baris dan kolom.
Cara kerja
Pemformat terlebih dahulu memecah stylesheet menjadi token: string dalam tanda kutip tunggal atau ganda, nilai url(…), komentar, kurung kurawal, dan titik koma. Karena string dan url() adalah token tunggal, titik koma di dalam data URI atau kurung kurawal di dalam content: "{ }" tidak akan membingungkan struktur, dan isinya disalin persis.
Beautify menempatkan setiap selector dari daftar selector pada barisnya sendiri, menambahkan spasi di sekitar kombinator child, sibling, dan adjacent (>, ~, +), dan menulis setiap deklarasi sebagai “property: value;” pada barisnya sendiri. Blok di dalam @media, @supports, @layer, @container, dan native CSS nesting diindentasi satu tingkat per kedalaman. Titik koma yang hilang setelah deklarasi terakhir sebuah blok akan ditambahkan. Komentar dibiarkan di tempatnya.
Minify menghapus komentar (kecuali pemberitahuan lisensi /*! … */), merapatkan whitespace, menghapus spasi di sekitar kurung kurawal, titik dua, titik koma, koma, dan kombinator selector, serta menghilangkan titik koma sebelum setiap kurung kurawal penutup. Spasi yang mengubah makna dipertahankan: kombinator descendant pada “.a .b”, spasi pada “a :focus”, dan spasi di dalam nilai seperti calc(100% - 2px). “! important” dinormalkan menjadi “!important”.
Alat ini tidak menulis ulang nilai: warna, unit, dan angka nol dibiarkan seperti tertulis, dan aturan tidak digabung atau diurutkan ulang. File SCSS atau Less dengan nesting biasa biasanya dapat diproses, tetapi sintaks khasnya seperti komentar // atau mixin tidak dikenali.
Contoh
Membaca file framework yang diminifikasi
Tempel potongan bootstrap.min.css satu baris lalu pilih Beautify dengan 2 spasi untuk melihat setiap aturan, media query, dan aturan bersarangnya pada baris terpisah dan terindentasi.
Mengirim stylesheet yang ditulis manual
Minify stylesheet 12 KB yang memiliki komentar dan indentasi sebelum menambahkannya secara inline ke template email atau head halaman. Ringkasan menampilkan jumlah karakter sebelum dan sesudah.
Menemukan kurung kurawal yang hilang
Sebuah stylesheet berhenti diterapkan di tengah jalan. Pemformat melaporkan “This { is never closed with a matching }” beserta baris aturan yang tidak memiliki kurung kurawal penutup.
Pertanyaan yang sering diajukan
Apakah CSS hasil minifikasi dari alat ini aman digunakan di produksi?
Alat ini hanya menghapus komentar dan spasi yang diabaikan oleh CSS, sehingga aturannya berperilaku sama. Alat ini tidak melakukan optimasi lebih dalam seperti alat build, misalnya menggabungkan aturan atau memendekkan warna, sehingga hasilnya bisa sedikit lebih besar daripada hasil alat build.
Mengapa spasi dipertahankan dalam “a :focus”?
Dalam selector, spasi adalah kombinator turunan. “a :focus” berarti elemen yang sedang fokus di dalam tautan, sedangkan “a:focus” berarti tautan yang sedang fokus. Menghapus spasi tersebut akan mengubah elemen yang cocok.
Bisakah alat ini memformat SCSS atau Less?
Aturan bersarang biasa diformat dengan benar. Sintaks khusus preprocessor seperti komentar //, mixin dengan argumen, atau blok @if tidak dipahami dan mungkin diformat tidak rapi, jadi periksa hasilnya.
Apakah komentar lisensi dihapus saat minifikasi?
Komentar yang dimulai dengan /*! dipertahankan, sesuai konvensi umum untuk pemberitahuan lisensi dan hak cipta. Semua komentar lain dihapus.
Privasi
CSS Anda hanya diproses di browser Anda. Tidak ada yang diunggah, disimpan, atau disertakan dalam analitik.