Preskočiť na hlavný obsah
LibraTool logoLibraTool

Skrášľovač CSS zadarmo

Sformátujte minifikovaný CSS s jednotným odsadením alebo ho minifikujte. Voliteľné abecedné zoradenie vlastností pre predvídateľné rozdiely.

Po načítaní funguje offline

Presuňte sem súbor alebo kliknutím vyberte

CSS · spracované vo vašom zariadení

alebo stlačte Ctrl+V na vloženie zo schránky

Prehľadávať súbory
Naformátovaný CSS
Výstup sa zobrazí tu…

Bežné použitia

  • Ladiaci CSS výrobySkontrolujte zmenšený CSS z produkčných webov v čitateľnom formáte a nájdite a spätne-inžinierujte štýlovanie.
  • Vykonávanie konzistentnosti CSS tímuSpustite CSS na kôň tímom cez konzistentný kras, aby boli rozdiely o obsahu, nie formátu.
  • Formátovanie CSS s predponou výrobcuCSS s preponou výrobcu (autoprefixer výstup) má často mnoho -webkit-, -moz-, -ms- variantov. Formátujte to na kontrolu.
  • Učte sa od Pro CSSŠtudujte CSS od známych systémov návrhu formátovaním ich kompilovaného výstupu.
  • Formátovanie CSS pre správy chýbPri podaní hlásenia o chybách CSS je formátovaný CSS oveľa ľahšie čitateľný a zrozumiteľný pre recenzentov.

Ako to funguje

Tento nástroj formátuje CSS pomocou ručne napísaného rekurzívneho parsera zabudovaného priamo do stránky — bez knižnice tretej strany, bez volania servera. Parser prechádza vaše CSS znak po znaku a správne spracúva reťazce v úvodzovkách, hodnoty url(), vnorené at-pravidlá a komentáre, ktoré by pomýlili jednoduchšie prístupy založené na regulárnych výrazoch.

  1. 1
    Tokenizácia na úrovni znakov
    Funkcia walkCss prechádza surový vstup po jednom znaku a sleduje stav úvodzoviek a hĺbku zátvoriek, takže bodkočiarky alebo zložené zátvorky vnútri url(), reťazcových hodnôt alebo komentárov sa nikdy nezamenia za štrukturálne oddeľovače.
  2. 2
    Rozdelenie blokov a deklarácií
    Keď skener nájde otváraciu zloženú zátvorku na najvyššej úrovni, extrahuje úvod (selektor alebo kľúčové slovo at-pravidla) a rekurzívne spracuje telo bloku — ktoré samo môže obsahovať vnorené pravidlá (@media, @supports, natívne vnáranie CSS) spracované v hlbšej úrovni rekurzie.
  3. 3
    Triedenie vlastností a odsadenie
    Deklarácie v rámci každého bloku sa zhromažďujú do skupiny, voliteľne sa zoradia abecedne podľa názvu vlastnosti a potom sa zapíšu so zvolenou šírkou odsadenia (2 alebo 4 medzery). Režim minifikácie úplne preskočí biele znaky a odstráni komentáre.
  4. 4
    Okamžitý výstup v prehliadači
    Výsledky sa zobrazujú počas písania cez hook useMemo — nič sa nikam neposiela. Formátovaný alebo minifikovaný CSS sa dá skopírovať do schránky alebo stiahnuť ako súbor .css a panel zobrazuje rozdiel veľkosti oproti originálu.

Súvisiace nástroje

🌐

Skrášľovač a minifikátor HTML

Pekne vytlačte alebo minifikujte HTML so správnym odsadením vnorenia. Zachováva obsah v blokoch <pre>, <script>, <style>.

Vyskúšajte
🗄️

Formátovač a skrášľovač SQL

Pekne vytlačte SQL dotazy so správnym odsadením, nastaviteľnými veľkými písmenami kľúčových slov a zalomeniami riadkov pri hlavných klauzulách. Funguje s ľubovoľným dialektom SQL.

Vyskúšajte
🗜️

Minifikátor a skrášľovač CSS

Minifikujte CSS na zmenšenie veľkosti súboru alebo skrášlite minifikované CSS pre čitateľnosť. Okamžite, vo vašom prehliadači.

Vyskúšajte

Často kladené otázky