Gratis CSS-formaterer Online
Formater komprimert eller rotete CSS øyeblikkelig — kjører i nettleseren, ingen opplastinger.
CSS-inndata
Formatert CSS
Eksempler på CSS-formatering
Minifisert CSS er vanskelig å lese; formatering legger til innrykk og linjeskift. Eksempel:
Beholder- og knappstiler
Minifisert inndata:
Formatert utdata:
Klikk Eksempel over for å laste minifisert CSS inn i editoren.
Hva er en CSS-formaterer?
CSS (Cascading Style Sheets) stilsetter hvert nettsted. Minifisert eller dårlig formatert CSS er vanskelig å lese og feilsøke. En CSS-formaterer legger til innrykk og linjeskift i rå eller minifisert CSS slik at du ser selektorer, egenskaper og nesting tydelig. W3C CSS-spesifikasjonene definerer språket.
Verktøyet parser CSS-en din og formaterer den på nytt med jevnt innrykk. Det kjører helt i nettleseren din. Ingenting sendes til server, så det er trygt med produksjons-stilark. For minifisering, bruk CSS-minifiserer. For validering, CSS-validator.
Slik bruker du verktøyet
Lim inn eller last opp
Kopier CSS og lim inn i venstre editor. Du kan også klikke Last opp for å åpne en .css-fil. Eksempel laster eksempeldata. Ugyldig CSS viser feil.
Sjekk utdata
Høyre panel oppdateres automatisk. Gyldig CSS formateres med riktig innrykk. Bruk Minifiser for å fjerne whitespace og få en kompakt produksjonsversjon.
Kopier eller last ned
Bruk Kopier for å legge resultatet på utklippstavlen, eller Last ned for å lagre som fil. For SCSS eller Less, kompiler først med SCSS til CSS eller Less til CSS.
Slik fungerer formatereren
Verktøyet parser CSS-en din og formaterer den på nytt med jevnt innrykk. Selektorer, egenskaper og regler oppdages; krøllparenteser og semikolon beholdes. W3C CSS-spesifikasjonene definerer språket. Formatering legger til linjeskift og mellomrom for lesbarhet uten å endre oppførsel. At-regler som @media, @keyframes og @import håndteres. Kjøring skjer i nettleseren din — ingenting sendes til server.
Byggeverktøy som Vite, Webpack eller Parcel gir ofte minifisert CSS. Å lime inn utdata her gjør lesbart. For SCSS eller Less-kilde, kompiler først med SCSS til CSS eller Less til CSS, deretter formater.
Når CSS-formatering hjelper
De fleste utviklere trenger en formaterer når de inspiserer stiler fra produksjonssider, feilsøker tredjeparts-CSS eller gjennomgår minifisert utdata fra byggeverktøy. Å lime inn komprimert CSS her gjør selektorer og regler synlige med én gang. Bootstrap- eller Tailwind-kompilert utdata er ofte minifisert — formatering avslører strukturen. Du kan bruke Claude eller ChatGPT til å generere CSS for komplekse layouter, og formater utdata her.
Formatering hjelper også før du deler stiler med teamet eller gjennomgår pull requests. For leverandørprefiks, bruk CSS-prefiks. For inline-stiler (f.eks. e-post), CSS til inline. For validering, CSS-validator.
Ofte stilte spørsmål
Er dataene mine private?
Ja. Formatering skjer helt i nettleseren din. Ingen data sendes til server. Du kan bekrefte dette i nettleserens Nettverk-fane.
Støtter det SCSS eller Less?
Verktøyet formaterer plain CSS. For SCSS eller Less, kompiler først med SCSS til CSS eller Less til CSS, deretter formater utdata.
Hva gjør Minifiser?
Den fjerner whitespace, linjeskift og kommentarer fra formatert utdata og gir den minste versjonen for produksjon. Det finnes også en egen side for CSS-minifiserer.
Bevarer den kommentarer?
Formatering bevarer kommentarer. Minifisering kan fjerne dem avhengig av minifiserer. Sjekk utdata før produksjon.
Hva med egendefinerte CSS-egenskaper?
CSS-variabler (--var-name) støttes. Formatereren håndterer moderne CSS-syntaks inkludert egendefinerte egenskaper, @media og @keyframes.