CSS Minifier

Tampal stylesheet untuk membuang ruang putih dan komen, memendekkan nilai seperti #ff0000 → red, dan menggabungkan peraturan berganda dengan pengoptimuman struktur CSSO.

Berjalan dalam pelayar andaTanpa pendaftaranTiada apa dimuat naik

Output yang di-minify

Cara menggunakan CSS Minifier

  1. Tampal CSS atau buka fail .css.
  2. Biarkan Susun semula dihidupkan untuk menggabungkan peraturan dan deklarasi, atau matikannya untuk laluan selamat yang hanya membuang ruang putih.
  3. Biarkan Kekalkan komen lesen dihidupkan untuk mengekalkan notis /*! … */.
  4. Bandingkan saiz asal, saiz selepas minify dan saiz gzip.
  5. Salin hasilnya atau muat turun output.min.css.

Cara minify CSS berfungsi

Alat ini menggunakan CSSO (CSS Optimizer), yang menghurai stylesheet anda kepada pepohon sintaks dan mencetaknya semula dalam bentuk setara yang paling pendek. Selain membuang ruang putih dan komen, ia menggunakan penulisan semula nilai yang selamat:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Peraturan kosong dan deklarasi berganda dibuang

Apakah fungsi “susun semula”?

Penyusunan semula melihat keseluruhan stylesheet: peraturan dengan deklarasi yang sama digabungkan menjadi satu senarai pemilih (.a,.b{color:red}), dan pemilih yang berulang digabungkan. Ini selalunya menjimatkan 5–15% lagi pada stylesheet sebenar. CSSO hanya menggabungkan apabila susunan cascade kekal sama, tetapi jika anda bergantung pada override yang luar biasa, anda boleh mematikannya untuk minify yang semata-mata sintaksis.

Mengapa minify CSS?

CSS menyekat pemaparan: pelayar tidak boleh melukis halaman sehingga stylesheet dalam <head> dimuat turun dan dihurai. CSS yang lebih kecil bermaksud First Contentful Paint yang lebih pantas dan Core Web Vitals yang lebih baik, yang membantu pengguna dan juga kedudukan carian. Gabungkan minify dengan gzip atau Brotli pada pelayan untuk hasil terbaik.

Soalan lazim

Adakah selamat untuk minify CSS?
Ya. Ruang putih dan komen tidak menjejaskan cara CSS dipaparkan, dan penulisan semula nilai oleh CSSO adalah setara mengikut spesifikasi. Penyusunan semula mengekalkan susunan cascade; matikannya jika anda mahukan output yang paling konservatif.
Adakah ia menyokong CSS moden seperti custom properties, nesting dan @layer?
Ya. Custom properties (--var), @media, @supports, @layer, @container dan sintaks grid dikekalkan.
Bolehkah saya mengembalikan CSS yang di-minify kemudian?
CSS yang di-minify boleh diinden semula oleh mana-mana formatter, tetapi komen yang dibuang tidak boleh dipulihkan. Simpan fail sumber asal anda dan anggap fail yang di-minify sebagai output build.
Adakah stylesheet saya dimuat naik ke mana-mana?
Tidak. Minify berjalan dalam pelayar anda; tiada apa yang dihantar ke pelayan.

Alat berkaitan

JavaScript Minifier Mampat dan kaburkan JS dengan Terser, beserta statistik saiz dan gzip. HTML Minifier Buang komen dan ruang putih, serta minify CSS/JS sebaris. SQL Formatter Kemaskan atau minify SQL untuk PostgreSQL, MySQL, T-SQL, BigQuery dan lain-lain. JSON Formatter Kemaskan, minify dan sahkan JSON dengan ralat baris/lajur.