Přeskočit na hlavní obsah
LibraTool logoLibraTool

Zkrášlovač CSS zdarma

Naformátujte minifikované CSS s jednotným odsazením, nebo ho minifikujte. Volitelné abecední řazení vlastností pro přehledné rozdíly.

Funguje offline po načtení

Přetáhněte soubor sem nebo klikněte pro výběr

CSS · zpracováno na vašem zařízení

nebo stiskněte Ctrl+V pro vložení ze schránky

Procházet soubory
Formátované CSS
Výstup se zobrazí zde…

Běžná použití

  • Ladění CSS produkciZobrazte minifikované CSS z produkčních webů v čitelném formátu pro vyhledání a zpětné inženýrství stylů.
  • Vynutit styl CSS týmuSpusťte CSS odeslaný týmem skrze konzistentní vláčko, aby se diffs týkaly obsahu, ne formátování.
  • Formátujte CSS s předponou prodejceCSS s předponou prodejce (výstup autoprefixeru) má často spoustu variant -webkit-, -moz-, -ms-. Formátujte pro kontrolu.
  • Učit se od profesionálního CSSProstudujte CSS od slavných designových systémů formátováním jejich kompilovaného výstupu.
  • Formátujte CSS pro hlášení chybPři podání zpráv o chybách CSS je formátovaný CSS mnohem snazší pro recenzenty číst a pochopit.

Jak to funguje

Tento nástroj formátuje CSS pomocí ručně napsaného rekurzivního parseru zabudovaného přímo do stránky — bez knihovny třetí strany, bez volání serveru. Parser prochází vaše CSS znak po znaku a správně zpracovává řetězce v uvozovkách, hodnoty url(), vnořená at-pravidla a komentáře, které by zmátly jednodušší přístupy založené na regulárních výrazech.

  1. 1
    Tokenizace na úrovni znaků
    Funkce walkCss prochází surový vstup po jednom znaku a sleduje stav uvozovek a hloubku závorek, takže středníky nebo složené závorky uvnitř url(), řetězcových hodnot nebo komentářů nejsou nikdy zaměněny za strukturální oddělovače.
  2. 2
    Oddělení bloků a deklarací
    Když skener najde otevírající složenou závorku na nejvyšší úrovni, extrahuje předsklad (selektor nebo klíčové slovo at-pravidla) a rekurzivně zpracuje tělo bloku — které samo může obsahovat vnořená pravidla (@media, @supports, nativní vnořování CSS) zpracovaná v hlubší úrovni rekurze.
  3. 3
    Řazení vlastností a odsazení
    Deklarace v každém bloku se shromáždí do řady a volitelně seřadí abecedně podle názvu vlastnosti, než se zapíší se zvolenou šířkou odsazení (2 nebo 4 mezery). Režim minifikace zcela přeskakuje bílé znaky a odstraňuje komentáře.
  4. 4
    Okamžitý výstup v prohlížeči
    Výsledky se zobrazují, jak píšete, přes hook useMemo — nic se nikam neodesílá. Formátované nebo minifikované CSS lze zkopírovat do schránky nebo stáhnout jako soubor .css a panel zobrazuje rozdíl velikosti oproti originálu.

Související nástroje

🌐

Zkrášlovač a minifikátor HTML

Krásně formátujte nebo minifikujte HTML se správným odsazením vnořování. Zachovává obsah uvnitř bloků <pre>, <script>, <style>.

Vyzkoušet
🗄️

Formátovač a zkrášlovač SQL

Krásně formátujte SQL dotazy se správným odsazením, konfigurovatelným velkým/malým písmem klíčových slov a zalomením řádků u hlavních klauzulí. Funguje s libovolným dialektem SQL.

Vyzkoušet
🗜️

Minifikátor a krásník CSS

Minifikujte CSS pro zmenšení velikosti souboru nebo zkrášlete minifikované CSS pro čitelnost. Okamžitě, ve vašem prohlížeči.

Vyzkoušet

Časté dotazy