Peminifikasi CSS

Cara menggunakan

1. Tempelkan CSS Anda, buka file .css, atau mulai dari contoh.
2. CSS yang diminifikasi muncul saat Anda mengetik, dengan ukuran sebelum dan sesudahnya.
3. Salin atau unduh sebagai styles.min.css.

Fungsinya

Peminifikasi CSS menggunakan CSSO, yang lebih dari sekadar menghapus spasi dan komentar:

• Mempersingkat nilai: #ff0000 menjadi red, 0px menjadi 0, dan padding: 0 16px 0 16px menjadi padding: 0 16px.
• Menggabungkan aturan dengan selektor yang sama, dan selektor dengan deklarasi yang sama.
• Menghapus deklarasi yang ditimpa deklarasi berikutnya dalam aturan yang sama.

Alat ini hanya membuat perubahan yang menjaga arti stylesheet, sehingga tampilan halaman tetap sama.

Apakah sepadan?

Stylesheet memblokir tampilan halaman sampai selesai dimuat, sehingga CSS yang lebih kecil berarti tampilan pertama lebih cepat. Minifikasi biasanya menghemat 5 hingga 15% lagi di atas kompresi gzip atau Brotli dari host Anda, lebih banyak jika stylesheet memiliki banyak komentar. Jika Anda memakai alat build seperti Vite, CSS sudah diminifikasi untuk produksi; halaman ini untuk stylesheet yang Anda tulis dan rilis secara manual.

Pertanyaan umum

Bisakah minifikasi merusak CSS saya?

Perubahan CSSO menjaga arti CSS yang valid. Hack yang mengandalkan sintaks tidak valid untuk browser lama mungkin tidak bertahan. Simpan versi yang mudah dibaca sebagai sumber dan minifikasi salinannya.

Apakah alat ini menghapus CSS yang tidak terpakai?

Tidak: alat ini tidak dapat melihat selektor yang dipakai halaman Anda. Alat seperti PurgeCSS melakukannya saat build.

Bagaimana cara mendapatkan kembali versi yang mudah dibaca?

Simpan yang asli. Pemformat CSS mengindentasi ulang CSS yang diminifikasi, tetapi komentar hilang selamanya.

Apakah CSS saya diunggah?

Tidak. CSS diminifikasi di browser Anda.