Minify dan rapikan CSS
Tempel stylesheet untuk memperkecilnya untuk produksi atau menatanya agar mudah dibaca, dan lihat berapa byte yang Anda hemat.
Berjalan sepenuhnya di browser Anda
- Input
- 0
- Output
- 0
- Perubahan
- 0%
Input hingga sekitar 10 MB. Alat ini hanya menghapus spasi kosong dan komentar; tidak menggabungkan aturan, menulis ulang nilai, atau menghapus CSS yang tidak terpakai.
Cara minify atau merapikan CSS
- Tempel CSS Anda ke kotak, atau tekan Sisipkan contoh.
- Pilih Minify untuk memadatkannya, atau Rapikan untuk menatanya dengan indentasi Anda. Centang atau hapus centang opsi komentar lisensi saat melakukan minify.
- Periksa ukuran yang dihemat, lalu salin hasilnya atau unduh sebagai file
.css.
Minify CSS tanpa merusaknya
Minify stylesheet berarti menghapus semua yang diabaikan browser: komentar, indentasi, jeda baris, dan spasi di sekitar tanda baca. File yang lebih kecil lebih cepat diunduh dan diurai, dan untuk stylesheet besar penghematannya sering mencapai seperempat hingga setengah ukurannya sebelum kompresi. Aturan dan urutannya tetap persis seperti tertulis.
Bagian yang sulit adalah mengetahui spasi mana yang diabaikan browser. Spasi di antara dua selector, seperti pada nav a, adalah combinator yang berarti "turunan mana pun", jadi nav a dan nava adalah dua hal yang berbeda. Di dalam calc(1rem + 2px), spasi di sekitar + wajib ada, dan calc(1rem+2px) tidak valid. Teks di dalam tanda kutip dan di dalam url() adalah data, bukan sintaks. Minifier yang dibangun dari ekspresi reguler sering salah pada salah satu hal ini; CSS minifier ini membaca stylesheet sebagai rangkaian token dan hanya menghapus spasi kosong di tempat yang menurut tata bahasanya opsional.
Merapikan adalah arah sebaliknya: satu deklarasi per baris, terindentasi di dalam kurung kurawal, sehingga file hasil minify dari CDN menjadi sesuatu yang bisa Anda baca dan bandingkan.
Tips
- Merapikan seluruh halaman, bukan hanya stylesheet-nya? Gunakan Format dan rapikan HTML.
- Memilih warna untuk stylesheet? Konverter warna dan kontras mengubah hex menjadi RGB, HSL, dan lainnya.
- Periksa apa yang sebenarnya diubah oleh minify dengan membandingkan kedua versi di Bandingkan teks.
Pertanyaan umum
Apakah CSS saya diunggah?
Tidak. Minify berjalan di browser Anda, dan pustaka perapi dimuat dari situs ini hanya jika Anda memilih Rapikan. Stylesheet Anda tidak pernah dikirim ke mana pun.
Apa persisnya yang diubah oleh Minify?
Minify menghapus komentar dan spasi kosong di sekitar kurung kurawal, titik koma, koma dan combinator (>, ~, +), dan membuang titik koma terakhir di setiap blok. Spasi tetap dipertahankan di a b (descendant combinator), di and (min-width: ...) dan di sekitar + dan - di dalam calc(), clamp(), min() dan max(), karena menghapusnya akan merusak nilai.
Apakah string dan url() ikut diubah?
Tidak. Apa pun di dalam tanda kutip, termasuk teks yang tampak seperti komentar atau kurung kurawal, serta isi url() disalin karakter demi karakter.
Apakah warna atau angka dipersingkat?
Tidak. Nilai seperti #336699, 0.5em dan 0px dibiarkan seperti tertulis. Penulisan ulang seperti itu hanya menghemat sedikit dan membawa risiko, jadi hanya spasi kosong dan komentar yang dihapus.
Bagaimana saya tahu CSS hasil minify aman?
Setiap kali dijalankan, halaman ini mengurai CSS asli Anda dan hasilnya dengan parser CSS bawaan browser, lalu membandingkan apa yang dibacanya. Jika berbeda, pemberitahuan muncul di atas hasil. Jika cocok, berarti browser melihat aturan yang sama.
Apa itu komentar lisensi?
Komentar yang diawali /*! lazimnya dipertahankan oleh minifier karena berisi teks hak cipta atau lisensi yang mungkin wajib Anda pertahankan menurut lisensinya. Matikan opsi ini untuk ikut menghapusnya.