Jak používat

Vložte CSS do vstupního pole, otevřete soubor .css nebo vyzkoušejte příklad.
Vyberte Beautify pro čitelný kód nebo Minify pro nejmenší výstup.
Při zkrášlování vyberte 2 mezery, 4 mezery nebo tabulátory.
Zkopírujte výsledek nebo si ho stáhněte jako soubor .css. Pokud nejsou složené závorky nebo uvozovky správně spárované, chyba zobrazí řádek a sloupec.

Jak to funguje

Formátovač nejprve rozdělí styly na tokeny: řetězce v jednoduchých nebo dvojitých uvozovkách, hodnoty url(…), komentáře, složené závorky a středníky. Protože řetězce a url() jsou samostatné tokeny, středník uvnitř data URI nebo složená závorka uvnitř content: „{ }“ nikdy nerozhodí strukturu a jejich obsah se zkopíruje přesně.

Režim Beautify umístí každý selektor ze seznamu selektorů na vlastní řádek, přidá mezery kolem kombinátorů potomka, sourozence a souseda (>, ~, +) a každou deklaraci zapíše na vlastní řádek jako „vlastnost: hodnota;“. Bloky uvnitř @media, @supports, @layer, @container a nativního vnořování CSS jsou odsazeny o jednu úroveň na každou hloubku. Chybějící středník za poslední deklarací bloku se doplní. Komentáře zůstávají na svém místě.

Režim Minify odstraní komentáře (kromě licenčních poznámek /*! … */), sbalí bílé znaky, odstraní mezery kolem složených závorek, dvojteček, středníků, čárek a kombinátorů selektorů a vypustí středník před každou uzavírací složenou závorkou. Mezery, které mění význam, zůstávají zachovány: kombinátor potomka v „.a .b“, mezera v „a :focus“ a mezery uvnitř hodnot jako calc(100% - 2px). „! important“ se normalizuje na „!important“.

Nástroj hodnoty nepřepisuje: barvy, jednotky a nuly zůstávají tak, jak byly zapsány, a pravidla se neslučují ani nepřeřazují. Soubory SCSS nebo Less s prostým vnořováním obvykle fungují, ale jejich vlastní syntaxe, jako jsou řádkové komentáře // nebo mixiny, není podporována.

Příklady

Čtení minifikovaného souboru frameworku

Vložte jednořádkový úryvek souboru bootstrap.min.css a zvolte Beautify se 2 mezerami. Uvidíte každé pravidlo, media queries a jejich vnořená pravidla na samostatných odsazených řádcích.

Nasazení ručně psaného CSS souboru

Minifikujte 12 KB CSS soubor s komentáři a odsazením před vložením přímo do šablony e-mailu nebo do hlavičky stránky. Souhrn zobrazí počet znaků před a po.

Nalezení chybějící závorky

CSS soubor se přestane uplatňovat v polovině. Formátovač ohlásí „Tento znak { není nikdy uzavřen odpovídajícím znakem }“ spolu s řádkem pravidla, kterému chybí uzavírací závorka.

Časté dotazy

Je minifikované CSS z tohoto nástroje bezpečné pro použití v produkci?

Odstraňuje pouze komentáře a bílé znaky, které CSS ignoruje, takže se pravidla chovají stejně. Neprovádí hlubší optimalizace nástrojů pro build, jako je slučování pravidel nebo zkracování barev, takže výsledek může být o něco větší než jejich výstup.

Proč se v „a :focus“ zachovává mezera?

V selektoru mezera funguje jako kombinátor potomka. „a :focus“ znamená zaměřený prvek uvnitř odkazu, zatímco „a:focus“ znamená zaměřený odkaz. Odstranění této mezery by změnilo, které prvky se vyberou.

Umí formátovat SCSS nebo Less?

Běžná vnořená pravidla se formátují správně. Syntaxe specifická pro preprocesory, jako jsou komentáře //, mixiny s argumenty nebo bloky @if, se nerozpoznává a může být naformátována neobvykle, proto výsledek zkontrolujte.

Odstraňují se při minifikaci licenční komentáře?

Komentáře začínající /*! se zachovávají; to je obvyklá konvence pro oznámení o licencích a autorských právech. Všechny ostatní komentáře se odstraňují.

Soukromí

Vaše CSS se zpracovává pouze ve vašem prohlížeči. Nic se nenahrává, neukládá ani nezahrnuje do analýz.