Ga naar hoofdinhoud
LibraTool logoLibraTool

Gratis CSS-verfraaiier

Maak geminificeerde CSS leesbaar met consistente inspringing, of minificeer CSS. Optioneel alfabetisch sorteren van eigenschappen voor voorspelbare diffs.

Werkt offline na het laden

Sleep een bestand hierheen of klik om te bladeren

CSS · verwerkt op je apparaat

of druk op Ctrl+V om vanaf het klembord te plakken

Bestanden bladeren
Opgemaakte CSS
Uitvoer verschijnt hier…

Veelvoorkomend gebruik

  • Productie-CSS opsporenBekijk geminificeerde CSS van productiesites in leesbare indeling om styling te vinden en om te keren.
  • Team-CSS-stijl AfdwingenVoer CSS in dat door het team is ingediend via een consistente beautifier uit, zodat diff's over inhoud gaan, niet over opmaak.
  • Format Vendor-Prefixed CSSCSS met vendor-voorvoegsel (autoprefixer-uitvoer) heeft vaak veel -webkit-, -moz-, -ms- varianten. Format om te inspecteren.
  • Leer van Pro CSSBestudeer CSS van beroemde designsystemen door hun gecompileerde uitvoer op te maken.
  • Format CSS voor BugmeldingenBij het indienen van CSS-bugs is opgemaakt CSS veel gemakkelijker voor reviewers om te lezen en te begrijpen.

Hoe het werkt

Deze tool maakt CSS op met een zelfgeschreven recursieve parser die direct in de pagina zit — geen bibliotheek van derden, geen serveraanroep. De parser loopt teken voor teken door je CSS en verwerkt strings tussen aanhalingstekens, url()-waarden, geneste at-rules en commentaar correct, die eenvoudigere regex-benaderingen in de war zouden brengen.

  1. 1
    Tokenisatie op tekenniveau
    De functie walkCss doorloopt de ruwe invoer teken voor teken en houdt de status van aanhalingstekens en de diepte van haakjes bij, zodat puntkomma's of accolades binnen url(), stringwaarden of commentaar nooit voor structurele scheidingstekens worden aangezien.
  2. 2
    Scheiding van blokken en declaraties
    Als de scanner een openingsaccolade op het hoogste niveau vindt, haalt hij de prelude (de selector of het at-rule-sleutelwoord) eruit en verwerkt hij de inhoud van het blok recursief — die zelf weer geneste regels kan bevatten (@media, @supports, native CSS-nesting) die op een dieper recursieniveau worden verwerkt.
  3. 3
    Eigenschappen sorteren en inspringen
    Declaraties binnen elk blok worden verzameld en optioneel alfabetisch op eigenschapsnaam gesorteerd voordat ze worden weggeschreven met de gekozen inspringing (2 of 4 spaties). De minify-modus slaat witruimte volledig over en verwijdert commentaar.
  4. 4
    Directe uitvoer in de browser
    Resultaten verschijnen terwijl je typt via een useMemo-hook — er wordt niets verstuurd. De opgemaakte of verkleinde CSS kan naar het klembord worden gekopieerd of als .css-bestand worden gedownload, en het paneel toont het verschil in grootte ten opzichte van het origineel.

Gerelateerde tools

🌐

HTML-verfraaiier en -minifier

Druk HTML netjes af of minimaliseer het met juiste nestinginspringing. Behoudt inhoud binnen <pre>-, <script>- en <style>-blokken.

Probeer het
🗄️

SQL-formatter en -verfraaiier

Druk SQL-query's netjes af met juiste inspringing, instelbaar hoofdlettergebruik voor sleutelwoorden en regeleinden bij belangrijke clausules. Werkt met elk SQL-dialect.

Probeer het
🗜️

CSS-minifier en -verfraaiier

Minimaliseer CSS om de bestandsgrootte te verkleinen of verfraai geminimaliseerde CSS voor leesbaarheid. Direct, in je browser.

Probeer het

Veelgestelde vragen