Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis CSS-formatering

Formatera minifierad CSS med enhetlig indentering, eller minifiera den. Valfri alfabetisk sortering av egenskaper för förutsägbara diffar.

Fungerar offline när den väl lästs in

Släpp en fil här, eller klicka för att bläddra

CSS · bearbetas på din enhet

eller tryck Ctrl+V för att klistra in från urklipp

Bläddra bland filer
Formaterad CSS
Utdata visas här…

Vanliga användningar

  • Felsök produktions CSSVisa minifierad CSS från produktionsplatser i ett läsbart format för att hitta och reverse-engineering styling.
  • Framtvinga team CSS-stilKör team-inlämnad CSS genom en konsekvent vacker för så diffs handlar om innehål, inte formatering.
  • Formatera leverantörsmärkta CSSLeverantörsmärkt CSS (autoprefixer-utgång) har ofta massor av -webkit-, -moz-, -ms- varianter. Formatera för inspektion.
  • Lär dig från Pro CSSStudera CSS från berömda designsystem genom att formatera deras kompilerad utgång.
  • Formatera CSS för felrapporterVid inlämning av CSS-fel är formaterad CSS mycket lättare för granskare att läsa och förstå.

Så här fungerar det

Det här verktyget formaterar CSS med en handskriven rekursiv tolk inbyggd direkt i sidan — inget tredjepartsbibliotek, inget serveranrop. Tolken går igenom din CSS tecken för tecken, och hanterar korrekt citerade strängar, url()-värden, nästlade at-regler och kommentarer som skulle förvirra enklare regex-baserade metoder.

  1. 1
    Tokenisering på teckennivå
    Funktionen walkCss skannar rå indata ett tecken i taget, och håller reda på citattillstånd och parentesdjup så att semikolon eller klamrar inuti url(), strängvärden eller kommentarer aldrig misstas för strukturella avgränsare.
  2. 2
    Uppdelning av block och deklarationer
    När skannern hittar en klammerparentes på toppnivå extraherar den preludet (selektorn eller at-regelnyckelordet) och bearbetar rekursivt blockets innehåll — som i sig kan innehålla nästlade regler (@media, @supports, inbyggd CSS-nästling) som hanteras på ett djupare rekursionsdjup.
  3. 3
    Egenskapssortering och indentering
    Deklarationer inom varje block samlas i en följd, sorteras sedan valfritt alfabetiskt efter egenskapsnamn innan de skrivs ut med den valda indenteringsbredden (2 eller 4 mellanslag). Minifieringsläge hoppar över blanktecken helt och tar bort kommentarer.
  4. 4
    Omedelbar utdata i webbläsaren
    Resultat visas medan du skriver via en useMemo-hook — inget skickas någonstans. Den formaterade eller minifierade CSS:en kan kopieras till urklipp eller laddas ned som en .css-fil, och panelen visar storleksskillnaden jämfört med originalet.

Relaterade verktyg

🌐

HTML-formatering och minifierare

Snygg utskrift eller minifiering av HTML med korrekt kapslingsdragning. Bevarar innehåll inuti <pre>-, <script>- och <style>-block.

Prova det
🗄️

SQL-formaterare och -formatering

Snygg utskrift av SQL-frågor med korrekt indragning, konfigurerbart nyckelordsskiftläge och radbrytningar på viktiga klausuler. Fungerar med valfri SQL-dialekt.

Prova det
🗜️

CSS-minifierare och -formatering

Minifiera CSS för att minska filstorleken eller formatera minifierad CSS för läsbarhet. Direkt, i din webbläsare.

Prova det

Vanliga frågor