Bagaimana cara meminifikasi CSS secara online tanpa menginstal apa pun?

Tempel CSS Anda ke Input CSS, atau letakkan file .css, lalu klik Minify CSS. Komentar dan spasi berlebih dihapus, dan Anda dapat Copy hasilnya atau Download sebagai styles.min.css.

Apakah minifier CSS mempertahankan komentar lisensi dan data URI?

Ya. Komentar biasa dibuang, tetapi komentar /*! license */ dipertahankan. String berkutip, nilai url(), dan data URI di-tokenisasi secara terpisah, sehingga aturan spasi tidak mengubahnya.

Bagaimana cara mengubah CSS yang diminifikasi kembali menjadi kode yang mudah dibaca?

Klik Beautify CSS sebagai ganti Minify CSS. Kode diberi indentasi ulang dengan dua spasi per tingkat, dan titik dua selektor seperti a:hover dibedakan dari titik dua properti. Download menyimpannya sebagai styles.css.

Apa arti angka gzipped di sebelah pengurangan?

Itu perkiraan ukuran keluaran setelah kompresi gzip, diukur dengan CompressionStream API browser. Jika browser Anda tidak memiliki API itu, ukuran gzipped tidak ditampilkan.

Apakah CSS saya dikirim ke server saat diminifikasi?

Tidak. Minifikasi dilakukan oleh tokenizer JavaScript yang berjalan di browser Anda, tanpa pustaka eksternal. Tidak ada yang diunggah, jadi Anda dapat memakainya untuk stylesheet pribadi.

Apakah benar-benar gratis?

Ya. Setiap alat gratis digunakan, tanpa akun dan tanpa kartu kredit. Prosesnya berjalan di perangkat Anda, bukan di server kami, itulah yang membuatnya tetap gratis.

Apakah berfungsi di mobile?

Ya. Berjalan di browser seluler terbaru di iOS dan Android, tanpa perlu memasang apa pun.

🗜️

Minifier & Beautifier CSS gratis

Minifikasi CSS untuk mengurangi ukuran file atau rapikan CSS yang sudah diminifikasi agar mudah dibaca. Instan, di browser Anda.

Berjalan di browser AndaTanpa daftar, tanpa pop-upTidak perlu loginGratis selamanya

Berfungsi offline setelah dimuat

atau lepaskan file .css di bawah

Lepaskan file .css di sini, atau klik untuk memilih

CSS · diproses di perangkat Anda

atau tekan Ctrl+V untuk menempel dari papan klip

Jelajahi file

Input CSS

Output CSS

Output akan muncul di sini…

Penggunaan umum

Minifikasi CSS untuk Penyebaran ProduksiKurangi ukuran file CSS sebelum penyebaran produksi - pemuatan halaman lebih cepat dan biaya bandwidth lebih rendah.
Perindah CSS yang Dikecilkan untuk DebuggingFormat CSS yang dikompresi atau dikecilkan ke kode yang dapat dibaca sehingga Anda dapat memeriksa dan men-debug gaya.
Minifikasi CSS untuk Template EmailKompak CSS untuk template email HTML di mana ukuran file dan pembengkakan gaya inline penting.
Minifikasi CSS untuk Tema WordPressKurangi ukuran lembar gaya tema WordPress kustom untuk skor PageSpeed yang lebih baik.
Perindah CSS untuk Tinjauan KodeFormat file CSS apa pun ke kode yang bersih, indentasi, dan dapat dibaca siap untuk ditinjau dan berkolaborasi.

Cara kerja

Alat ini menggunakan tokenizer CSS tulisan tangan tanpa dependensi yang dibangun sepenuhnya dalam JavaScript — tanpa library eksternal, tanpa panggilan server. Tokenizer mengklasifikasikan setiap karakter sebagai kode, komentar, string berkutip, atau nilai url() sebelum menerapkan transformasi apa pun, yang mencegah aturan spasi merusak isi string, data URI, atau ekspresi calc().

1
Tahap tokenisasi
CSS masukan dipindai karakter-demi-karakter dan dibagi menjadi token bertipe: segmen kode mentah, komentar /* ... */, string berkutip (mempertahankan urutan escape), dan blok url(...). Ini memastikan transformasi pada langkah berikutnya hanya menyentuh sintaks CSS sebenarnya — tidak pernah isi literal string atau data URI.
2
Minifikasi atau perapian
Dalam mode minify, komentar biasa dihapus (komentar /*! lisensi */ dipertahankan), rangkaian spasi dalam token kode diciutkan menjadi spasi tunggal, dan spasi yang berdekatan dengan tanda baca di sekitar { } : ; , > ~ dihapus. Spasi di sekitar + dan - sengaja dibiarkan untuk menghindari merusak ekspresi calc(). Dalam mode beautify, kode terlebih dahulu di-minify ke dasar yang bersih, lalu ditokenisasi ulang dan diindentasi ulang dengan pelacakan kedalaman dua-spasi dan deteksi titik-dua-deklarasi untuk membedakan titik dua property: value dari titik dua pemilih seperti a:hover.
3
Perkiraan ukuran gzip
Setelah menghasilkan keluaran, CompressionStream API native browser digunakan untuk mengompresi hasilnya dengan gzip dan mengukur jumlah byte yang dihasilkan. Ini memberikan perkiraan ukuran transfer realistis yang sesuai dengan yang akan dikirim server web dengan kompresi gzip melalui jaringan.
4
Salin atau unduh
CSS yang diproses ditulis ke clipboard via Clipboard API, atau diunduh sebagai styles.min.css (mode minify) atau styles.css (mode beautify) menggunakan Blob dengan tipe MIME text/css. Persentase pengurangan ukuran ditampilkan langsung saat Anda mengetik.

Alat terkait

✨

Optimizer & Minifier SVG

Hapus metadata, kecilkan spasi, dan bulatkan desimal untuk mengurangi ukuran file SVG secara dramatis — pengurangan tipikal 30-70%. Pratinjau visual memverifikasi tidak ada yang rusak.

CobaFile tetap lokal

🎨

Beautifier CSS

Rapikan CSS yang diminify dengan indentasi konsisten, atau minify CSS. Opsi pengurutan properti secara alfabetis untuk perbandingan perubahan yang lebih mudah diprediksi.

Coba

📋

Pemformat JSON

Format, validasi, perkecil, dan jelajahi data JSON. Tampilan struktur pohon, penyorotan sintaksis, dan penyalinan sekali klik.