CSS-koodi vorming mõjutab otseselt nii veebiarendajate töökiirust kui ka veebilehtede laadimisaega. Inimesele loetav ja masinale optimeeritud CSS täidavad erinevaid eesmärke. Kui arendaja vajab koodi muutmiseks ja mõistmiseks selget struktuuri, siis veebibrauser eelistab võimalikult väikest faili, millest on eemaldatud kõik üleliigne. Tööriist "CSS-i kujundaja ja minimeerija" võimaldab hallata mõlemat koodi olekut otse veebibrauseris.
CSS-i kujundamise ja minimeerimise eesmärk
Veebiarenduses on tavaline, et stiililehed muutuvad aja jooksul mahukaks ja raskesti loetavaks. CSS-i kujundamine (beautification) ja minimeerimine (minification) lahendavad seda probleemi kahel vastandlikul, kuid täiendaval viisil:
- Kujundamine: Taandab ja liigendab stiilid uuesti, muutes sassis või kokkusurutud koodi kergesti loetavaks ja muudetavaks. See on vajalik olemasolevate stiililehtede hooldamisel või kokkusurutud CSS-i kiireks lugemiseks.
- Minimeerimine: Vähendab faili mahtu, et kiirendada lehe laadimisaega. See protsess valmistab koodi ette avaldamiseks, eemaldades kõik brauseri jaoks mittevajalikud märgid ilma lehe kuvamist muutmata.
Kuidas tühikud ja kommentaarid mõjutavad faili suurust
Iga tühik, reavahetus, tabulaator ja kommentaar CSS-failis võtab mälumahtu. Kuigi need elemendid teevad koodi inimesele loetavaks, on need veebibrauseri jaoks üleliigsed.
Minimeerimise käigus eemaldatakse koodist tavalised kommentaarid ja mittevajalikud tühikud. Samuti lühendatakse väärtusi, näiteks värvikoode, kus pikad kuueteistkümnendsüsteemi väärtused asendatakse lühemate samaväärsete vormidega (näiteks #ffffff kirjutatakse kujul #fff). Selline optimeerimine vähendab faili mahtu baitides, mis omakorda vähendab võrguliiklust ja kiirendab veebilehe renderdamist kasutaja seadmes.
Turvaline versus optimeeritud tihendamine
Tööriist pakub kahte erinevat tihendusastet, mis määravad, kui sügavalt koodi töödeldakse:
| Tihendusaste | Kirjeldus ja mõju koodile |
|---|---|
| Turvaline | Eemaldab ainult tühikud ja kommentaarid ning lühendab väärtusi. Iga reegel jääb täpselt sinna, kuhu see kirjutati. Tootjaprefikseid ja kaasaegset süntaksit ei muudeta. |
| Optimeeritud | Läheb kaugemale ja liidab dubleerivad selektorid ning reeglid võimalikult väikese faili saavutamiseks. See režiim võib reeglite järjekorda muuta. |
CSS-is on koodi järjekorral (source order) sisuline tähendus, kuna hiljem kirjutatud reeglid võivad samaväärse tähtsuse korral varasemad reeglid üle kirjutada. Seetõttu säilitab režiim Turvaline reeglite algse järjekorra, tagades, et lehe välimus ei muutu. Režiimi Optimeeritud kasutamisel on soovitatav tulemust enne avaldamist kontrollida, kui stiililehe toimimine sõltub rangelt koodi järjekorrast.
Mõlemas tihendusrežiimis kehtib erand spetsiaalsetele kommentaaridele. Kommentaarid, mis on märgitud kujul /*! … */, säilitatakse koodis alati, kuna need sisaldavad sageli litsentsiteavet ja autorõigusi, mida ei tohi eemaldada.
Tööriista tehnilised piirangud ja veatuvastus
Tööriistaga töötlemisel kehtivad kindlad reeglid ja piirangud, mis tagavad stabiilsuse:
- Maksimaalne maht: Sisestatava CSS-koodi limiit on 500 000 märki. Kui sisend ületab selle piiri, kuvatakse teade: "See stiilileht on töötlemiseks liiga suur. Proovige väiksemat.".
- Süntaksivead ja tühi sisend: Kui sisestusväli on tühi, kuvatakse teade: "Minimeerimiseks ei leitud CSS-i – kontrollige sisendit süntaksivigade suhtes.". Kui koodis on kriitilised vead, mida ei saa töödelda, kuvatakse teade: "Seda CSS-i ei saanud töödelda.". Kui sisendis on sisu, kuid minimeerimise tulemusel tekib tühi tekst, viitab see samuti süntaksiprobleemile.
Privaatsus ja andmetöötlus
Teie CSS vormindatakse ja minimeeritakse otse teie brauseris. Midagi ei laadita BroBroGo serverisse. Kogu koodi töötlemine toimub lokaalselt kasutaja seadmes, mis tagab, et andmed ei liigu võrgu kaudu välistesse serveritesse.
Korduma kippuvad küsimused
Mis vahe on kujundamisel ja minimeerimisel?
Kujundamine (beautify) taandab ja liigendab teie stiilid uuesti, et neid oleks lihtne lugeda ja muuta. Minimeerimine (minify) teeb vastupidist – see eemaldab tühikud ja kommentaarid, mida brauser ei vaja, ning lühendab väärtusi (nt värve), et fail oleks väiksem ja laadiks kiiremini. Kujundage töö ajal, minimeerige enne avaldamist.
Mida teevad turvalise ja optimeeritud tihendamise seaded?
Turvaline (Safe) režiim eemaldab ainult tühikud ja kommentaarid ning lühendab väärtusi, jättes iga reegli täpselt sinna, kuhu te selle kirjutasite. Optimeeritud (Optimized) režiim läheb kaugemale ja liidab dubleerivad selektorid ning reeglid väiksema faili saavutamiseks – see võib reegleid ümber järjestada, seega tasub enne avaldamist tulemust kontrollida, kui teie stiilileht sõltub koodi järjekorrast. Kommentaarid kujul /*! … */ säilitatakse mõlemas režiimis.
Kas minimeerimine muudab minu lehe välimust?
Turvalises (Safe) režiimis mitte – teie stiile kuvatakse täpselt samamoodi. See eemaldab üleliigsed tühikud, tavalised kommentaarid ja kirjutab väärtused lühemasse samaväärsesse vormi (näiteks #ffffff asemel #fff), muutmata kunagi teie tootjaprefikseid (vendor prefixes) või kaasaegset süntaksit. Optimeeritud (Optimized) režiim liidab ka reegleid, mis näeb peaaegu igal stiililehel identne välja, kuid seda tasub kontrollida, kui teie kood sõltub reeglite järjekorrast.