CSS-i vormindaja ja minimeerija

Kuidas CSS-i vormindada või minimeerida

1. Kleebi oma stiillehe kood või klõpsa nuppu Ava fail, et laadida .css-fail (kuni 10 MB).
2. Vali Taane (2 tühikut, 4 tühikut või tabulaator) ning kas soovid Tühi rida reeglite vahel.
3. Klõpsa Vorminda (kaunista), et saada loetav kood, või Minimeeri, et saada kõige väiksem versioon.
4. Minimeerimisel jäta parima tulemuse jaoks märgituks Ühenda reeglid minimeerimisel ja litsentsipäiste säilitamiseks Säilita /*! kommentaarid */.
5. Kopeeri tulemus või laadi see alla. Olekurida näitab mahtu enne ja pärast baitides ning säästetud protsenti.

Kui sulg puudub, peatub tööriist ja ütleb, millisel real on sulgemata { või üleliigne }, selle asemel et luua katkine väljund.

Kaunistamine: loetav ja ühtlane CSS

Vorminda (kaunista) kasutab js-beautifyt, vormindajat, mida leidub paljudes koodiredaktorites. See paneb iga deklaratsiooni eraldi reale, taandab iga reegli ja at-reeglite (nt @media ja @supports) sisu, kirjutab rühma iga selektori eraldi reale ning lisab iga deklaratsiooni koolonile järele tühiku. Olemasolevad tühjad read säilivad (järjest kuni üks), nii et faili loogilised osad jäävad nähtavaks. Vormindaja ei muuda kunagi väärtusi, reeglite järjekorda ega selektorite tähendust: ta muudab ainult tühimärke.

See on kasulik veebilehe minimeeritud CSS-i lugemiseks, tööriista loodud stiilifaili ülevaatamiseks või faili korrastamiseks, mida on muutnud mitu eri harjumustega inimest.

Minimeerimine: väiksem CSS csso-ga

Minimeeri kasutab csso-d (CSS Optimizer), struktuurset minimeerijat. Lisaks tühikute ja kommentaaride eemaldamisele kirjutab see stiilifaili ümber samaväärseks lühemaks vormiks:

• värvid lühendatakse (#ff0000 muutub red, #ffffff muutub #fff);
• ühikuid ja nulle lihtsustatakse (0px muutub 0, 0.5em muutub .5em);
• dubleerivad deklaratsioonid eemaldatakse ja lühiomadused ühendatakse, kui see on ohutu;
• valikuga Ühenda reeglid minimeerimisel rühmitatakse samade deklaratsioonidega reeglid (a{color:red} b{color:red} muutub a,b{color:red}) ja üle kirjutatud deklaratsioonid jäetakse ära.

Ümberstruktureerimine on tavaliste stiilifailide jaoks ohutu, kuid see liigutab deklaratsioone. Kui sinu CSS tugineb väga kindlale kaskaadi järjekorrale, näiteks brauseritrikkidele, võta märge maha: siis pakib csso iga reegli ainult kohapeal.

Kommentaarid eemaldatakse, välja arvatud „olulised“ kommentaarid, mis algavad /*!, mida kasutatakse tavaliselt litsentside jaoks. Võta märge maha valikult Säilita /*! kommentaarid */, et eemaldada needki.

Maht enne ja pärast

Olekurida võrdleb sisendi ja tulemuse mahtu UTF-8 baitides. Kaunistatud kood on tavaliselt algsest suurem; käsitsi kirjutatud CSS-i minimeerimine säästab tavaliselt 20 kuni 50%. Pea meeles, et serverid pakivad faile ka gzipi või Brotliga, seega on edastuse kokkuhoid väiksem kui toorarv, kuid minimeerimine vähendab siiski analüüsi aega ja puhverdatud failide suurust.