Paano ako mag-i-minify ng CSS online nang walang ini-install?

I-paste ang CSS sa Input CSS, o mag-drop ng .css file, pagkatapos ay i-click ang I-minify ang CSS. Inaalis ang mga komento at sobrang whitespace, at maaari mong Kopyahin ang resulta o I-download ito bilang styles.min.css.

Pinapanatili bang buo ng CSS minifier ang mga komento ng lisensya at data URI?

Oo. Inaalis ang mga karaniwang komento, pero pinapanatili ang mga komentong /*! license */. Hiwalay na tinotokenize ang mga string na may panipi, halagang url() at data URI, kaya hindi nababago ng mga panuntunan sa whitespace ang mga ito.

Paano ko ibabalik ang minified na CSS sa nababasang code?

I-click ang Pagandahin ang CSS sa halip na I-minify ang CSS. Ini-indent muli ang code gamit ang dalawang espasyo bawat antas, at nakikilala ang colon ng selector gaya ng a:hover sa colon ng property. Sine-save ito ng I-download bilang styles.css.

Ano ang ibig sabihin ng gzipped na numero sa tabi ng pagbawas?

Tantiya ito ng laki ng output pagkatapos ng gzip compression, na sinusukat gamit ang CompressionStream API ng browser. Kung wala sa browser mo ang API na iyon, hindi ipinapakita ang gzipped na laki.

Ipinapadala ba sa server ang CSS ko kapag ini-minify ko ito?

Hindi. Isang JavaScript tokenizer na tumatakbo sa browser mo ang nag-i-minify, na walang panlabas na library. Walang ina-upload, kaya magagamit mo ito sa mga pribadong stylesheet.

Oo. Libre ang bawat tool, walang account at walang credit card. Ang trabaho ay tumatakbo sa iyong device sa halip na sa aming mga server, kaya ito nananatiling libre.

Gumagana ba ito sa mobile?

Oo. Gumagana ito sa mga kasalukuyang mobile browser sa iOS at Android, nang walang ini-install.

🗜️

Libreng CSS Minifier at Beautifier

I-minify ang CSS para bawasan ang laki ng file o i-beautify ang minified na CSS para sa pagiging madaling basahin. Mabilis, sa iyong browser.

Tumatakbo sa iyong browserWalang pag-sign up, walang pop-upHindi kailangan ng loginLibre magpakailanman

Gumagana offline kapag na-load na

o mag-drop ng .css file sa ibaba

Mag-drop ng .css file dito, o mag-click para mag-browse

CSS · pinoproseso sa iyong device

o pindutin ang Ctrl+V para i-paste mula sa clipboard

I-browse ang mga file

CSS input

CSS output

Lalabas ang output dito…

Mga karaniwang gamit

I-minify ang CSS para sa Production DeploymentBawasan ang CSS file size bago mag-deploy sa production — mas mabilis na page loads at mas mababa ang bandwidth costs.
Magpaganda ng Minified CSS para sa DebuggingI-format ang compressed o minified CSS sa readable code upang maaari mong tignan at debug ang styles.
I-minify ang CSS para sa Email TemplatesI-compact ang CSS para sa HTML email templates kung saan ang file size at inline style bloat ay mahalaga.
I-minify ang CSS para sa WordPress ThemesBawasan ang size ng custom WordPress theme stylesheets para sa mas mahusay na PageSpeed scores.
Magpaganda ng CSS para sa Code ReviewI-format ang anumang CSS file sa malinis, indented, readable code na handa para sa review at collaboration.

Paano ito Gumagana

Gumagamit ang tool na ito ng hand-written at walang-dependency na CSS tokenizer na buong ginawa sa JavaScript — walang panlabas na library, walang server call. Kinaklasipika ng tokenizer ang bawat character bilang code, komento, quoted string, o url() value bago mag-apply ng anumang transformation, na pumipigil sa mga whitespace rule na sirain ang laman ng string, data URI, o calc() expression.

1
Tokenization pass
Sinusuri ang input na CSS bawat character at hinahati sa mga typed token: raw na code segment, /* ... */ na komento, quoted string (pinananatili ang escape sequence), at url(...) block. Tinitiyak nito na ang mga transformation sa susunod na hakbang ay tumatama lang sa aktuwal na CSS syntax — hindi kailanman sa laman ng string literal o data URI.
2
Minification o beautification
Sa minify mode, tinatanggal ang mga karaniwang komento (pinananatili ang /*! license */ na komento), pinagsasama sa iisang space ang sunud-sunod na whitespace sa mga code token, at tinatanggal ang whitespace na katabi ng bantas sa paligid ng { } : ; , > ~. Sinasadyang hindi ginagalaw ang mga space sa paligid ng + at - para hindi masira ang mga calc() expression. Sa beautify mode, mini-minify muna ang code sa malinis na baseline, pagkatapos ay tino-tokenize at ini-indent ulit na may two-space na pagsubaybay sa lalim at pagtukoy ng declaration-colon para paghiwalayin ang property: value na colon mula sa selector colon gaya ng a:hover.
3
Tantiya ng laki sa gzip
Pagkatapos gawin ang output, ginagamit ang native na CompressionStream API ng browser para i-compress ang resulta gamit ang gzip at sukatin ang resultang bilang ng byte. Nagbibigay ito ng makatotohanang tantiya ng transfer size na tugma sa ipapadala ng web server na may gzip compression sa network.
4
Kopyahin o i-download
Isinusulat sa clipboard ang naprosesong CSS sa pamamagitan ng Clipboard API, o dina-download bilang styles.min.css (minify mode) o styles.css (beautify mode) gamit ang Blob na may MIME type na text/css. Live na ipinapakita ang porsiyento ng nabawas na laki habang nagta-type ka.

Mga Kaugnay na Tool

✨

SVG Optimizer at Minifier

Alisin ang metadata, i-collapse ang whitespace, at i-round ang mga decimal para lubhang bawasan ang laki ng SVG file — karaniwang bawas ng 30-70%. Ang visual na preview ay nagpapatunay na walang nasira.

SubukanLokal ang mga file

🎨

CSS Beautifier

Ayusin ang minified na CSS na may pare-parehong indentation, o i-minify ang CSS. May opsyonal na alphabetical na pag-uuri ng property para mas madaling ihambing ang mga pagbabago.

Subukan

📋

Tagapormat ng JSON

I-format, i-validate, i-minify, at i-explore ang data ng JSON. Tree view, syntax highlighting, at one-click copy.