CSS snyrtir og þjappi

Tilgangurinn með snyrtingu og þjöppun CSS

CSS-kóði sem skrifaður er af mönnum inniheldur oft mikið af bilum, inndráttum, nýjum línum og athugasemdum. Þessi atriði gera kóðann læsilegan og auðvelda hönnuðum að viðhalda stílsíðum. Hins vegar skilja vafrar CSS-kóða jafnt þótt öll þessi aukabil vanti.

Þegar stílsíða er snyrt (beautify) er hún endurskipulögð með skipulegum inndrætti og línubilum svo auðveldara sé að lesa hana og breyta henni. Þegar CSS er þjappað (minify) er ferlinu snúið við. Öll óþarfa gögn eru fjarlægð til að minnka skráarstærðina. Minni skráarstærð þýðir hraðari hleðslutíma fyrir vefsíður, þar sem vafrinn þarf að sækja færri bæti yfir netið áður en hann getur birt útlit síðunnar.

Munurinn á læsilegu og vélbjöguðu CSS

Mismunurinn á mannlesanlegu og vélbjöguðu CSS snýst fyrst og fremst um jafnvægið á milli vinnuhagræðis hönnuða og afkasta vefsvæða.

• Mannlesanlegt CSS: Inniheldur skýran inndrátt, skipulagðar línur og skýringartexta (athugasemdir). Þetta hentar vel við þróun og viðhald.
• Vélbjagað CSS: Er þjappað í eins fáar línur og mögulegt er. Bil eru skorin niður, litakóðar styttir (til dæmis er #ffffff breytt í #fff) og athugasemdir fjarlægðar. Þetta form er hannað eingöngu fyrir túlkun vafra.

Með því að nota viðeigandi tól er hægt að flakka á milli þessara tveggja forma eftir því hvort verið er að vinna í kóðanum eða undirbúa hann fyrir útgáfu.

Örugg og bestuð þjöppun

Þegar CSS er þjappað er hægt að velja á milli tveggja mismunandi aðferða sem hafa áhrif á hvernig unnið er úr reglunum:

Röð reglna í CSS skiptir máli þar sem reglur sem koma framar í skjalinu geta verið yfirskrifaðar af reglum sem koma síðar. Í þeim tilfellum þar sem stílsíðan treystir á þessa tilteknu röð er mælt með því að nota Örugg stillingu, eða gera fljóta athugun á útlitinu ef Bestuð stilling er valin.

Sérstakar athugasemdir sem eru merktar sem /*! … */ eru varðveittar í báðum þjöppunarstillingum. Þetta er gert til að tryggja að mikilvægar upplýsingar, eins og höfundarréttarleyfi, glatist ekki við vinnsluna.

Takmarkanir og villumeðhöndlun

Tólið vinnur úr CSS-kóða með ákveðnum takmörkunum til að tryggja stöðugleika:

• Hámarksstærð: Inntakið má að hámarki vera 500,000 stafir. Ef farið er yfir þau mörk birtast villuboðin: „Þessi stílsíða er of stór til að vinna úr henni. Prófaðu minni skrá.“
• Tómt inntak eða setningafræðivillur: Ef ekkert CSS finnst í inntakinu eða ef þjöppunin skilar engu vegna alvarlegra setningafræðivillna, birtast skilaboðin: „Ekkert CSS fannst til að þjappa — athugaðu hvort það séu setningafræðivillur í inntakinu.“
• Almenn vinnsluvilla: Ef ekki tekst að lesa úr kóðanum vegna skemmdra gagna eða óþekkts sniðs birtast skilaboðin: „Ekki tókst að vinna úr þessu CSS.“

Öryggi og vinnsla gagna

Allur CSS-kóði sem þú setur inn í tólið er snyrtur og þjappaður beint í vafranum þínum. Engin gögn eru send til BroBroGo eða hlaðið upp á ytri netþjóna. Þetta tryggir að vinnan með stílsíðurnar fer eingöngu fram á þínu eigin tæki.

---

Algengar spurningar

Hver er munurinn á því að snyrta og þjappa?

Snyrting (beautify) endurinn dregur og bætir við bilum í stílsíðuna svo auðveldara sé að lesa hana og breyta henni. Þjöppun (minify) gerir hið gagnstæða — hún fjarlægir bil og athugasemdir sem vafrinn þarf ekki á að halda og styttir gildi eins og liti, svo skráin verði minni og hlaðist hraðar. Snyrtu á meðan þú vinnur, þjappaðu áður en þú gefur út.

Hvað gera þjöppunarstillingarnar Örugg (Safe) og Bestuð (Optimized)?

Örugg stilling (Safe) fjarlægir aðeins bil og athugasemdir og styttir gildi, en skilur allar reglur eftir nákvæmlega þar sem þú skrifaðir þær. Bestuð stilling (Optimized) gengur lengra og sameinar eins valara og reglur til að fá enn minni skrá — hún getur breytt röð reglna, svo á stílsíðum sem treysta á röð reglna er gott að gera fljóta athugun áður en hún er gefin út. Athugasemdir sem merktar eru með /*! … */ eru geymdar í báðum tilvikum.

Mun þjöppun breyta því hvernig síðan mín lítur út?

Í öruggum ham (Safe), nei — stílarnir birtast nákvæmlega eins. Hamurinn þjappar bilum, sleppir venjulegum athugasemdum og endurskrifar gildi á styttra jafngilt form (eins og #ffffff sem #fff), og breytir aldrei forskeytum framleiðenda eða nútímalegri setningafræði. Bestaður hamur (Optimized) sameinar einnig reglur, sem lítur eins út á nánast öllum stílsíðum en gott er að sannreyna ef þín stílsíða treystir á röð reglna.

Hvernig eru litir og önnur gildi stytt við þjöppun?

Tólið greinir gildi í CSS-kóðanum sem hægt er að skrifa á styttra formi án þess að virknin breytist. Sem dæmi eru hex-litakóðar eins og #ffffff styttir í #fff. Þetta minnkar stærð stílsíðunnar um nokkur bæti á hverjum stað sem slík gildi koma fyrir.