Softonic

CSS Minifier

Langkah 1 / 3
Berikutnya

File CSS yang ter-minify dimuat jauh lebih cepat daripada versi yang dirapikan, dan perbedaannya berlipat ganda di setiap load halaman. Minifier ini menghapus whitespace, komentar, dan titik koma trailing, tanpa mengubah cascade atau efek aturan mana pun. Output selalu CSS valid yang diparse browser secara identik dengan aslinya.

Cara minify CSS

  1. 1

    Tempel CSS

    CSS apa pun: ditulis tangan, dikompilasi Sass, blok style inline.

  2. 2

    Minify

    Tekan "Minify CSS" untuk menghapus komentar, whitespace, dan titik koma trailing dalam satu langkah.

  3. 3

    Cek penghematan

    Penghematan byte ditampilkan di samping output yang terkompresi.

  4. 4

    Salin hasilnya

    Salin CSS yang ter-minify ke bundel produksi Anda atau simpan sebagai `.min.css`.

Apa yang dilakukan minifier

Transformasi (tidak pernah mengubah perilaku):

  • Hapus komentar (semuanya, termasuk blok /*! lisensi).
  • Hapus whitespace yang tidak perlu (antar selector, deklarasi, brace).
  • Hapus titik koma trailing sebelum brace penutup.
  • Runtuhkan aturan multi-baris ke satu baris.

Hanya itu yang dilakukannya, dan itulah mengapa output berperilaku persis seperti aslinya: setiap selector, properti, dan nilai tetap seperti yang Anda tulis.

Penghematan tipikal

Sumber Ukuran asli Ukuran minified Penghematan
CSS tulisan tangan yang dirapikan 20 KB 12 KB 40%
Hasil kompilasi Sass, mode pengembangan 45 KB 25 KB 44%
Sudah diminifikasi + gzip 10 KB 10 KB 0%

Di atas minifikasi, kompresi gzip di server menambah penghematan 60-80% lagi karena CSS sangat redundan. Keduanya bertumpuk; selalu lakukan keduanya.

Apa yang tidak dilakukan minifikasi

  • Menghapus CSS yang tidak terpakai. Itu adalah ranah tree-shaking / PurgeCSS, yang memerlukan analisis HTML atau komponen Anda.
  • Memperpendek warna hex, meruntuhkan unit nol, atau menggabungkan deklarasi. Transformasi agresif itu tugas cssnano, esbuild, atau Lightning CSS, bukan tool ini.
  • Menggabungkan selector duplikat menjadi satu. Berisiko karena urutan sumber mempengaruhi cascade; beberapa minifier mencoba, sebagian besar melewatkannya.
  • Mengganti nama class. Itu CSS-in-JS atau CSS Modules, bukan minifikasi.
  • Inline critical CSS. Itu adalah langkah build-time terpisah.

Mempertahankan komentar lisensi

Banyak minifier mempertahankan komentar yang dimulai dengan /*!, dipakai untuk header lisensi:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

Tool ini menghapus semua komentar. Jika CSS Anda memuat header lisensi, tambahkan kembali setelah minify atau gunakan build tool dengan opsi melestarikan lisensi seperti cssnano atau esbuild.

Source map

Untuk debugging produksi, build tool menghasilkan source map di samping output yang di-minify:

styles.min.css
styles.min.css.map

DevTools dapat membaca peta dan menampilkan nomor baris sumber yang sudah dirapikan saat Anda menginspeksi elemen. Tool ini tidak menghasilkan source map.

Minifikasi CSS dalam build pipeline

  • Vite, Webpack, Parcel: menangani ini otomatis di build produksi.
  • PostCSS dengan cssnano: minifier stand-alone standar.
  • esbuild: juga menyertakan minifikasi CSS.
  • cssnano preset: default untuk transformasi aman, advanced untuk agresif (dengan beberapa trade-off).

Tool ini untuk minifikasi sekali pakai, perbaikan cepat, dan mempelajari apa yang sebenarnya dilakukan minifier. Untuk workflow produksi, pakai build tool agar sumber Anda tetap dapat dibaca dan hanya output yang di-minify.

Kapan minifikasi dapat merusak CSS Anda

Jarang tetapi mungkin:

  • Selector yang sensitif whitespace: .foo .bar vs. .foo.bar, spasinya penting.
  • Nilai custom property dengan spasi: --shadow: 0 2px 4px rgba(0,0,0,0.1), koma di dalam rgba() tidak boleh dihapus.
  • Komentar blok yang tidak ditutup: /* missing close melahap segalanya setelahnya. Minifier dapat berperilaku salah pada input yang malformed.

Perbaikannya: selalu jalankan output yang di-minify Anda melalui lint/test sebelum dikirim.

Pertanyaan yang Sering Diajukan

Tidak. File CSS yang diminify dengan benar berbeda byte tetapi identik secara semantik. Setiap selector, properti, dan nilai menghasilkan hasil visual yang sama. Jika Anda melihat perubahan render, minifier-nya bug atau input Anda memiliki sintaks yang sensitif whitespace.

Ya, saat Anda menekan “Minify CSS”. CSS yang Anda tempel dikirim ke server kami untuk diminify dan hasilnya dikembalikan ke halaman. CSS tidak disimpan di database dan tidak ditambahkan ke link halaman.

Setelah. Minify CSS terkompilasi akhir yang sebenarnya diterima browser. Output Sass sudah cukup ringkas tetapi memiliki whitespace dan komentar yang dihapus minifikasi.

Sederhana tetapi nyata, biasanya 5-15% di atas gzip. Menghapus whitespace dan komentar juga membuat pola gzip sedikit lebih padat.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.