Ctrl K

CSS beautify online

Maak CSS netjes in je browser: niets wordt geüpload, er is geen limiet op de grootte en geminimaliseerde of rommelige stylesheets worden leesbare, ingesprongen code. Alleen de witruimte verandert.

Inspringen

Zo werkt het

  1. Plak je code

    Plak de code in het linkervak of open een bestand. Geen code bij de hand? Klik op Voorbeeld.

  2. Direct resultaat

    De uitkomst verschijnt terwijl je typt. Is er een fout, dan zie je op welke regel en welk teken.

  3. Kopieer of download

    Kopieer het resultaat met één klik of sla het op als bestand voor je editor of project.

Wanneer heb je het nodig?

Stylesheets van een website zijn vaak geminimaliseerd: alles op één regel om bytes te besparen. Dat is goed voor de laadsnelheid maar onleesbaar. De beautifier zet elke selector, eigenschap en sluitaccolade op een eigen regel en laat geneste blokken zoals @media-queries inspringen.

Opties

  • Inspringen: 2 spaties, 4 spaties of een tab.
  • Lege regel tussen de regels maakt lange stylesheets makkelijker te scannen.

Het opmaken gebeurt met js-beautify, dat in je browser draait. Strings, url()-waarden en calc(100% - 2rem) behouden hun exacte spaties.

Een stylesheet doorgronden die je niet zelf schreef

Open je de CSS van een website in de browsertools, dan is het vaak één lange regel. Plak hem hier om de regels op volgorde te zien, te ontdekken welke selector wint en de !important te vinden die problemen geeft. De stijlinspecteur van de browser toont het opgemaakte bestand ook, maar hier kun je het resultaat kopiëren, doorzoeken en bewerken.

Wat de opmaak niet verandert

De volgorde van regels, de waarden en de selectors blijven precies zoals in het origineel, dus de cascade verandert niet. Commentaar blijft in de uitvoer staan. Heeft een minifier kleuren ingekort of eenheden bij nul weggelaten (0px naar 0), dan blijft dat ook, want dat is code en geen witruimte.

Van leesbaar terug naar klein

Houd de opgemaakte CSS om te bewerken en maak voor productie een kleine versie met de CSS minify. Vergelijk je twee versies, maak ze dan eerst met dezelfde inspringing op, zodat de verschillen goed te zien zijn.

Zie ook: CSS Minify · HTML Formatter.

Veelgestelde vragen

Verandert beautifyen hoe mijn CSS werkt?

Nee. Alleen de witruimte tussen regels, selectors en eigenschappen verandert.

Kan hij minificatie helemaal ongedaan maken?

Hij herstelt de opmaak, maar niet het oorspronkelijke commentaar als dat is verwijderd, en niet de volgorde van eigenschappen in je bronbestanden.

Werkt het met @media-queries?

Ja. Geneste blokken zoals @media en @supports springen een niveau dieper in.

Wordt mijn CSS geüpload?

Nee. De opmaak gebeurt in je browser en de code blijft op je apparaat.