Monu Tools

CSS Formatter

Percantik CSS dengan indentasi bersih, atau minify untuk memperkecil ukuran berkas. Menangani media query, calc(), dan komentar lisensi.

Cara menggunakan CSS Formatter

  1. 01

    Tempel CSS Anda ke kotak masukan.

  2. 02

    Pilih Percantik untuk memformatnya atau Minify untuk memampatkannya.

  3. 03

    Pilih ukuran indentasi, lalu salin hasilnya.

Apa yang dilakukan pemformat CSS

Ini adalah pemformat CSS yang mempercantik lembar gaya dengan indentasi yang bersih dan konsisten, atau meminifikasinya untuk memperkecil ukuran berkas. Anda memilih ukuran indentasi untuk mempercantik, dan beralih ke minifikasi saat Anda menginginkan keluaran terkecil.

Kapan mempercantik dan kapan meminifikasi

CSS yang mudah dibaca lebih mudah dipindai, ditinjau, dan di-debug: ketika setiap aturan dan deklarasi diberi indentasi secara konsisten, Anda dapat melihat selektor, penyusunan bersarang, dan bentuk kueri media Anda sekilas.

Minifikasi ditujukan untuk produksi. Ini menghapus spasi dan komentar yang tidak dibutuhkan browser, sehingga berkas terunduh lebih cepat. Pada lembar gaya besar penghematan itu bertambah, terutama sebelum kompresi gzip di server.

Meminifikasi dengan hati-hati pada calc() dan kueri media

Peminifikasi berhati-hati di tempat yang penting. Ini mempertahankan spasi di sekitar plus dan minus di dalam calc(), sehingga calc(100% - 30px) tetap valid, dan hanya menghapus spasi di sekitar karakter struktural seperti kurung kurawal, titik dua, dan titik koma. Ini juga menangani kueri media bersarang dengan benar.

Komentar lisensi dipertahankan

Komentar lisensi yang ditulis dalam bentuk /*! ... */ dipertahankan, yang merupakan konvensi standar untuk menjaga pemberitahuan hak cipta dan lisensi dalam keluaran yang diminifikasi bahkan ketika komentar biasa dihapus.

Berjalan di browser Anda

Baik mempercantik maupun meminifikasi berjalan sepenuhnya di browser Anda, sehingga lembar gaya Anda tidak pernah meninggalkan perangkat Anda. Alat ini memformat untuk keterbacaan dan ukuran; alat ini tidak memvalidasi bahwa CSS Anda benar.

Pertanyaan yang sering diajukan

Apakah memminify merusak ekspresi calc()?

Tidak. Minifier menjaga spasi di sekitar plus dan minus dalam nilai, jadi calc(100% - 30px) tetap valid. Ia hanya menghapus spasi di sekitar karakter struktural seperti kurung kurawal, titik dua, dan titik koma.

Apakah komentar dihapus saat memminify?

Komentar biasa dihapus untuk menghemat ruang, tapi komentar lisensi yang ditulis sebagai /*! ... */ dipertahankan, yang merupakan konvensi standar untuk menjaga pemberitahuan hak cipta.

Apakah CSS saya diunggah ke mana pun?

Tidak. Baik percantik maupun minify berjalan sepenuhnya di peramban Anda, jadi stylesheet Anda tidak pernah keluar dari perangkat.

Sumber

Sematkan tool ini

Tambahkan tool ini ke situs web Anda sendiri. Salin cuplikan di bawah; cuplikan ini tetap terbarui secara otomatis.

<iframe src="https://monu.tools/embed/id/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Alat terkait