Penghias/Formatter CSS Online

Merapikan CSS yang Berantakan

Kode CSS sering kali ditulis dalam satu baris panjang atau dengan spasi tidak konsisten. Alat ini membantu Anda mengubahnya menjadi format yang mudah dibaca. Misalnya, input:

body{color:red;margin:0;}

Setelah mode Beautify dengan indentasi dua spasi, hasilnya menjadi:

body {
  color: red;
  margin: 0;
}

Mode Beautify memecah teks di sekitar kurung kurawal dan titik koma, lalu memberi indentasi sesuai kedalaman blok. Urutan deklarasi tetap dipertahankan.

Memperkecil Ukuran dengan Minify

Mode Minify menghapus komentar blok, memadatkan spasi di sekitar kurung kurawal, titik dua, titik koma, dan koma, serta menghapus titik koma sebelum kurung tutup. Contoh input:

/* komentar */
body {
  color: red;
  margin: 0;
}

Hasil minify:

body{color:red;margin:0}

Perhatikan bahwa titik koma terakhir dihilangkan. Alat ini tidak menghitung ukuran gzip dan tidak membuat source map.

Batasan dan Catatan Penting

Alat ini adalah pemformat teks ringan, bukan parser CSS lengkap. Jangan menggunakannya untuk memvalidasi CSS. String kompleks, nilai properti kustom, URL data, komentar yang digunakan sebagai direktif, atau CSS yang salah sintaks dapat menghasilkan keluaran yang tidak sesuai. Selalu periksa hasil di peramban atau pipeline build Anda.

Pemrosesan dilakukan sepenuhnya di peramban; tidak ada file yang diunggah ke server. Alat ini tidak mengurutkan properti, tidak menambahkan prefiks vendor, tidak menguji kompatibilitas, tidak memperbaiki selektor, dan tidak menjamin bahwa hasil minify selalu setara secara semantik untuk setiap kasus tepi.

Pertanyaan yang Sering Diajukan

Apakah alat ini dapat memperbaiki CSS yang salah?

Tidak. Alat ini hanya memformat ulang teks. Jika CSS Anda memiliki kesalahan sintaks, hasilnya mungkin tetap salah atau bahkan berubah makna. Gunakan validator CSS untuk memeriksa kesalahan.

Bagaimana cara menangani komentar dalam mode minify?

Mode minify menghapus komentar blok (/* ... */). Jika Anda memiliki komentar yang berisi direktif penting, sebaiknya jangan gunakan mode minify, atau pastikan komentar tersebut tidak diperlukan.

Apakah ada batasan panjang input?

Ya, satu input dibatasi hingga 500.000 karakter. Jika kode Anda lebih panjang, bagi menjadi beberapa bagian.

Praktik Terbaik

• Selalu simpan salinan kode asli sebelum memformat.
• Periksa hasil beautify untuk memastikan struktur kurung kurawal seimbang.
• Untuk produksi, gunakan minifier yang lebih canggih yang dapat menangani edge case.