Pengecil CSS
Contoh kecil mengecil daripada 98 kepada 66 bait (32.7% lebih kecil) dengan membuang komen dan ruang kosong sahaja: .card{display:flex;margin:0 auto}.card>.title:hover{color:#123456}
Cara guna
- Tampal CSS anda ke dalam kotak input.
- Biarkan "Kekalkan komen /*!" dihidupkan jika fail anda mempunyai pengepala lesen yang mesti kekal. Matikan untuk membuang semua komen.
- Baca saiz sebelum dan selepas, kemudian salin CSS yang telah dikecilkan.
Cara kiraan
Alat ini hanya membuang perkara yang tidak boleh mengubah cara CSS dibaca: komen, pemisah baris, inden, dan ruang di sekeliling { } ; , > serta selepas tanda titik bertindih. Koma bertitik terakhir sebelum pendakap penutup digugurkan.
Ia tidak memendekkan warna, nombor atau unit, tidak menggabungkan peraturan, tidak menyusun semula atau menamakan semula apa-apa. Contohnya 0px dan #ffffff kekal seperti asal. Itu had yang disengajakan: ia menjadikan output boleh diramal dan selamat, dengan harga penjimatan yang agak lebih kecil daripada pengoptimum penuh.
Ruang dikekalkan di mana-mana ia bermakna: gabungan keturunan dalam :hover, ruang antara nilai seperti margin: 0 auto, ruang dalam "and (min-width: 600px)", dan ruang di dalam calc() di sekeliling + dan -. Rentetan berpetik, nilai url() tanpa petik seperti URI data, dan jujukan escape disalin dengan tepat.
Alat ini memberi amaran tentang komen, rentetan atau url() yang tidak ditutup, dan tentang pendakap yang tidak seimbang. Ia tetap menghasilkan output, jadi semak yang asal apabila anda melihat amaran.
Soalan lazim
Adakah pengecilan akan mengubah rupa halaman saya?
Tidak sepatutnya. Hanya ruang kosong dan komen dibuang, dan ruang dikekalkan di mana-mana ia penting. Jika anda pernah melihat perbezaan, simpan yang asal dan semak input untuk pendakap atau petikan yang tertinggal, yang dilaporkan alat ini sebagai amaran.
Mengapa penjimatannya lebih kecil daripada pengecil lain?
Pengoptimum penuh turut menggabungkan peraturan, memendekkan nilai dan membuang kod yang tidak digunakan. Langkah itu boleh mengubah hasil dalam kes tertentu, jadi alat ini tidak melakukan satu pun. Ruang kosong dan komen biasanya merupakan sebahagian besar penjimatan dalam CSS yang ditulis tangan.
Apa jadi pada komen /*!?
Secara lalai komen yang bermula dengan /*! dikekalkan, kerana itulah cara biasa menandakan notis lesen. Matikan pilihan itu untuk membuangnya juga.
Bolehkah saya menggunakan outputnya dalam pengeluaran?
Boleh untuk CSS biasa, termasuk peraturan bersarang dan sifat tersuai. Seperti mana-mana alat, uji hasilnya pada halaman anda sebelum melancarkannya, dan simpan fail sumber yang boleh dibaca.
Adakah CSS saya dimuat naik?
Tidak. Semuanya berjalan dalam pelayar anda.