Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis CSS-formaterer

Formater minifisert CSS med ensartet innrykk, eller minifiser den. Valgfri alfabetisk sortering av egenskaper for forutsigbare differ.

Fungerer uten nett når den er lastet

Slipp en fil her, eller klikk for å bla

CSS · behandles på enheten din

eller trykk Ctrl+V for å lime inn fra utklippstavlen

Bla gjennom filer
Formatert CSS
Utdata vises her…

Vanlige bruksområder

  • Feilsøk produksjon CSSSe minifisert CSS fra produksjonssteder i et lesbart format for å finne og reverse-engineer styling.
  • Håndhev Team CSS-stilKjør team-innsendt CSS gjennom en konsekvent beautifier slik at diffs handler om innhold, ikke formatering.
  • Formater leverandørprefikset CSSLeverandørprefikset CSS (autoprefixer-utdata) har ofte mange -webkit-, -moz-, -ms- varianter. Formater for inspeksjon.
  • Lær fra Pro CSSStuder CSS fra kjente designsystemer ved å formatere deres kompilerte utdata.
  • Formater CSS for feilrapporterNår du sender inn CSS-feil, er formatert CSS mye lettere for gjennomgangspersoner å lese og forstå.

Hvordan det fungerer

Verktøyet formaterer CSS med en håndskrevet rekursiv tolker bygget direkte inn i siden — ingen tredjepartsbibliotek, ingen serverkall. Tolkeren går gjennom CSS-en tegn for tegn og håndterer korrekt strenger i anførselstegn, url()-verdier, nestede at-regler og kommentarer som ville forvirret enklere regex-baserte løsninger.

  1. 1
    Tokenisering på tegnnivå
    Funksjonen walkCss skanner rå inndata ett tegn om gangen og holder rede på anførselstegn og parentesdybde, slik at semikolon eller klammer inne i url(), strengverdier eller kommentarer aldri forveksles med strukturelle skilletegn.
  2. 2
    Skille mellom blokker og deklarasjoner
    Når skanneren finner en åpningsklamme på toppnivå, henter den ut innledningen (selektoren eller at-regel-nøkkelordet) og behandler blokkinnholdet rekursivt — som selv kan inneholde nestede regler (@media, @supports, innebygd CSS-nesting) som håndteres på et dypere rekursjonsnivå.
  3. 3
    Sortering av egenskaper og innrykk
    Deklarasjonene i hver blokk samles, og sorteres eventuelt alfabetisk etter egenskapsnavn før de skrives ut med valgt innrykksbredde (2 eller 4 mellomrom). Minifiseringsmodus dropper alle mellomrom og fjerner kommentarer.
  4. 4
    Umiddelbart resultat i nettleseren
    Resultatet vises mens du skriver via en useMemo-hook — ingenting sendes noe sted. Den formaterte eller minifiserte CSS-en kan kopieres til utklippstavlen eller lastes ned som .css-fil, og panelet viser størrelsesforskjellen sammenlignet med originalen.

Relaterte verktøy

🌐

HTML-formaterer og -minifiserer

Formater eller minifiser HTML med korrekt nesting og innrykk. Bevarer innhold inni <pre>-, <script>- og <style>-blokker.

Prøv det
🗄️

SQL-formaterer og -rydder

Formater SQL-spørringer pent med korrekt innrykk, konfigurerbar bruk av store og små bokstaver i nøkkelord og linjeskift ved hovedklausuler. Fungerer med alle SQL-dialekter.

Prøv det
🗜️

CSS-minifiserer og -formaterer

Minifiser CSS for å redusere filstørrelsen, eller formater minifisert CSS for lesbarhet. Øyeblikkelig, i nettleseren.

Prøv det

Ofte stilte spørsmål