Paliitin ang stylesheet nang hindi nababago ang tinatamaan nito.
Para saan ito
Paliitin ang stylesheet para mas mabilis mag-load ang web page, sa pag-alis ng mga espasyo, line break at komentong tao lang ang nangangailangan — nang hindi binabago ang itsura ng pahina.
Bago magsimula
Ihanda ang CSS — ang code na nagtatakda ng kulay, laki at ayos ng web page — kinopya mula sa .css file o style block. Sa browser mo ito pinaliliit at walang ipinapadala kahit saan.
I-paste ang stylesheet
Palitan ng sarili mong CSS ang sample sa Stylesheet.
Piliin ang paiikliin
Naka-tsek ang tatlong kahon sa simula, at bagay iyon sa karamihan. Pinapanatili ng Panatilihin ang /*! na komento ng lisensya ang copyright notice na nagsisimula sa /*!. Ginagawang #abc ng Paikliin ang hex na kulay ang #aabbcc, at ginagawang 0 ng Paikliin ang sero at desimal ang 0px at .5 ang 0.5. Alisin lang ang tsek kung kailangan ng ginagamit mo ang mas mahabang anyo.
I-minify at kopyahin
Pindutin ang I-minify. Nasa band sa itaas ng card ang resulta — nagbabago rin ito habang nagta-type ka — at inilalagay ito ng Kopyahin sa clipboard mo. Itago ang orihinal mong file para sa pag-edit, at ang pinaliit na kopya ang gamitin sa live na site.
Tingnan ang ginawa
Binibilang ng Ano ang ginawa sa ibaba ang mga komentong inalis at pinanatili, at ang laki bago at pagkatapos. Sinasabi ng mga note sa ilalim nito kung ano ang sinadyang hindi galawin.
Pagbasa ng resulta
Kung may problema
May tatlong lugar kung saan mahalaga ang espasyo sa CSS, at bawat isa ay paraan ng pagkasira ng stylesheet.
Ang bare space ay descendant combinator. Ang .a .b ay tumutugma sa .b sa loob ng .a; ang .a.b ay tumutugma sa elementong may dalawang klase. Ang pagtanggal ng espasyong iyon ay nagbabago kung aling elemento ang tinatamaan.
Sa loob ng panipi, ang content: "a b" ay may dalawang espasyo na lumalabas sa pahina.
At sa calc(), kailangan ang espasyo: wasto ang calc(100% - 20px) at hindi ang calc(100%-20px), dahil mababasang may-tandang haba ang -20px at hindi pagbabawas.
Walang pinagsasama o inaayos ang pagkakasunod. Nakasalalay sa pagkakasunod ang cascade.
Dahil ibang antas ng problema ito. Kailangan ng tunay na parser sa pagpapaliit ng JavaScript — pagsusuri ng scope, awtomatikong paglalagay ng semicolon, pagkilala sa regular expression laban sa paghahati — at ang 95% na tama ay tahimik na sumisira sa script ng iba. Walang katumbas na bitag ang CSS: patag ang balarila, walang saysay ang espasyo maliban sa ilang malinaw na lugar, at lokal ang bawat pagbabago dito.
Dahil ang hubad na espasyo ay descendant combinator, at may kahulugan ito. Ang “.a .b” ay tumutugma sa .b na nasa loob ng .a; ang “.a.b” ay tumutugma sa elementong may dalawang klase. Ang pagtanggal sa espasyong iyon ay nagbabago kung aling elemento ang tinatamaan ng panuntunan — ito ang pinakamapaminsalang ginagawa ng pabayang CSS minifier. Tinatanggal ang espasyo sa paligid ng >, + at ~, dahil malinaw ang mga combinator na iyon.
Dahil kailangan sila. Wasto ang calc(100% - 20px) at hindi ang calc(100%-20px) — kapag walang espasyo, ang -20px ay nababasang haba na may tanda at hindi pagbabawas, at ibinabagsak ng browser ang buong deklarasyon. Ganoon din sa loob ng clamp, min at max.
Hindi kung nagsisimula ito sa /*! — matagal nang kumbensiyon ang anyong iyon para sa komentong kailangang makaligtas sa pagpapaliit, at ginagalang ito ng bawat minifier. Ito ang iisang pagtanggal dito na may bunga sa batas, kaya pinapanatili ito bilang default at sinasabi ng pahina kapag may pinanatili ito. Tinatanggal ang karaniwang /* na komento.
Hindi, sinasadya. Nakasalalay sa pagkakasunod ang cascade — ang dalawang panuntunang may parehong selector ay ipinapatong nang sunod-sunod, at nananalo ang huling deklarasyon. Ang minifier na nagsasama o nag-aayos muli ay isinusulat na muli ang stylesheet mo at hindi pinapaliit, at hindi sulit ang dagdag na tipid sa uri ng bug na dulot nito.
Iniiwan itong eksaktong gaya ng dati, espasyo at lahat. Ang content: "a b" ay nagpapakita ng dalawang espasyo, kaya ang pagpiga sa espasyo sa loob ng string ay nagbabago ng lumalabas sa pahina. Hindi rin pinapaikli ang hex na kulay sa loob ng string, sa parehong dahilan.
Ang pagpapaliit ng JavaScript ay nangangailangan ng tunay na parser — scope analysis, automatic semicolon insertion, ang pagkakaiba ng regex at paghahati. Ang 95% na tama doon ay tahimik na sumisira ng script. Walang ganoong bitag ang CSS.
Mahalaga
Runs entirely in your browser; nothing is transmitted. Nothing is reordered or merged — the cascade depends on order. Licence comments beginning with an exclamation mark are kept by default. Walang ipinapadala sa mga server namin ang tina-type mo rito — sa browser mo tumatakbo nang buo ang pagkuwenta.
