Hoe formateer ek geminifiseerde CSS sodat dit leesbaar is?

Plak die geminifiseerde CSS in die invoerboks met Verfraai gekies en kies Inspring van 2 of 4 spasies. Kiesers en deklarasies word op aparte lyne geplaas. Druk dan Kopieer of Laai af om 'n .css-lêer te kry.

Kan dit CSS-eienskappe alfabeties sorteer?

Ja. Merk Sorteer eienskappe alfabeties en die deklarasies in elke blok word volgens eienskapnaam gesorteer. Dit herorden slegs binne 'n blok, wat die resultaat kan verander as jy staatmaak op latere deklarasies wat vroeëres oorheers.

Hoe minifiseer ek CSS met hierdie hulpmiddel?

Kies Minifieer in plaas van Verfraai. Witruimte en kommentaar word verwyder, en 'n groottevergelyking wys hoeveel kleiner die uitset is. Laai af stoor dit as minified.css.

Hanteer dit @media-reëls, nessing en url()-waardes?

Ja. Die ontleder volg aanhalingstekens en hakies, sodat kommapunte of krulhakies binne url() of stringe nie deklarasies verdeel nie. Geneste blokke soos @media, @supports en inheemse CSS-nessing word op dieper vlakke ingespring.

Word my stylblad êrens opgelaai?

Nee. Die ontleder is in die bladsy geskryf en formateer jou CSS in die blaaier terwyl jy tik. Niks word na 'n bediener gestuur nie, en geen derdeparty-formateringsbiblioteek word gebruik nie.

Is dit regtig gratis?

Ja. Elke instrument is gratis om te gebruik, sonder 'n rekening en sonder 'n kredietkaart. Die werk loop op jou toestel eerder as op ons bedieners, en dit is wat dit gratis hou om te loop.

Ja. Dit werk in huidige mobiele blaaiers op iOS en Android, sonder om iets te installeer.

🎨

Gratis CSS Verfraaier

Formateer verklein CSS leesbaar met eenvormige inkeping, of verklein dit. Opsionele alfabetiese sortering van eienskappe vir voorspelbare verskille.

Loop in jou blaaierGeen aanmelding, geen opspringers nieGeen aanmelding benodigGratis vir altyd

Werk vanlyn sodra gelaai

Inspring:

Sorteer eienskappe alfabeties

Los 'n lêer hier, of klik om te soek

CSS · op jou toestel verwerk

of druk Ctrl+V om vanaf jou knipbord te plak

Blaai deur lêers

Geminifiseerde / rommelige CSS

Opgemaakte CSS

Uitvoer verskyn hier…

Algemene gebruike

Ontfoute Produksie-CSSSien verminktude CSS van produksie-sites in n lesbare formaat om styling op te spoor en agteruit-te ingeneer.
Handhaafspan CSS-stylVoer span-ingereikde CSS deur n konsekwente skoonmaker sodat verskille oor inhoud gaan, nie formattering.
Formatteer leveransier-voorvoegde CSSLeveransier-voorvoegde CSS (autoprefixer-uitvoer) het dikwels baie -webkit-, -moz-, -ms-variante. Formatteer om te inspekteer.
Leer van Pro CSSBestudeer CSS van beroemde ontwerpsisteme deur hul saamgestelde uitvoer te formateer.
Formatteer CSS vir bugrappoorteBy die indien van CSS-gerwe is geformateerde CSS baie makliker vir hersieners om te lees en te verstaan.

Hoe dit werk

Hierdie nutsprogram formateer CSS met 'n handgeskrewe rekursiewe ontleder direk in die bladsy gebou — geen derdeparty-biblioteek, geen bedienerbelling nie. Die ontleder loop deur jou CSS karakter vir karakter, en hanteer korrek aangehaalde strings, url()-waardes, geneste at-reëls, en kommentaar wat eenvoudiger reëlmatige-uitdrukking-benaderings sou verwar.

1
Karakter-vlak-tokenisering
Die walkCss-funksie skandeer die rou toevoer een karakter op 'n slag, en spoor aanhalingstoestand en hakiediepte na sodat kommapunte of hakies binne url(), string-waardes, of kommentaar nooit vir strukturele skeitekens aangesien word nie.
2
Blok- en verklaringskeiding
Wanneer die skandeerder 'n boonste-vlak-oopmaakhaak vind, onttrek dit die inleiding (die kieser of at-reël-sleutelwoord) en verwerk rekursief die bloklyf — wat self geneste reëls (@media, @supports, inheemse CSS-nesting) kan bevat wat op 'n dieper rekursiediepte hanteer word.
3
Eienskap-sortering en inkeping
Verklarings binne elke blok word in 'n reeks versamel, dan opsioneel alfabeties volgens eienskapnaam gesorteer voordat dit met die gekose inkepingswydte (2 of 4 spasies) geskryf word. Verkleiningsmodus slaan spasiëring heeltemal oor en strip kommentaar.
4
Oombliklike in-blaaier-uitset
Resultate verskyn terwyl jy tik via 'n useMemo-hoek — niks word iewers gestuur nie. Die geformateerde of verkleinde CSS kan na die knipbord gekopieer of as 'n .css-lêer afgelaai word, en die paneel wys die grootteverskil vergeleke met die oorspronklike.