Minifier ng CSS

Ang Minifier ng CSS ay isang libreng tool na nag-aalis ng mga hindi kailangang character sa CSS at ibinabalik ang pinaliit na stylesheet, kasama ang bilang ng mga character bago at pagkatapos.

Ano ang ginagawa ng pag-minify ng CSS?

Binabawasan ng pag-minify ng CSS ang bilang ng mga character sa stylesheet sa pamamagitan ng pag-aalis ng format na hindi kailangan ng mga browser. Karaniwang kasama rito ang indentation, mga line break, komento, at mga opsyonal na espasyo sa paligid ng mga bantas.

Matatanggap pa rin ng browser ang mga CSS rule, selector, at value ng declaration. Dapat manatiling pareho ang inaasahang hitsura, pero mas maliit na ang file na ipinapadala sa browser. Nakadepende sa orihinal na file, HTTP compression, at browser caching ang aktuwal na pakinabang ng pag-minify ng CSS stylesheet. Kung mahusay na ang compression ng stylesheet, maaaring kaunti lang ang mabawas sa mga byte na ipinapadala.

Kapaki-pakinabang ang minification bago mag-deploy, kapag sinusuri ang napakalaking third-party CSS, o kapag tinitingnan kung gaano kalaki ang naidaragdag ng development formatting sa file. Iba ito sa optimisation na nag-aalis ng mga hindi ginagamit na selector, nagsasama ng magkakatumbas na rule, o muling sumusulat ng mga declaration. Hindi sinasabi ng tool na ito na ginagawa nito ang mas malalawak na operasyong iyon.

Paano gamitin ang Minifier ng CSS?

I-paste ang stylesheet sa field na CSS at patakbuhin ang tool. Pagkatapos, kopyahin ang resultang Minified CSS sa naaangkop na build o deployment workflow. Itago ang nababasang CSS source file sa halip na permanenteng palitan ito ng minified na kopya.

1. Magsimula sa source CSS na ginagamit ng iyong site o application.
2. Tiyaking tama ang pag-parse nito bago ito i-minify.
3. I-paste ito sa CSS at patakbuhin ang tool.
4. Ihambing ang Mga character sa CSS at Mga character sa Minified CSS.
5. Subukan ang resulta sa staging page, kasama ang mga responsive state, print style, at interactive component.

Sa server isinasagawa ang pag-minify ng CSS. Ipinapadala sa server sa pamamagitan ng HTTPS ang CSS na isinumite mo at hindi ito iniimbak. Kung may mga kumpidensiyal na URL, internal hostname, o iba pang sensitibong materyal ang stylesheet, pag-isipan kung naaayon sa patakaran ng iyong organisasyon sa pangangasiwa ng impormasyon ang pagpapadala nito sa anumang server-side utility.

Paano basahin ang resulta?

Makikita sa resulta ang binagong CSS at dalawang bilang ng character, kaya masusuri mo ang output at makikita agad ang ibinaba ng bilang. Ang Mga character sa CSS ay ang haba ng isinumiteng teksto, habang ang Mga character sa Minified CSS ay ang haba nito pagkatapos i-minify.

Ang mga bilang na ito ay mga character count na ginawa gamit ang length function na sumusuporta sa multibyte. Hindi dapat ituring ang mga ito bilang eksaktong pagtataya sa laki ng data na ipapadala sa network. Maaaring gumamit ng higit sa isang byte ang mga UTF-8 character, at maaaring malaki ang maging epekto ng Brotli o gzip compression sa laki ng ipinapadala sa pamamagitan ng HTTP.

Walang nakalistang hiwalay na field para sa validation o error ang tool na ito. Kaya hindi ito dapat ituring na CSS validator. Kailangang suriin sa browser developer tools, linter, o validator na sumusunod sa mga pamantayan ang mga karaniwang problema gaya ng hindi magkatugmang brace, nawawalang colon, string na hindi naisara, sirang komento, o invalid na nesting. Maaaring makagawa ng mukhang compact na output ang invalid na CSS pero hindi ito gagana ayon sa inaasahan.

Maliliit na halimbawa ng pag-minify ng CSS

Sa karaniwang minified na bersyon, inaalis ang formatting habang pinananatili ang mismong rule.

CSS

p { color: red; }

Minified CSS

p{color:red}

Sa halimbawang ito, may 17 character ang nababasang input at 12 naman ang compact na anyo. Dapat manatiling bahagi ng value ang mga espasyo at bantas sa loob ng mga quoted string.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Minified CSS

