Formátovač CSS

O formátování CSS

Minifikace odstraňuje z CSS bílé znaky, komentáře a nadbytečné znaky, aby se zmenšila velikost souboru. Zkrášlení ho znovu rozšíří do odsazeného stylu s jedním pravidlem na řádek, který se snadněji přehlíží a upravuje.

Minifikace zde jde mírně dál než pouhé odstranění bílých znaků: hodnoty se také přepisují na nejkratší ekvivalentní tvar, takže background-color: white se stane background-color:#fff a color: #ff0000 se stane color:red, podle toho, co zabere méně bajtů. Neanalyzuje se, která pravidla se na stránce skutečně uplatní — to je samostatný úkol zvaný „odstranění nepoužívaného CSS“ nebo tree-shaking, který vyžaduje znát vaše HTML a JavaScript, aby bylo možné určit, co je zbytečné, a tento nástroj zachovává každé pravidlo, které jste napsali. Jedna výjimka z odstraňování komentářů: „bang komentář“ začínající /*! se záměrně zachovává, protože je to konvence, kterou buildovací nástroje používají pro licenční poznámky, jež musí minifikaci přežít.

Kde se s tím setkáte

• Zmenšení stylopisu před nasazením do produkce
• Přeformátování minifikovaného CSS souboru pro čtení nebo úpravy
• Úprava stylů zkopírovaných z inspekčního panelu prohlížeče
• Sjednocení formátování před revizí CSS diffu

Často kladené otázky

Změní minifikace vzhled mé stránky?
Ne. Odstraní se jen bílé znaky a komentáře — každý selektor, vlastnost a hodnota zůstávají přesně tak, jak byly napsány.

Podporuje to SCSS nebo LESS?
Ne, jen čisté CSS. Váš SCSS nebo LESS nejprve zkompilujte do CSS.

Ukládá se můj stylopis?
Ne. Převod probíhá na serveru pouze pro tento jeden požadavek a poté se nic neuchovává.

Odstraní tento nástroj CSS pravidla, která moje stránka ve skutečnosti nepoužívá?
Ne. To je jiný úkol — obvykle nazývaný „odstranění nepoužívaného CSS“ nebo tree-shaking —, který vyžaduje porovnání vašeho CSS se skutečným HTML a JavaScriptem, aby bylo jasné, které selektory se vůbec kdy uplatní. Tento nástroj jen odstraňuje bílé znaky a nadbytečnou syntaxi a zkracuje hodnoty na nejmenší ekvivalentní tvar; každé pravidlo, které jste napsali, vyjde na druhé straně beze změny, jen kompaktnější. Pokud potřebujete, aby komentář minifikaci přežil — třeba licenční poznámku —, začněte jej znaky /*! místo /* a zachová se.