CSS-sniðari og smækkari

Hvernig á að forsníða eða smækka CSS

1. Límdu stílblaðið þitt eða smelltu á Opna skrá til að hlaða inn .css-skrá (allt að 10 MB).
2. Veldu Inndráttur (2 bil, 4 bil eða tabulator) og hvort þú vilt Auð lína milli reglna.
3. Smelltu á Forsníða (fegra) til að fá læsilegan kóða, eða Smækka til að fá minnstu útgáfuna.
4. Fyrir smækkun skaltu hafa Sameina reglur við smækkun hakað fyrir besta árangur, og Halda /*! athugasemdum */ hakað til að varðveita leyfishausa.
5. Afritaðu niðurstöðuna eða sæktu hana. Stöðulínan sýnir stærðina fyrir og eftir, í bætum, og hlutfallið sem sparaðist.

Ef slaufusvigi vantar stöðvast verkfærið og segir þér í hvaða línu ólokaða { eða aukalega } er, í stað þess að skila bilaðri útkomu.

Fegrun: læsilegt og samræmt CSS

Forsníða (fegra) notar js-beautify, sniðarann sem finnst í mörgum kóðaritlum. Hann setur hverja yfirlýsingu á sína línu, dregur inn innihald hverrar reglu og @-reglna eins og @media og @supports, skrifar hvern veljara í hópi á sína línu og bætir bili á eftir tvípunkti hverrar yfirlýsingar. Núverandi auðar línur haldast (í mesta lagi ein í röð), svo rökrænir hlutar skrárinnar sjást áfram. Sniðarinn breytir aldrei gildum, röð reglna né merkingu veljara: hann breytir aðeins bilum.

Þetta er gagnlegt til að lesa smækkað CSS af vefsíðu, til að rýna stílblað sem verkfæri bjó til eða til að taka til í skrá sem margir með ólíkar venjur hafa breytt.

Smækkun: minna CSS með csso

Smækka notar csso (CSS Optimizer), byggingarlegan smækkara. Umfram að fjarlægja bil og athugasemdir endurskrifar hann stílblaðið í jafngilda, styttri mynd:

• litir eru styttir (#ff0000 verður red, #ffffff verður #fff);
• einingar og núll eru einfölduð (0px verður 0, 0.5em verður .5em);
• tvítekningar yfirlýsinga eru fjarlægðar og stuttar eigindir sameinaðar þegar það er óhætt;
• með Sameina reglur við smækkun eru reglur með eins yfirlýsingar flokkaðar saman (a{color:red} b{color:red} verður a,b{color:red}) og yfirskrifuðum yfirlýsingum er sleppt.

Endurskipulagning er örugg fyrir venjuleg stílblöð, en hún færir yfirlýsingar til. Ef CSS-ið þitt reiðir sig á mjög sérstaka röð í lagskiptingunni, til dæmis vafrabrellur, skaltu taka hakið úr valkostinum: csso þjappar þá aðeins hverri reglu á sínum stað.

Athugasemdir eru fjarlægðar, nema „mikilvægar“ athugasemdir sem byrja á /*!, sem eru oft notaðar fyrir leyfi. Taktu hakið úr Halda /*! athugasemdum */ til að fjarlægja þær líka.

Stærð fyrir og eftir

Stöðulínan ber saman stærð inntaksins og niðurstöðunnar í UTF-8-bætum. Fegraður kóði er yfirleitt stærri en upprunalegi kóðinn; smækkaður kóði sparar venjulega 20 til 50% í handskrifuðu CSS. Mundu að netþjónar þjappa skrám líka með gzip eða Brotli, svo sparnaðurinn í flutningi er minni en hráa talan, en smækkun styttir samt þáttunartíma og minnkar skrár í skyndiminni.