Zo gebruik je deze tool

Plak CSS in het invoerveld, open een .css-bestand of probeer het voorbeeld.
Kies Beautify voor leesbare code of Minify voor de kleinste uitvoer.
Kies bij Beautify voor 2 spaties, 4 spaties of tabs.
Kopieer het resultaat of download het als .css-bestand. Als accolades of aanhalingstekens niet in evenwicht zijn, toont de foutmelding de regel en kolom.

Hoe het werkt

De formatter splitst de stylesheet eerst in tokens: strings tussen enkele of dubbele aanhalingstekens, url(…)-waarden, commentaar, accolades en puntkomma's. Omdat strings en url() één token zijn, brengt een puntkomma binnen een data-URI of een accolade binnen content: "{ }" de structuur nooit in de war, en wordt hun inhoud exact gekopieerd.

Beautify plaatst elke selector van een selectorlijst op een eigen regel, voegt spaties toe rond de combinatoren voor kind, broer/zus en aangrenzend (>, ~, +) en schrijft elke declaratie als “property: value;” op een eigen regel. Blokken binnen @media, @supports, @layer, @container en native CSS-nesting worden per diepte één niveau ingesprongen. Een ontbrekende puntkomma na de laatste declaratie van een blok wordt toegevoegd. Commentaar blijft op zijn plaats.

Minify verwijdert commentaar (behalve /*! … */ licentiemeldingen), voegt witruimte samen, verwijdert spaties rond accolades, dubbele punten, puntkomma's, komma's en selectorcombinatoren, en laat de puntkomma vóór elke sluitende accolade weg. Spaties die de betekenis veranderen blijven behouden: de descendant-combinator in “.a .b”, de spatie in “a :focus” en de spaties binnen waarden zoals calc(100% - 2px). “! important” wordt genormaliseerd naar “!important”.

De tool herschrijft geen waarden: kleuren, eenheden en nullen blijven zoals geschreven, en regels worden niet samengevoegd of opnieuw gerangschikt. SCSS- of Less-bestanden met gewone nesting werken meestal, maar hun eigen syntaxis, zoals //-regelcommentaar of mixins, wordt niet begrepen.

Voorbeelden

Een verkleind frameworkbestand lezen

Plak een eenregelig fragment uit bootstrap.min.css en kies Beautify met 2 spaties om elke regel, de media queries en hun geneste regels op afzonderlijke, ingesprongen regels te zien.

Een handgeschreven stylesheet versturen

Minify een stylesheet van 12 KB met commentaar en inspringing voordat u deze inline toevoegt aan een e-mailsjabloon of een paginahoofd. De samenvatting toont het aantal tekens vóór en na.

Een ontbrekende accolade vinden

Een stylesheet wordt halverwege niet meer toegepast. De formatter meldt “Dit { wordt nooit gesloten met een bijpassende }” met de regel van de selector waarvan de sluitende accolade ontbreekt.

Veelgestelde vragen

Is geminificeerde CSS van deze tool veilig om in productie te gebruiken?

Het verwijdert alleen commentaar en witruimte die CSS negeert, dus de regels gedragen zich hetzelfde. Het doet niet de diepere optimalisaties van build-tools zoals het samenvoegen van regels of het inkorten van kleuren, dus het resultaat kan iets groter zijn dan dat van hen.

Waarom blijft er een spatie staan in “a :focus”?

In een selector is een spatie de descendant-combinator. “a :focus” betekent een gefocust element binnen een link, terwijl “a:focus” een gefocuste link betekent. Die spatie verwijderen zou veranderen welke elementen worden geselecteerd.

Kan het SCSS of Less opmaken?

Gewone geneste regels worden correct opgemaakt. Syntaxis die alleen in preprocessors voorkomt, zoals //-commentaar, mixins met argumenten of @if-blokken, wordt niet herkend en kan vreemd worden opgemaakt; controleer dus het resultaat.

Wordt licentiecommentaar verwijderd bij het minificeren?

Commentaar dat begint met /*! blijft behouden; dit is de gebruikelijke conventie voor licentie- en auteursrechtvermeldingen. Al het andere commentaar wordt verwijderd.

Privacy

Je CSS wordt alleen in je browser verwerkt. Er wordt niets geüpload, opgeslagen of opgenomen in analytics.