Monu Tools

CSS-formatter

Verfraai CSS met nette inspringing, of minimaliseer hem om de bestandsgrootte te verkleinen. Verwerkt media queries, calc() en licentiecommentaren.

Hoe gebruik je CSS-formatter

  1. 01

    Plak je CSS in het invoervak.

  2. 02

    Kies Verfraaien om hem te formatteren of Minimaliseren om hem samen te persen.

  3. 03

    Kies de inspringgrootte, en kopieer dan het resultaat.

Wat de CSS-formatter doet

Dit is een CSS-formatter die stylesheets mooi maakt met nette, consistente inspringing, of ze minifyt om de bestandsgrootte te verkleinen. Je kiest de inspringgrootte voor beautifyen en schakelt over naar minify wanneer je de kleinste output wilt.

Wanneer beautifyen en wanneer minifyen

Leesbare CSS is makkelijker te scannen, reviewen en debuggen: als elke regel en declaratie consistent is ingesprongen, zie je selectors, nesting en de vorm van je media queries in één oogopslag.

Minifyen is voor productie. Het verwijdert de witruimte en comments die browsers niet nodig hebben, zodat het bestand sneller downloadt. Bij een grote stylesheet loopt de besparing op, vooral vóór gzip-compressie op de server.

Zorgvuldig minifyen met calc() en media queries

De minifier is zorgvuldig waar het uitmaakt. Hij behoudt de spaties rond plus en min binnen calc(), zodat calc(100% - 30px) geldig blijft, en verwijdert alleen spaties rond structurele tekens zoals accolades, dubbele punten en puntkomma's. Hij verwerkt ook geneste media queries correct.

License-comments blijven behouden

License-comments in de vorm /*! ... */ blijven behouden, wat de standaardconventie is om copyright- en licentievermeldingen in geminifyde output te bewaren, zelfs wanneer gewone comments worden verwijderd.

Draait in je browser

Zowel beautifyen als minifyen gebeurt volledig in je browser, dus je stylesheets verlaten je apparaat nooit. De tool formatteert voor leesbaarheid en grootte; hij valideert niet of je CSS correct is.

Veelgestelde vragen

Breekt minificeren calc()-expressies?

Nee. De minificeerder behoudt de spaties rond plus en min binnen waarden, zodat calc(100% - 30px) geldig blijft. Hij verwijdert alleen spaties rond structurele tekens zoals accolades, dubbele punten en puntkomma's.

Worden commentaren verwijderd bij het minificeren?

Gewone commentaren worden verwijderd om ruimte te besparen, maar licentiecommentaren geschreven als /*! ... */ blijven behouden, wat de standaardconventie is om copyrightvermeldingen te bewaren.

Wordt mijn CSS ergens geüpload?

Nee. Zowel verfraaien als minificeren draaien volledig in je browser, dus je stylesheets verlaten nooit je apparaat.

Wanneer moet ik verfraaien en wanneer minificeren?

Verfraai terwijl je CSS leest, bewerkt of reviewt. Minificeer de uiteindelijke stylesheet voor productie, waar een kleiner bestand sneller laadt voor bezoekers.

Controleert het of mijn CSS geldig is?

Nee. Het formatteert en minificeert de tekst voor leesbaarheid en grootte, maar valideert geen eigenschappen of waarden, dus het zal CSS herformatteren zelfs als die een fout bevat.

Bronnen

Deze tool insluiten

Voeg deze tool toe aan je eigen website. Kopieer het fragment hieronder. Het blijft automatisch up-to-date.

<iframe src="https://monu.tools/embed/nl/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Gerelateerde tools