Cara menggunakan CSS formatter
- Tempel CSS Anda ke kotak input: stylesheet yang sudah diminify, potongan dari developer tools, atau satu file utuh.
- Klik Rapikan untuk menaruh setiap deklarasi di barisnya sendiri dengan indentasi yang konsisten.
- Klik Minify untuk menghapus komentar dan spasi kosong; alat ini menunjukkan berapa byte yang Anda hemat.
- Salin outputnya ke proyek Anda.
Semua pemrosesan berlangsung di browser Anda, dan stylesheet Anda tidak pernah diunggah atau disimpan.
Mengapa memformat atau meminify CSS?
CSS (Cascading Style Sheets) menjelaskan bagaimana HTML ditampilkan. Stylesheet adalah daftar aturan, masing-masing terdiri dari sebuah selector dan blok deklarasi (property: value;). Browser mengabaikan sebagian besar spasi kosong, sehingga aturan yang sama bisa ditulis agar mudah dibaca atau dipadatkan menjadi satu baris.
Merapikan berguna saat Anda perlu membaca atau mengedit CSS yang datang dalam keadaan diminify, misalnya tema pihak ketiga atau stylesheet yang sedang Anda debug di situs yang sudah live. Meminify untuk produksi: menghapus komentar, pemisah baris, indentasi, dan titik koma terakhir di setiap blok membuat file lebih kecil, sehingga lebih cepat diunduh. Minifikasi melengkapi, bukan menggantikan, kompresi gzip atau Brotli di server.
Berikut aturan yang sama dalam dua bentuk:
.btn-primary:hover,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-primary:hover,
.btn-primary:focus {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}Error CSS yang umum dan cara memperbaikinya
Browser tidak berhenti saat menemui error CSS. Browser melewati deklarasi atau aturan yang tidak valid dan melanjutkan, itulah sebabnya salah ketik sering membuat hanya satu gaya yang "diam-diam" tidak diterapkan. CSS yang sudah dirapikan membuat masalah semacam ini jauh lebih mudah ditemukan.
Titik koma hilang. Deklarasi setelahnya terserap ke nilai sebelumnya dan keduanya menjadi tidak valid:
.title {
color: #222
margin-bottom: 1rem;
}Tambahkan titik koma setelah #222. Pada output yang sudah dirapikan, dua properti yang berakhir di baris logis yang sama adalah petunjuknya.
Kurung kurawal tidak seimbang. } yang hilang membuat aturan berikutnya menjadi bagian dari blok sebelumnya. Jika indentasi tiba-tiba naik satu level setelah pemformatan, cari kurung kurawal yang hilang tepat di atasnya.
Satuan hilang. Selain nol, panjang membutuhkan satuan: margin: 10; tidak valid, margin: 10px; benar. Nilai tanpa satuan hanya valid untuk properti yang menerima angka biasa, seperti line-height, opacity, atau z-index.
Selector tidak valid dalam daftar. Jika satu selector dalam daftar yang dipisahkan koma tidak valid, seluruh aturan dibuang. Ini sering terjadi pada pseudo-element khusus vendor:
/* Jika salah satu selector tidak didukung, tidak ada yang mendapat gaya */
input::-webkit-input-placeholder, input::-moz-placeholder { color: #888; }Tulis aturan terpisah, atau gunakan ::placeholder yang standar.
Apakah minifikasi aman?
Penghapusan spasi kosong aman dalam hampir semua kasus, tetapi ada beberapa detail yang penting:
| Situasi | Yang perlu diketahui |
|---|---|
calc() | Spasi di sekitar + dan - wajib ada. calc(100% - 2rem) berfungsi; calc(100%-2rem) tidak. Minifier yang benar mempertahankannya. |
| Komentar lisensi | Komentar yang diawali /*! secara konvensi dipertahankan oleh banyak minifier untuk lisensi. Periksa outputnya jika Anda mengandalkan hal ini. |
String dan content | Spasi di dalam string bertanda kutip adalah bagian dari nilai dan harus dipertahankan. |
| Hack | Hack browser lama yang bergantung pada sintaksis persis mungkin tidak bertahan setelah minifikasi. |
Tips dan praktik terbaik
- Simpan sumber yang mudah dibaca di version control dan hasilkan file yang diminify saat build, idealnya dengan source map untuk debugging.
- Kelompokkan deklarasi yang berkaitan secara konsisten (tata letak, box model, tipografi, visual) agar aturan mudah dipindai.
- Gunakan custom property CSS (
--brand: #0b5ed7;) alih-alih mengulang nilai warna. - Untuk blok
<style>inline di dalam markup, HTML Formatter mungkin lebih praktis.
Pertanyaan yang sering diajukan
Apakah meminify CSS mengubah tampilan situs saya?
Tidak. Minifier yang benar hanya menghapus karakter yang tidak dibutuhkan browser, seperti komentar dan spasi di luar string. Halaman yang dirender seharusnya identik.
Seberapa banyak ukuran CSS saya akan berkurang?
Tergantung cara file ditulis. Stylesheet dengan banyak komentar dan indentasi longgar menyusut lebih banyak daripada yang sudah ringkas. Alat ini menunjukkan ukuran persis sebelum dan sesudah untuk file Anda.
Bisakah saya membatalkan minify pada CSS?
Bisa, itulah yang dilakukan fitur merapikan. Indentasi dan pemisah baris dipulihkan, tetapi komentar yang dihapus saat minifikasi tidak dapat dikembalikan.
Apakah alat ini mendukung SCSS atau Less?
Alat ini dirancang untuk CSS biasa. SCSS sederhana sering terformat dengan baik, tetapi fitur seperti aturan bersarang dengan mixin atau operasi Less mungkin tidak ditangani dengan benar.
Diperbarui