CSS-formatter

Over CSS-formattering

Minimaliseren verwijdert witruimte, commentaar en overbodige tekens uit CSS om de bestandsgrootte te verkleinen. Opmaken breidt het weer uit naar ingesprongen stijl met één regel per regel, makkelijker te overzien en te bewerken.

Minificeren gaat hier net iets verder dan witruimte verwijderen: waarden worden ook herschreven naar hun kortste gelijkwaardige vorm, zodat background-color: white background-color:#fff wordt en color: #ff0000 color:red, afhankelijk van wat minder bytes kost. Het analyseert niet welke regels daadwerkelijk op een pagina van toepassing zijn — dat is een aparte taak genaamd "ongebruikte CSS verwijderen" of tree-shaking, waarvoor je HTML en JavaScript nodig zijn om te bepalen wat overbodig is, en deze tool behoudt elke regel die je hebt geschreven. Eén uitzondering op het verwijderen van commentaar: een "bang comment" die begint met /*! wordt bewust behouden, omdat dat de conventie is die buildtools gebruiken voor licentiemeldingen die minificatie moeten overleven.

Waar je het tegenkomt

• Een stylesheet verkleinen voordat die naar productie wordt gedeployed
• Een geminimaliseerd CSS-bestand herformatteren om te lezen of te bewerken
• Stijlen opschonen die uit het inspector-paneel van de browser zijn gekopieerd
• Formattering standaardiseren voordat een CSS-diff wordt beoordeeld

Veelgestelde vragen

Verandert minimaliseren hoe mijn pagina eruitziet?
Nee. Alleen witruimte en commentaar worden verwijderd — elke selector, eigenschap en waarde blijft exact zoals geschreven.

Ondersteunt dit SCSS of LESS?
Nee, alleen platte CSS. Compileer je SCSS of LESS eerst naar CSS.

Wordt mijn stylesheet opgeslagen?
Nee. De conversie gebeurt op de server, alleen voor dat ene verzoek, en daarna wordt niets bewaard.

Verwijdert dit CSS-regels die mijn pagina eigenlijk niet gebruikt?
Nee. Dat is een andere taak — meestal "ongebruikte CSS verwijderen" of tree-shaking genoemd — waarvoor je CSS naast je daadwerkelijke HTML en JavaScript moet leggen om te weten welke selectors ooit matchen. Deze tool verwijdert alleen witruimte en overbodige syntaxis en verkort waarden naar hun kleinste gelijkwaardige vorm; elke regel die je schreef komt er compacter, maar ongeschonden, weer uit. Als een commentaar minificatie moet overleven — bijvoorbeeld een licentiemelding — begin het dan met /*! in plaats van /*, dan blijft het behouden.