Hoppa till innehåll
TextArray
100% lokalt

CSS-formaterare

Försköna förminskad eller rörig CSS till rena, indragna, läsbara regler.

Inmatning
Utmatning

CSS-formaterare

Klistra in minifierad eller handtrasslad CSS och den här formateraren expanderar den till en ren, läsbar stilmall: en deklaration per rad, väljaren och dess inledande klammerparentes på en rad, den avslutande klammerparentesen på egen hand och en tom rad mellan regler på översta nivån. Kapslade block som @media, @supports och kapslade väljare är indragna en nivå djupare, så strukturen på arket är uppenbar med ett ögonkast.

Verktyget läser din CSS tecken för tecken snarare än att dela upp den med naiva mönster, så det går aldrig sönder på knepigt innehåll. Strängar behåller sitt exakta innehåll, så innehåll: "a{b}" överlever med hängslen inuti. url()-kroppar kopieras ordagrant, så en data-URI med egna semikolon och kolon — url(data:image/png;base64,...) — lämnas helt ifred. Kommentarer står ord för ord på sin egen rad vid den aktuella indragen.

Tre alternativ ställer in utgången. Indrag växlar mellan två blanksteg, fyra blanksteg eller en tabb. En väljare per rad placerar varje väljare i en kommalista på sin egen rad, praktiskt för långa grupperade regler och renare skillnader. Blank linje mellan regler kan stängas av när du vill att arket är mer kompakt. Live-uppräkningen räknar reglerna, deklarationerna och utdataraderna medan du skriver, med regelantalet markerat.

Detta är motsvarigheten till en CSS-minifierare: använd den för att göra en komprimerad produktionsfil redigerbar igen, för att formatera om inkonsekvent kod från flera författare, eller helt enkelt för att läsa en stilmall du inte skrev. Allt körs helt i din webbläsare – din CSS laddas aldrig upp någonstans.

FAQ

Ändrar det mina CSS-värden eller egendomsnamn?
Nej. Det lägger bara till och normaliserar blanksteg och radbrytningar. Väljare, egenskaper, värden, färger, enheter, url()-kroppar och kommentarer bevaras alla exakt som skrivna.
Kommer klammerparenteser inuti strängar eller url() att bryta formateringen?
Nej. En teckenskanner spårar sträng, kommentar och url()-tillstånd, så innehåll: "a{b}" och url(data:...;base64,...) kopieras ordagrant och behandlas aldrig som struktur.
Vad gör "En väljare per rad"?
Den placerar varje väljare i en kommaseparerad lista på sin egen rad, så h1, h2, h3 blir tre rader ovanför den öppna klammerparentesen. Komma inuti :is() eller attributväljare delas aldrig.
Kan det fixa ogiltig CSS?
Det formaterar på bästa sätt och aldrig fel på trasig indata, men det validerar eller reparerar inte din CSS. Saknade hängslen eller herrelösa tecken läggs ut så väl som deras struktur tillåter.
Laddas min CSS upp någonstans?
Nej. Formateringen körs helt i din webbläsare och din CSS lämnar aldrig din enhet.