CSS Formatter
Percantik CSS dengan indentasi bersih, atau minify untuk memperkecil ukuran berkas. Menangani media query, calc(), dan komentar lisensi.
Cara menggunakan CSS Formatter
- 01
Tempel CSS Anda ke kotak masukan.
- 02
Pilih Percantik untuk memformatnya atau Minify untuk memampatkannya.
- 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.