CSS Beautifier
Format ulang CSS yang dimampatkan atau berantakan dengan indentasi yang rapi.
What is CSS Beautifier?
CSS Beautifier mengambil CSS yang dimampatkan, dikompresi, atau diformat secara tidak konsisten dan mengubahnya dengan indentasi yang bersih dan konsisten — satu blok selector per bagian, satu deklarasi per baris, aturan bersarang (seperti kueri media) diindentasi satu level lebih dalam untuk setiap level bersarang. Ini dibangun dengan mesin keadaan kecil yang melacak komentar dan nilai string yang dikutip, sehingga `{` atau `;` yang muncul di dalam komentar atau di dalam string yang dikutip (seperti `content: "a { b"`) tidak pernah salah dianggap sebagai struktur CSS yang sebenarnya dan dibiarkan persis seperti yang Anda tulis. Ini membuatnya aman untuk dijalankan pada CSS yang Anda ambil dari bundle produksi yang dimampatkan ketika Anda perlu benar-benar membaca apa yang dilakukan oleh suatu aturan, atau sebelum menempelkan potongan kode ke dalam dokumentasi atau tinjauan kode.
How to Use CSS Beautifier
- Tempelkan CSS Anda — dimampatkan atau berantakan — ke dalam kotak input.
- Versi yang diformat muncul secara instan di bawah, dengan indentasi 2 spasi yang konsisten per level bersarang.
- Salin hasil yang diformat dengan tombol salin.
Examples
Aturan yang dimampatkan
Input: .a{color:red;background:#fff;}
Output: .a { color:red; background:#fff; }
Kueri media yang bersarang
Input: @media (max-width: 600px){.a{color:red;}}
Output: @media (max-width: 600px) { .a { color: red; } }
Common Mistakes
- Menjalankan ini pada CSS yang tidak valid secara nyata dan berharap itu akan diperbaiki — alat pemformat hanya merestrukturisasi struktur, tidak memperbaiki sintaks yang rusak.
- Mengharapkan nilai properti itu sendiri akan diformat ulang (misalnya, shorthand warna diperluas) — alat ini hanya menangani indentasi dan jeda baris, bukan normalisasi nilai.
- Menempelkan CSS dengan kurung yang tidak cocok dan bingung dengan kesalahan — periksa apakah ada `}` yang hilang di akhir aturan, atau yang tambahan disalin secara tidak sengaja.
- Menganggap output yang diperindah berarti siap produksi — Anda biasanya ingin meminifikasi lagi sebelum pengiriman; lihat alat CSS Minifier.
Why Use This Tool
- Diproses sepenuhnya di sisi klien — CSS Anda tidak pernah meninggalkan browser Anda.
- Komentar dan konten literal string dilindungi dari disalahartikan sebagai sintaks struktural.
- Mengindentasi aturan bersarang seperti kueri media dengan benar.
- Pemformatan instan, langsung tanpa tombol kirim.