Preskočiť na obsah
TextArray
100% lokálne

Formátovanie CSS

Prehľadne naformátujte minifikované alebo neusporiadané CSS na čitateľné pravidlá.

Vstup
Výstup

Formátovanie CSS

Vložte minifikované alebo ručne rozhádzané CSS a nástroj ho rozbalí do prehľadného, čitateľného štýlu: jedna deklarácia na riadok, selektor s otváracou zloženou zátvorkou na jednom riadku, zatváracia zátvorka na vlastnom a prázdny riadok medzi pravidlami najvyššej úrovne. Vnorené bloky ako @media, @supports a vnorené selektory sa odsadia o úroveň hlbšie, takže je štruktúra štýlu jasná na prvý pohľad.

Nástroj číta CSS znak po znaku, nie hrubým delením podľa vzorov, takže sa nezasekne ani na zložitom obsahu. Reťazce si zachovajú presný obsah, takže content: "a{b}" prežije aj so zátvorkami vnútri. Obsah url() sa kopíruje doslovne, takže data URI s vlastnými bodkočiarkami a dvojbodkami — url(data:image/png;base64,...) — zostane úplne nedotknutý. Komentáre ostávajú slovo za slovom na vlastnom riadku v aktuálnom odsadení.

Výstup ladia tri možnosti. Odsadenie prepína medzi dvomi medzerami, štyrmi medzerami alebo tabulátorom. Každý selektor na vlastnom riadku dá každý selektor zoznamu oddeleného čiarkami na samostatný riadok, čo sa hodí pri dlhých zoskupených pravidlách a čistejších rozdieloch. Prázdny riadok medzi pravidlami sa dá vypnúť, keď chcete štýl kompaktnejší. Živé počítadlo počas písania sčítava pravidlá, deklarácie a riadky výstupu, pričom počet pravidiel je zvýraznený.

Ide o náprotivok minifikácie CSS: použite ho, keď chcete znova upraviť skomprimovaný produkčný súbor, zjednotiť nekonzistentný kód od viacerých autorov alebo si len prečítať štýl, ktorý ste nepísali. Všetko beží výhradne vo vašom prehliadači — vaše CSS sa nikam nenahráva.

Časté otázky

Zmení mi nástroj hodnoty alebo názvy vlastností?
Nie. Iba pridáva a normalizuje medzery a zalomenia riadkov. Selektory, vlastnosti, hodnoty, farby, jednotky, obsah url() aj komentáre ostanú presne tak, ako boli napísané.
Pokazia formátovanie zátvorky v reťazcoch alebo v url()?
Nie. Znakový skener sleduje stav reťazcov, komentárov a url(), takže content: "a{b}" a url(data:...;base64,...) sa kopírujú doslovne a nikdy sa neberú ako štruktúra.
Čo robí možnosť „Každý selektor na vlastnom riadku"?
Dá každý selektor zoznamu oddeleného čiarkami na samostatný riadok, takže z h1, h2, h3 budú tri riadky nad otváracou zátvorkou. Čiarky vnútri :is() alebo atribútových selektorov sa nedelia.
Dokáže opraviť neplatné CSS?
Formátuje najlepšie, ako sa dá, a na chybnom vstupe nikdy nezlyhá, ale CSS nevaliduje ani neopravuje. Chýbajúce zátvorky alebo zvyškové znaky rozloží podľa toho, čo štruktúra dovolí.
Nahráva sa moje CSS niekam?
Nie. Formátovanie beží výhradne vo vašom prehliadači a vaše CSS nikdy neopustí vaše zariadenie.