CSS Minifier

Mag-paste ng stylesheet para alisin ang whitespace at comment, paikliin ang mga value gaya ng #ff0000 → red, at pagsamahin ang dobleng rule gamit ang structural optimization ng CSSO.

Tumatakbo sa browser moWalang sign-upWalang ina-upload

Minified na output

Paano gamitin ang CSS Minifier

  1. Mag-paste ng CSS o magbukas ng .css na file.
  2. Panatilihing naka-on ang I-restructure para pagsamahin ang mga rule at declaration, o i-off ito para sa ligtas na whitespace-only na pass.
  3. Iwanang naka-on ang Panatilihin ang license comment para manatili ang mga /*! … */ na notice.
  4. Ikumpara ang orihinal, minified at gzipped na laki.
  5. Kopyahin ang resulta o i-download ang output.min.css.

Paano gumagana ang CSS minification

Gumagamit ang tool na ito ng CSSO (CSS Optimizer), na nagpa-parse ng iyong stylesheet sa syntax tree at ipinapakita itong muli sa pinakamaikling katumbas na anyo. Bukod sa pag-alis ng whitespace at comment, gumagawa rin ito ng ligtas na pagpapalit ng value:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Inaalis ang mga walang lamang rule at dobleng declaration

Ano ang ginagawa ng “restructure”?

Tinitingnan ng restructuring ang buong stylesheet: pinagsasama sa iisang selector list ang mga rule na may parehong declaration (.a,.b{color:red}), at pinagsasama rin ang mga paulit-ulit na selector. Madalas itong nakakatipid ng karagdagang 5–15% sa totoong mga stylesheet. Nagme-merge lang ang CSSO kapag nananatili ang ayos ng cascade, pero kung umaasa ka sa kakaibang override, puwede mo itong i-off para sa purong syntactic na minification.

Bakit kailangang i-minify ang CSS?

Hinaharangan ng CSS ang rendering: hindi maipipinta ng browser ang page hangga't hindi nada-download at napa-parse ang mga stylesheet sa <head>. Ang mas maliit na CSS ay nangangahulugang mas mabilis na First Contentful Paint at mas magandang Core Web Vitals, na nakakatulong sa mga user at sa search ranking. Isabay ang minification sa gzip o Brotli sa server para sa pinakamagandang resulta.

Mga madalas itanong

Ligtas bang i-minify ang CSS?
Oo. Walang epekto ang whitespace at comment sa pag-render ng CSS, at katumbas ayon sa specification ang mga pagpapalit ng value ng CSSO. Pinapanatili ng restructuring ang ayos ng cascade; i-disable ito kung gusto mo ang pinakakonserbatibong output.
Sinusuportahan ba nito ang modernong CSS gaya ng custom properties, nesting at @layer?
Oo. Napapanatili ang custom properties (--var), @media, @supports, @layer, @container at grid syntax.
Puwede ko bang i-un-minify ang CSS sa ibang pagkakataon?
Puwedeng i-re-indent ng kahit anong formatter ang minified na CSS, pero hindi na maibabalik ang mga inalis na comment. Itago ang iyong orihinal na source file at ituring ang minified na file bilang build output.
Ina-upload ba kahit saan ang stylesheet ko?
Hindi. Tumatakbo ang minification sa iyong browser; walang ipinapadala sa server.

Mga kaugnay na tool

JavaScript Minifier I-compress at i-mangle ang JS gamit ang Terser, may size at gzip stats. HTML Minifier Alisin ang comment at whitespace, at i-minify ang inline CSS/JS. SQL Formatter I-beautify o i-minify ang SQL para sa PostgreSQL, MySQL, T-SQL, BigQuery at iba pa. JSON Formatter I-beautify, i-minify at i-validate ang JSON na may linya/column ng error.