CSS kodo tvarkymo ir glaudinimo paskirtis
Kuriant ir prižiūrint interneto svetaines, CSS (angl. Cascading Style Sheets) failų struktūra daro tiesioginę įtaką tiek programuotojų darbo efektyvumui, tiek galutiniam svetainės krovimosi greičiui. Žmonėms patogus kodas reikalauja aiškios vizualinės struktūros, tuo tarpu naršyklėms, apdorojančioms stilius, vizualinis kodo apipavidalinimas neturi jokios reikšmės.
Svetainės kūrimo etape programuotojai naudoja įtraukas, naujas eilutes ir komentarus, kad lengviau orientuotųsi taisyklėse. Tačiau visi šie papildomi simboliai padidina failo apimtį. Norint pasiekti geriausią vartotojo patirtį, gamybinėje aplinkoje naudojamas mašiniškai optimizuotas CSS kodas, iš kurio pašalinti visi pertekliniai baitai. Šis įrankis leidžia akimirksniu konvertuoti kodą iš vieno formato į kitą, priklausomai nuo to, ar jums reikia jį redaguoti, ar paruošti pateikimui į serverį.
Kaip tarpai ir komentarai veikia failo dydį
Kiekvienas tarpas, tabuliacijos žymė, naujos eilutės simbolis ar komentaras CSS faile užima vietą. Nors keli papildomi tarpai atrodo nereikšmingi, didelėse stilių lentelėse, kurias sudaro tūkstančiai eilučių, šie simboliai gali sudaryti žymią failo svorio dalį.
Kai vartotojas apsilanko svetainėje, naršyklė turi atsisiųsti visus susijusius CSS failus prieš pradėdama atvaizduoti puslapį. Didesnis failo dydis tiesiogiai koreliuoja su ilgesniu atsisiuntimo laiku, o tai gali sulėtinti puslapio krovimąsi, ypač naudojantis mobiliuoju ryšiu. Pašalinus šiuos nereikalingus elementus, failo dydis sumažėja, o puslapis vartotojui pateikiamas greičiau.
Žmogui skaitomo ir mašiniškai optimizuoto CSS skirtumai
Pagrindinis skirtumas tarp šių dviejų kodo būsenų yra jų paskirtis:
- Žmogui skaitomas CSS: pasižymi aiškia hierarchija. Kiekviena taisyklė prasideda naujoje eilutėje, savybės yra pastumtos į dešinę naudojant įtraukas, o sudėtingos kodo dalys paaiškintos komentaruose. Tai palengvina kodo priežiūrą ir klaidų paiešką.
- Mašiniškai optimizuotas CSS: visiškai neturi tarpų aplink selektorius, skliaustus bei kablelius. Visas kodas dažniausiai yra sujungtas į vieną nepertraukiamą eilutę. Naršyklė tokį kodą nuskaito be jokių sunkumų, tačiau žmogui jį redaguoti ar suprasti yra itin sudėtinga.
Šis įrankis leidžia lengvai perjungti šiuos du formatus. Jei jums reikia išanalizuoti svetimą, suspaustą stilių lentelę, funkcija „Sutvarkyti“ atkuria tvarkingas įtraukas ir išdėsto kodą patogiam skaitymui. Jei norite paruošti savo parašytą kodą gamybiniam naudojimui, funkcija „Suglaudinti“ atlieka priešingą veiksmą.
Saugaus ir optimizuoto glaudinimo režimai
Glaudinant CSS kodą, galima pasirinkti vieną iš dviejų apdorojimo lygių, kurie skiriasi savo poveikiu kodo struktūrai:
| Glaudinimo režimas | Veikimo principas | Poveikis taisyklėms |
|---|---|---|
| Saugus | Pašalina tik tarpus, naujas eilutes, paprastus komentarus ir sutrumpina reikšmes. | Kiekviena taisyklė lieka tiksliai toje vietoje, kur buvo parašyta. |
| Optimizuotas | Atlieka saugaus režimo veiksmus ir papildomai sujungia pasikartojančius selektorius bei taisykles. | Gali pakeisti taisyklių tvarką faile, siekiant maksimaliai sumažinti dydį. |
Saugiajame režime išlaikoma originali kodo struktūra, todėl nėra rizikos pažeisti stilių kaskadiškumo taisykles. Optimizuotas režimas leidžia pasiekti dar mažesnį failo dydį, tačiau jį naudojant svarbu įvertinti kodo eiliškumą. Kadangi CSS taisyklės, esančios žemiau, gali perrašyti aukščiau esančias taisykles, kodo eiliškumo pakeitimas optimizavimo metu gali turėti įtakos tam, kaip naršyklė interpretuoja stilius.
Reikšmių trumpinimas ir svarbių komentarų išsaugojimas
Glaudinimo metu įrankis ne tik pašalina tuščias erdves, bet ir atlieka protingą reikšmių trumpinimą. Pavyzdžiui, spalvų kodai yra konvertuojami į trumpesnius ekvivalentus, jei tai įmanoma (pavyzdžiui, šešiaženklis kodas #ffffff sutrumpinamas iki triženklio #fff). Saugiajame režime moderni sintaksė ir specifiniai naršyklių prefiksai (angl. vendor prefixes) lieka nepakeisti, užtikrinant suderinamumą su senesnėmis naršyklėmis.
Ypatingas dėmesys skiriamas komentarams. Nors įprasti komentarai glaudinant yra pašalinami, komentarai, prasidedantys šauktuku /*! … */, yra traktuojami kaip svarbūs (pavyzdžiui, autorinių teisių ar licencijos informacija) ir yra išsaugomi tiek saugaus, tiek optimizuoto suspaudimo metu.
Įrankio naudojimas ir techniniai apribojimai
Norėdami apdoroti kodą, įklijuokite jį į laukelį „CSS įvestis“. Įrankis palaiko iki 500 000 simbolių dydžio įvestį. Jei viršysite šį limitą, ekrane pamatysite pranešimą: „Ši stilių lentelė yra per didelė apdorojimui. Bandykite su mažesniu failu.“.
Apdorojus kodą, ekrane pateikiama statistika:
- Eilutės: apdoroto kodo eilučių skaičius.
- Simboliai: bendras simbolių skaičius.
- Dydis: failo apimtis baitais (UTF-8 formatu).
- Jei kodas buvo sėkmingai suglaudintas, pamatysite pranešimą „Suglaudinta –
{pct}% mažesnis failas.“, kuriame nurodomas pasiektas dydžio sumažėjimas procentais.
Jei įvestas kodas turi kritinių sintaksės klaidų arba yra tuščias, įrankis pateiks pranešimą: „Nerasta CSS kodo, kurį būtų galima suglaudinti – patikrinkite, ar įvesties kode nėra sintaksės klaidų.“. Jei kodo nepavyksta apdoroti dėl kitų priežasčių, rodoma klaida: „Nepavyko apdoroti šio CSS kodo.“.
Apdorotą rezultatą galite nukopijuoti arba atsisiųsti kaip failą styles.css naudodami atitinkamus mygtukus.
Privatumo užtikrinimas
Naudojantis šiuo įrankiu, jūsų įvestas kodas išlieka visiškai privatus. Jūsų CSS formatuojamas ir glaudinamas tiesiog naršyklėje. Nieko nesiunčiama į „BroBroGo“ serverius, todėl galite dirbti su savo projektais tiesiogiai savo įrenginyje, nerizikuodami, kad kodo fragmentai bus perduoti trečiosioms šalims.
Dažniausiai užduodami klausimai (DUK)
Kuo skiriasi kodo sutvarkymas (beautify) ir suglaudinimas (minify)?
Sutvarkymo („Beautify“) funkcija iš naujo nustato įtraukas ir tarpus, kad stiliai būtų lengvai skaitomi ir redaguojami. Suglaudinimas („Minify“) daro priešingai – pašalina naršyklei nereikalingus tarpus bei komentarus ir sutrumpina reikšmes (pavyzdžiui, spalvų kodus), kad failas būtų mažesnis ir greičiau įkeliamas. Tvarkykite kodą dirbdami, o suglaudinkite prieš pateikdami į gamybinę aplinką.
Ką daro saugaus (Safe) ir optimizuoto (Optimized) suspaudimo nustatymai?
Saugusis režimas („Safe“) tik pašalina tarpus bei komentarus ir sutrumpina reikšmes, palikdamas kiekvieną taisyklę tiksliai ten, kur ją parašėte. Optimizuotas režimas („Optimized“) žengia dar toliau ir sujungia pasikartojančius selektorius bei taisykles, kad failas būtų dar mažesnis – jis gali pakeisti taisyklių tvarką, todėl stilių lentelėse, kurios priklauso nuo kodo eiliškumo, prieš gamybinį paleidimą verta viską greitai patikrinti. Komentarai, pažymėti kaip /*! … */, išsaugomi abiem atvejais.
Ar suglaudinimas pakeis mano puslapio išvaizdą?
Saugiajame režime („Safe“) – ne, jūsų stiliai bus atvaizduojami visiškai taip pat. Jis pašalina nereikalingus tarpus, paprastus komentarus ir perrašo reikšmes trumpesniais ekvivalentais (pavyzdžiui, #ffffff tampa #fff), tačiau niekada nekeičia naršyklių prefiksų ar modernios sintaksės. Optimizuotas režimas („Optimized“) papildomai sujungia taisykles – vizualiai rezultatas beveik visada bus identiškas, tačiau verta įsitikinti, ar jūsų stiliai nepriklauso nuo konkrečios taisyklių sekos.
Kas nutinka su autorinių teisių komentarais glaudinimo metu?
Visi įprasti komentarai glaudinimo metu yra pašalinami, kad sumažėtų failo dydis. Tačiau komentarai, kurie prasideda šauktuku, pavyzdžiui, /*! Autorius */, yra laikomi svarbiais ir yra išsaugomi tiek saugaus, tiek optimizuoto glaudinimo metu.