Gå til hovedindhold
LibraTool logoLibraTool

Gratis CSS-forskønner

Formatér minificeret CSS med ensartet indrykning, eller minificér den. Valgfri alfabetisk sortering af egenskaber for forudsigelige diffs.

Virker offline, når den er indlæst

Slip en fil her, eller klik for at vælge

CSS · behandles på din enhed

eller tryk Ctrl+V for at indsætte fra udklipsholderen

Gennemse filer
Formateret CSS
Output vises her…

Almindelige anvendelser

  • Fejlfind produktion CSSVis minificeret CSS fra produktionswebsteder i et læseligt format til at finde og reverse-engineer styling.
  • Håndhæv Team CSS-stilKør teamindsendt CSS gennem en konsekvent beautifier så diffs handler om indhold, ikke formatering.
  • Formatér vendor-præfikseret CSSVendor-præfikseret CSS (autoprefixer-output) har ofte mange -webkit-, -moz-, -ms- varianter. Formatér til inspektion.
  • Lær fra Pro CSSStudér CSS fra berømte designsystemer ved at formatere deres kompileret output.
  • Formatér CSS til fejlrapporterNår indsendt CSS-fejl er formateret CSS meget lettere for reviewere at læse og forstå.

Sådan fungerer det

Værktøjet formaterer CSS med en håndskrevet rekursiv parser bygget direkte ind i siden — intet tredjepartsbibliotek, intet serverkald. Parseren gennemgår din CSS tegn for tegn og håndterer korrekt citerede strenge, url()-værdier, indlejrede at-regler og kommentarer, som ville forvirre simplere regex-baserede løsninger.

  1. 1
    Tokenisering på tegnniveau
    Funktionen walkCss gennemgår det rå input ét tegn ad gangen og holder styr på citattegn og parentesdybde, så semikoloner eller klammer inde i url(), strengværdier eller kommentarer aldrig forveksles med strukturelle skilletegn.
  2. 2
    Adskillelse af blokke og deklarationer
    Når scanneren finder en åbnende klamme på øverste niveau, udtrækker den indledningen (selektoren eller at-regel-nøgleordet) og behandler blokkens indhold rekursivt — som selv kan indeholde indlejrede regler (@media, @supports, indbygget CSS-nesting), der håndteres på et dybere rekursionsniveau.
  3. 3
    Sortering af egenskaber og indrykning
    Deklarationer i hver blok samles og sorteres eventuelt alfabetisk efter egenskabsnavn, før de skrives ud med den valgte indrykningsbredde (2 eller 4 mellemrum). Minificeringstilstand udelader alt blanktegn og fjerner kommentarer.
  4. 4
    Øjeblikkeligt output i browseren
    Resultaterne vises, mens du skriver, via en useMemo-hook — intet sendes nogen steder hen. Den formaterede eller minificerede CSS kan kopieres til udklipsholderen eller downloades som en .css-fil, og panelet viser størrelsesforskellen i forhold til originalen.

Relaterede værktøjer

🌐

HTML-forskønner og -minifier

Udskriv eller minifiér HTML pænt med korrekt indlejrings­indrykning. Bevarer indhold inde i <pre>-, <script>- og <style>-blokke.

Prøv det
🗄️

SQL-formatter og -forskønner

Udskriv SQL-forespørgsler pænt med korrekt indrykning, konfigurerbar nøgleordsskrivning og linjeskift på større klausuler. Virker med enhver SQL-dialekt.

Prøv det
🗜️

CSS-minifier og -formatter

Minifiér CSS for at reducere filstørrelsen eller formater minificeret CSS for læsbarhed. Øjeblikkeligt, i din browser.

Prøv det

Ofte stillede spørgsmål