Formátovanie a minifikácia CSS

Ako formátovať alebo minifikovať CSS

1. Vlož štýlový predpis, alebo klikni na Otvoriť súbor a načítaj súbor .css (do 10 MB).
2. Vyber Odsadenie (2 medzery, 4 medzery alebo tabulátor) a to, či chceš Prázdny riadok medzi pravidlami.
3. Kliknutím na Formátovať (skrášliť) získaš čitateľný kód, kliknutím na Minifikovať najmenšiu verziu.
4. Pri minifikácii nechaj zaškrtnuté Pri minifikácii zlučovať pravidlá pre najlepší výsledok a Ponechať komentáre /! … /, aby sa zachovali licenčné hlavičky.
5. Skopíruj alebo stiahni výsledok. Stavový riadok ukazuje veľkosť pred a po v bajtoch a ušetrené percentá.

Ak chýba zátvorka, nástroj sa zastaví a oznámi, na ktorom riadku je neuzavretá { alebo nadbytočná }, namiesto toho, aby vytvoril pokazený výstup.

Skrášlenie: čitateľné a jednotné CSS

Formátovať (skrášliť) používa js-beautify, formátovač známy z mnohých editorov kódu. Každú deklaráciu dá na vlastný riadok, odsadí obsah každého pravidla aj pravidiel typu @media a @supports, každý selektor skupiny zapíše na samostatný riadok a za dvojbodku každej deklarácie pridá medzeru. Existujúce prázdne riadky zostanú (najviac jeden po sebe), takže logické oddiely súboru ostanú viditeľné. Formátovač nikdy nemení hodnoty, poradie pravidiel ani význam selektorov: mení len medzery.

Hodí sa to na čítanie minifikovaného CSS z webu, na kontrolu štýlov vygenerovaných nástrojom alebo na vyčistenie súboru, ktorý upravovalo viac ľudí s rôznymi zvyklosťami.

Minifikácia: menšie CSS pomocou csso

Minifikovať používa csso (CSS Optimizer), štruktúrny minifikátor. Okrem odstránenia medzier a komentárov prepíše štýlový predpis do ekvivalentnej, kratšej podoby:

• farby sa skracujú (#ff0000 sa zmení na red, #ffffff na #fff);
• jednotky a nuly sa zjednodušujú (0px sa zmení na 0, 0.5em na .5em);
• duplicitné deklarácie sa odstránia a skrátené vlastnosti sa zlúčia, keď je to bezpečné;
• s Pri minifikácii zlučovať pravidlá sa pravidlá s rovnakými deklaráciami zoskupia (a{color:red} b{color:red} sa zmení na a,b{color:red}) a prepísané deklarácie sa zahodia.

Reštrukturalizácia je pri bežných štýlových predpisoch bezpečná, ale presúva deklarácie. Ak sa tvoje CSS spolieha na veľmi konkrétne poradie kaskády, napríklad na hacky pre prehliadače, voľbu vypni: csso potom iba skomprimuje každé pravidlo na mieste.

Komentáre sa odstránia, okrem „dôležitých“ komentárov začínajúcich /*!, ktoré sa bežne používajú pre licencie. Ak zrušíš Ponechať komentáre /! … /, odstránia sa aj tie.

Veľkosť pred a po

Stavový riadok porovnáva veľkosť vstupu a výsledku v bajtoch UTF-8. Skrášlený kód býva väčší než originál, minifikovaný kód na ručne písanom CSS typicky ušetrí 20 až 50 %. Nezabúdaj, že servery súbory navyše komprimujú pomocou gzip alebo Brotli, takže úspora pri prenose je menšia než surové číslo, no minifikácia stále skracuje čas spracovania a zmenšuje súbory v cache.