CSS Beautifier/Formatter online

Waarom deze tool gebruiken?

CSS-bestanden worden vaak onleesbaar door samenvoeging of geautomatiseerde generatie. Met deze formatter maakt u de code overzichtelijk of juist compact voor productie. Het is een lichtgewicht tekstverwerker, geen complete CSS-parser of validator.

Voorbeeld

Stel, u heeft deze minified code:

body{color:red;margin:0}

Met Beautify en twee spaties inspringing wordt dit:

body {
  color: red;
  margin: 0;
}

Met Minify wordt de code gecomprimeerd, bijvoorbeeld:

body{color:red;margin:0}

Instellingen en werking

De tool biedt drie inspringopties en twee modi. Beautify verwijdert overtollige witruimte, splitst tekst rond accolades en puntkomma's en past blokniveau-inspringing toe. Minify verwijdert blokcommentaar, verwijdert spaties rond accolades, dubbele punten, puntkomma's en komma's, en verwijdert een puntkomma direct voor een sluitende accolade. De volgorde van eigenschappen blijft behouden.

Beperkingen

Deze tool is geen complete CSS-parser. Complexe strings, waarden van aangepaste eigenschappen, data-URL's, commentaar dat als richtlijn wordt gebruikt of ongeldige CSS kunnen problemen geven. Controleer dergelijke gevallen in een browser of build-pipeline. De tool herordent geen eigenschappen, voegt geen vendorprefixen toe, test geen compatibiliteit en garandeert niet dat geminificeerde uitvoer voor elke randgeval semantisch gelijk is.

Veelgestelde vragen

Wat gebeurt er met commentaar in mijn CSS?

Bij Beautify blijft commentaar behouden, maar bij Minify wordt blokcommentaar verwijderd. Let op: commentaar dat als richtlijn wordt gebruikt (bijvoorbeeld /*! ... */) kan verloren gaan.

Kan ik de inspringing aanpassen?

Ja, u kunt kiezen uit twee spaties, vier spaties of een tab. Deze optie is beschikbaar voor zowel Beautify als Minify.

Wordt mijn code geüpload naar een server?

Nee, de verwerking gebeurt volledig in uw browser. Er wordt geen bestand geüpload.

Controlelijst

• Plak maximaal 500.000 tekens.
• Kies inspringing en modus.
• Controleer de uitvoer op complexe constructies.
• Kopieer het resultaat.