Formátovač a minifikátor CSS

Jak formátovat nebo minifikovat CSS

1. Vlož svou šablonu stylů, nebo klikni na Otevřít soubor a načti soubor .css (do 10 MB).
2. Zvol Odsazení (2 mezery, 4 mezery nebo tabulátor) a rozhodni, zda chceš Prázdný řádek mezi pravidly.
3. Kliknutím na Formátovat (zpřehlednit) získáš čitelný kód, kliknutím na Minifikovat nejmenší možnou verzi.
4. Při minifikaci nech zaškrtnuté Při minifikaci sloučit pravidla pro nejlepší výsledek a Zachovat komentáře /*! … */, abys zachoval licenční hlavičky.
5. Výsledek zkopíruj nebo stáhni. Stavový řádek ukazuje velikost před a po v bajtech a ušetřená procenta.

Pokud chybí složená závorka, nástroj se zastaví a oznámí ti, na kterém řádku je neuzavřená { nebo přebývající }, místo aby vytvořil rozbitý výstup.

Zpřehlednění: čitelné a jednotné CSS

Formátovat (zpřehlednit) používá js-beautify, formátovač, který najdeš v mnoha editorech kódu. Každou deklaraci umístí na samostatný řádek, odsadí obsah každého pravidla i at-pravidel jako @media a @supports, každý selektor skupiny zapíše na vlastní řádek a za dvojtečku každé deklarace přidá mezeru. Existující prázdné řádky se zachovají (nejvýše jeden za sebou), takže logické části souboru zůstanou vidět. Formátovač nikdy nemění hodnoty, pořadí pravidel ani význam selektorů: mění jen mezery.

To se hodí ke čtení minifikovaného CSS z webu, ke kontrole šablony stylů vygenerované nástrojem nebo k úklidu souboru, který upravovalo více lidí s různými zvyky.

Minifikace: menší CSS s csso

Minifikovat používá csso (CSS Optimizer), strukturální minifikátor. Kromě odstranění mezer a komentářů přepíše šablonu stylů do rovnocenného, kratšího tvaru:

• barvy se zkracují (#ff0000 se změní na red, #ffffff na #fff);
• jednotky a nuly se zjednodušují (0px se změní na 0, 0.5em na .5em);
• duplicitní deklarace se odstraňují a zkrácené vlastnosti se slučují, kde je to bezpečné;
• s volbou Při minifikaci sloučit pravidla se pravidla se stejnými deklaracemi seskupí (a{color:red} b{color:red} se změní na a,b{color:red}) a přepsané deklarace se zahodí.

Restrukturalizace je u běžných šablon stylů bezpečná, ale deklarace přesouvá. Pokud se tvé CSS opírá o velmi konkrétní pořadí kaskády, například o hacky pro prohlížeče, volbu zruš: csso pak každé pravidlo jen zkomprimuje na místě.

Komentáře se odstraňují, kromě „důležitých“ komentářů začínajících /*!, které se běžně používají pro licence. Zrušením volby Zachovat komentáře /*! … */ odstraníš i ty.

Velikost před a po

Stavový řádek porovnává velikost vstupu a výsledku v bajtech UTF-8. Zpřehledněný kód bývá větší než originál, minifikovaný kód u ručně psaného CSS obvykle ušetří 20 až 50 %. Pamatuj, že servery soubory navíc komprimují pomocí gzip nebo Brotli, takže úspora při přenosu je menší než surové číslo, ale minifikace i tak zkracuje dobu zpracování a zmenšuje soubory v mezipaměti.