CSS Formatter
Formatteer en verfraai CSS met syntaxismarkering
Invoer-CSS
Geformatteerde CSS
Voorbeelden van CSS-opmaak
Geminificeerde CSS is moeilijk leesbaar; opmaak voegt inspringing en regeleinden toe. Voorbeeld:
Container- en knopstijlen
Geminificeerde invoer:
Geformatteerde uitvoer:
Klik op Voorbeeld hierboven om geminiificeerde CSS in de editor te laden.
Wat is een CSS-formatter?
CSS (Cascading Style Sheets) stileert elke website. Geminificeerde of slecht geformatteerde CSS is moeilijk te lezen en te debuggen. Een CSS-formatter voegt inspringing en regeleinden toe aan ruwe of geminiificeerde CSS zodat u selectors, eigenschappen en nesting duidelijk kunt zien. De W3C CSS-specificaties definiëren de taal.
Dit hulpmiddel parseert uw CSS en herformatteert het met consistente inspringing. Het draait volledig in uw browser. Er wordt niets naar een server gestuurd, dus het is veilig voor productiestylesheets. Voor het minificeren van CSS gebruikt u de CSS Minificeerder. Voor validatie de CSS Validator.
Hoe dit hulpmiddel te gebruiken
Plakken of uploaden
Kopieer uw CSS en plak het in de linker editor. U kunt ook op Uploaden klikken om een .css-bestand te laden. De knop Voorbeeld laadt voorbeeldgegevens. Ongeldige CSS toont een fout.
Controleer de uitvoer
Het rechterpaneel wordt automatisch bijgewerkt. Geldige CSS wordt geformatteerd met de juiste inspringing. Gebruik <strong>Minificeren</strong> om witruimte te verwijderen en een compacte versie voor productie te krijgen.
Kopiëren of downloaden
Gebruik Kopiëren om het resultaat op het klembord te zetten, of Downloaden om het op te slaan. Voor SCSS of Less compileert u eerst met SCSS naar CSS of Less naar CSS.
Hoe de formatter werkt
Het hulpmiddel parseert uw CSS en herformatteert het met consistente inspringing. Selectors, eigenschappen en regels worden gedetecteerd; accolades en puntkomma's blijven behouden. De W3C CSS-specificaties definiëren de taal. Opmaak voegt regeleinden en spaties toe voor leesbaarheid zonder het gedrag te wijzigen. At-rules zoals @media, @keyframes en @import worden ondersteund. Verwerking vindt plaats in uw browser—er wordt niets naar een server gestuurd.
Buildtools zoals Vite, Webpack of Parcel produceren vaak geminiificeerde CSS. Die uitvoer hier plakken maakt het leesbaar. Voor SCSS- of Less-broncode compileert u eerst met SCSS naar CSS of Less naar CSS, daarna formatteren.
Wanneer CSS-opmaak helpt
De meeste ontwikkelaars hebben een formatter nodig bij het inspecteren van stijlen van productiesites, debuggen van CSS van derden of het beoordelen van geminiificeerde uitvoer van buildtools. Gecomprimeerde CSS hier plakken maakt selectors en regels direct zichtbaar. Bootstrap- of Tailwind-gecompileerde uitvoer is vaak geminiificeerd—opmaak onthult de structuur.
Opmaak helpt ook vóór het delen van stijlen met teamgenoten of het beoordelen van pull requests. Voor vendorprefixen gebruikt u de CSS Prefixer. Voor conversie naar inline-stijlen (bijv. e-mail) CSS naar Inline. Voor validatie de CSS Validator.
Veelgestelde vragen
Zijn mijn gegevens privé?
Ja. Opmaak vindt volledig plaats in uw browser. Er worden geen gegevens naar een server gestuurd. U kunt dit controleren in het Netwerk-tabblad van uw browser.
Ondersteunt het SCSS of Less?
Dit hulpmiddel formatteert gewone CSS. Voor SCSS of Less compileert u eerst met SCSS naar CSS of Less naar CSS, daarna formatteert u de uitvoer.
Wat doet Minificeren?
Het verwijdert witruimte, regeleinden en opmerkingen uit de geformatteerde uitvoer en geeft de kleinste versie voor productie. Er is ook een aparte pagina CSS Minificeerder.
Blijven opmerkingen behouden?
Opmaak behoudt opmerkingen. Bij minificeren kunnen ze afhankelijk van de minifier worden verwijderd. Controleer de uitvoer vóór gebruik in productie.
Hoe zit het met CSS custom properties?
CSS-variabelen (--var-name) worden ondersteund. De formatter verwerkt moderne CSS-syntax inclusief custom properties, @media en @keyframes.