CSS Beautifier

CSS Beautifier memformat ulang stylesheet yang diminifikasi, dikompresi, atau berindentasi tidak konsisten menjadi CSS yang bersih dan mudah dibaca — indentasi yang konsisten, properti yang terurut, dan spasi yang jelas antar aturan — sehingga Anda benar-benar bisa membaca, meninjau, dan mengeditnya. Tempel stylesheet yang diminifikasi, file CSS bundel, atau CSS tulisan tangan yang berantakan, dan dapatkan output yang diformat secara instan.

• •Indentasi: 2 spasi, 4 spasi, atau tab, diterapkan melalui mesin pemformatan js-beautify yang sesungguhnya
• •Pengurutan properti: mengurutkan deklarasi secara alfabetis dalam setiap blok aturan untuk gaya yang konsisten dan mudah dipindai
• •Pengurutan media query: mengurutkan blok @media tingkat atas berdasarkan breakpoint, menaik untuk min-width dan menurun untuk max-width
• •Spasi aturan: menambahkan baris kosong di antara aturan untuk pemisahan visual, atau membuat output tetap rapat
• •Preservasi komentar: pertahankan atau hapus komentar /* ... */ selama pemformatan
• •Normalisasi warna: memperpendek warna hex 6 digit dan nilai rgb() menjadi singkatan hex 3 digit bila memungkinkan

• •Membaca stylesheet produksi yang diminifikasi untuk men-debug masalah tata letak di DevTools browser
• •Memformat ulang CSS yang ditempel dari pesan chat, PDF, atau email yang kehilangan indentasi aslinya
• •Menstandardisasi urutan properti dan indentasi sebelum code review
• •Membuat stylesheet bundel atau hasil generate — dari build CSS-in-JS atau output preprocessor — cukup terbaca untuk diaudit
• •Membersihkan CSS yang diekspor dari alat desain sebelum melakukan commit

1. 1.Tempel CSS Anda ke editor input, atau unggah file .css
2. 2.Pilih indentasi — 2 spasi, 4 spasi, atau tab
3. 3.Aktifkan preservasi komentar, pengurutan properti, pengurutan media query, spasi aturan, dan normalisasi warna sesuai kebutuhan
4. 4.Output yang diformat muncul secara otomatis saat Anda mengetik
5. 5.Salin output atau unduh sebagai file .css

• •Mengurutkan properti secara alfabetis dapat memisahkan deklarasi yang secara logis berhubungan, seperti margin dan margin-top — tinjau output yang terurut sebelum mengadopsinya sebagai aturan gaya yang ketat
• •Properti dengan vendor prefix (-webkit-, -moz-) terurut bersama padanannya tanpa prefix, yang dapat menempatkan fallback berprefix setelah properti standar
• •Pemeriksa kurung kurawal menandai { dan } yang tidak cocok saat Anda mengetik, tetapi ini adalah pemindaian heuristik, bukan parser CSS lengkap — tidak akan menangkap semua jenis sintaks tidak valid

• •Ini adalah alat pemformatan, bukan linter — tidak akan menangkap nama properti yang tidak valid, kesenjangan kompatibilitas browser, atau konflik spesifisitas selector
• •Stylesheet yang sangat besar (bundel multi-MB) mungkin lambat untuk di-beautify di browser — formatter terintegrasi build-tool (Prettier, Stylelint --fix) lebih cocok untuk pemformatan codebase skala besar
• •Untuk menegakkan gaya CSS yang konsisten di seluruh tim, alat khusus seperti Stylelint atau Prettier yang terintegrasi di editor/CI lebih tepat daripada pemformatan browser ad hoc

Jika Anda memiliki CSS yang terbaca dan perlu memperkecilnya untuk produksi — mengurangi ukuran file dan waktu muat halaman — gunakan CSS Minifier. Alat ini mengompresi whitespace, memperpendek warna, dan dapat menghapus angka nol yang berlebihan untuk kompresi maksimal.