.notice,.warning{color:#c00;margin:0 1rem}

Hindi ligtas ang basta-bastang pagbura sa lahat ng espasyo. Maaaring kumatawan ang whitespace sa descendant combinator, at may mga kinakailangang whitespace ang mga arithmetic operator sa mga function gaya ng calc(). Kailangan din ng syntax-aware na pagproseso ang mga string, data URL, escaped identifier, at value ng custom property.

Maaaring lumitaw ang mga accented at non-Latin na character sa mga string at, alinsunod sa mga panuntunan ng CSS identifier, sa mga selector. Bahagi ng syntax ang mga numero, decimal point, porsiyento, at unit, hindi lamang pandekorasyong teksto, kaya hindi basta maaaring paikliin ang mga ito nang hindi nauunawaan ang declaration. Walang CSS na mami-minify sa isang walang-lamang stylesheet. Para sa napakalalaking stylesheet, karaniwang mas madaling ulitin at i-audit ang build-time minifier kaysa magkopya ng teksto sa isang online form.

Kailan hindi sulit ang pag-minify ng CSS?

Karaniwang hindi sulit ulitin ang minification kung minified na ang file o ginawa na ito bilang compact na production asset. Maaaring kaunti lang o wala nang mabawas sa ikalawang pag-minify ng CSS, habang nagdaragdag pa ito ng isa pang transformation sa proseso ng release.

• Huwag i-prettify at saka muling i-minify ang CSS na browser o build system lang ang babasa.
• Huwag gamitin ang minification bilang kapalit ng pag-aalis ng mga hindi ginagamit na framework rule o dobleng declaration.
• Huwag asahang matutukoy ng pagbawas sa character ang mga render-blocking request, problema sa cache, o mabagal na pag-load ng font.
• Huwag itapon ang naka-format na source, lalo na kapag nagde-debug ng specificity, cascade layer, o media query.

Kung awtomatikong bina-bundle ang CSS, gamitin ang minifier sa pipeline na iyon para pare-pareho ang mga setting sa bawat release. Kapag mano-manong nagde-deploy ng magkakaugnay na asset, magagamit ang HTML minifier at Minifier ng JS para gawin ang katumbas na operasyon sa mga uri ng file na iyon.

Mga madalas itanong

Nagbabago ba ang specificity ng selector kapag minify ang CSS?

Hindi binabago ng tamang minification ang specificity ng selector dahil dapat manatili ang parehong mga bahagi at pagkakasunod-sunod ng selector. Gayunman, suriing mabuti ang mga kumplikadong selector kung gumagamit ang source ng mga escape, mas bagong pseudo-class, o generated syntax na maaaring hindi nauunawaan ng mas lumang minifier.

Puwede bang i-minify ang mga CSS custom property?

Maaaring isama ang mga custom property, pero posibleng panatilihin ng mga value nito ang mga token at espasyo para sa susunod na substitution gamit ang var(). Subukan sa mga browser na sinusuportahan ng iyong proyekto ang mga declaration na may calculation, fallback, o embedded string, sa halip na ipalagay na opsyonal ang bawat nakikitang espasyo.

Gumagawa ba ang tool ng source map?

Walang nakalistang resulta para sa source map. Kung kailangang maitugma sa production debugging ang compact na CSS pabalik sa Sass, Less, o ibang source, gawin ang minified na file at source map nito sa compiler o bundler na nakaaalam sa orihinal na istruktura ng file.

Mananatili ba sa output ang mga komento tungkol sa lisensiya?

Huwag ipalagay na mapapanatili ang mga komento sa CSS. Kung inaatas ng lisensiya ng isang dependency na may kasamang abiso ang ipinamamahaging code, itago nang hiwalay ang abiso o suriin ang nabuong output bago mag-release.

Maaayos ba ng minification ang sirang CSS?

Hindi. Nag-aalis ang minification ng mga hindi kailangang character, pero hindi nito inaayos ang invalid na selector, hindi suportadong property, nawawalang asset, o maling cascade. Ayusin muna sa source ang mga babala sa pag-parse at mga problemang nakikita sa resulta.

Mga dapat suriin bago mag-deploy

I-save ang minified na output bilang hiwalay na production asset, tiyaking buo ang mga URL at quoted content, at i-load ito sa staging page habang nakabukas ang browser console. Ihambing ang mga representative page sa makitid at malapad na viewport, pagkatapos ay kumpirmahing inilalapat ng iyong server ang inaasahang content type, patakaran sa caching, at HTTP compression.