Přeskočit na obsah
TextArray
100% lokálně

Formátování CSS

Přehledně naformátujte minifikované nebo neuspořádané CSS na čitelná pravidla.

Vstup
Výstup

Formátování CSS

Vložte minifikované nebo ručně rozházené CSS a nástroj ho rozbalí do přehledného, čitelného stylu: jedna deklarace na řádek, selektor s otevírací složenou závorkou na jednom řádku, zavírací závorka na vlastním a prázdný řádek mezi pravidly nejvyšší úrovně. Vnořené bloky jako @media, @supports a vnořené selektory se odsadí o úroveň hlouběji, takže je struktura stylu jasná na první pohled.

Nástroj čte CSS znak po znaku, ne hrubým dělením podle vzorů, takže se nezasekne ani na složitém obsahu. Řetězce si zachovají přesný obsah, takže content: "a{b}" přežije i se závorkami uvnitř. Obsah url() se kopíruje doslovně, takže data URI s vlastními středníky a dvojtečkami — url(data:image/png;base64,...) — zůstane úplně nedotčené. Komentáře zůstávají slovo za slovem na vlastním řádku v aktuálním odsazení.

Výstup ladí tři volby. Odsazení přepíná mezi dvěma mezerami, čtyřmi mezerami nebo tabulátorem. Každý selektor na vlastním řádku dá každý selektor seznamu odděleného čárkami na samostatný řádek, což se hodí u dlouhých seskupených pravidel a čistších rozdílů. Prázdný řádek mezi pravidly lze vypnout, když chcete styl kompaktnější. Živé počítadlo během psaní sčítá pravidla, deklarace a řádky výstupu, přičemž počet pravidel je zvýrazněný.

Jde o protějšek minifikace CSS: použijte ho, když chcete znovu upravit zkomprimovaný produkční soubor, sjednotit nekonzistentní kód od více autorů nebo si jen přečíst styl, který jste nepsali. Vše běží výhradně ve vašem prohlížeči — vaše CSS se nikam nenahrává.

Časté dotazy

Změní nástroj hodnoty nebo názvy vlastností?
Ne. Pouze přidává a normalizuje mezery a zalomení řádků. Selektory, vlastnosti, hodnoty, barvy, jednotky, obsah url() i komentáře zůstanou přesně tak, jak byly napsané.
Rozbijí formátování závorky v řetězcích nebo v url()?
Ne. Znakový skener sleduje stav řetězců, komentářů a url(), takže content: "a{b}" a url(data:...;base64,...) se kopírují doslovně a nikdy se neberou jako struktura.
Co dělá volba „Každý selektor na vlastním řádku"?
Dá každý selektor seznamu odděleného čárkami na samostatný řádek, takže z h1, h2, h3 budou tři řádky nad otevírací závorkou. Čárky uvnitř :is() nebo atributových selektorů se nedělí.
Dokáže opravit neplatné CSS?
Formátuje nejlépe, jak to jde, a na chybném vstupu nikdy neselže, ale CSS nevaliduje ani neopravuje. Chybějící závorky nebo zbytkové znaky rozloží podle toho, co struktura dovolí.
Nahrává se moje CSS někam?
Ne. Formátování běží výhradně ve vašem prohlížeči a vaše CSS nikdy neopustí vaše zařízení.