CSS-formatter
Laat een stylesheet inspringen zodat je hem kunt lezen, volledig in je browser. Er wordt niets hernoemd, ingekort of genormaliseerd.
Draait volledig in je browser. Er wordt niets geüpload, gelogd of opgeslagen.
Plak een geminificeerde of slecht ingesprongen stylesheet en lees hem zoals het hoort. De opmaak gebeurt in je browser, en aan de stylesheet verandert niets behalve de witruimte.
Hoe het werkt
De stylesheet wordt in stukken gesplitst — commentaar, strings, adressen, namen, getallen, haakjes en accolades — en daarna opnieuw geschreven. Elke regel krijgt een eigen blok, elke selector in een lijst een eigen regel, en elke declaratie een eigen regel binnen de regel. Geneste regels, media queries en keyframes worden mee genest.
Witruimte blijft behouden, tenzij aantoonbaar is dat ze niets betekent. Dat is het omgekeerde van wat de meeste formatters doen, en het is bewust: in CSS is een spatie tussen twee selectors de descendant-combinator, dus “.a .b” en “.a.b” selecteren verschillende elementen. Witruimte wordt alleen weggehaald vóór een komma, een puntkomma of een sluitend teken, en na een openend teken, waar CSS haar nergens als kan lezen.
De enige witruimte die wordt toegevoegd, is die na de dubbele punt van een declaratie. Om die dubbele punt te onderscheiden van die van een pseudoklasse kijkt de formatter vooruit tot de volgende sluitende accolade of puntkomma voordat hij beslist wat hij leest.
Voorbeelden
| Geval | Invoer | Resultaat |
|---|---|---|
| Een regel op één lijn geschreven | a{color:red;margin:0} | a { color: red; margin: 0; } |
Veelgestelde vragen
Wordt mijn stylesheet ergens naartoe gestuurd?
Nee. De formatter is JavaScript dat op deze pagina draait. Er wordt niets geüpload, niets gelogd en niets opgeslagen: je kunt de netwerkverbinding verbreken en de tool blijft werken.
Minificeert hij ook?
Nee, en dat is een keuze en geen vergeetachtigheid. CSS minificeren betekent beslissen welke witruimte betekenis heeft en welke niet, en als je je daarin vergist verandert op welke elementen een regel van toepassing is, stilletjes en op een manier die je pas in productie merkt. Dat is ander werk, en dat verdient het om goed gedaan te worden of helemaal niet.
Gaat hij mijn waarden corrigeren of ordenen?
Nee. Hij zet geen hexadecimale kleur in kleine letters, kort #ffffff niet in, haalt geen voorloopnul weg, herschikt je declaraties niet en voegt geen vendorprefixen toe. Elk daarvan is een mening over je code en geen kwestie van opmaak, en sommige veranderen het gedrag. Alleen de witruimte verschuift.
Begrijpt hij Sass of Less?
Gedeeltelijk, en eerlijk gezegd: hij deelt geneste regels in, en dat is wat die talen met moderne CSS gemeen hebben. Hij heeft geen idee wat een mixin, een variabele of een control directive betekent, dus behandelt hij ze als de tokens die ze zijn. Er gaat niets verloren, maar verwacht niet dat hij weet dat @if een tak opent.
Wat gebeurt er met een data-URI?
Die overleeft het. Een url() zonder aanhalingstekens wordt als één stuk gelezen tot aan het sluitende haakje, want een data-URI bevat vaak een puntkomma, en die lezen als het einde van een declaratie zou de waarde in tweeën splitsen.
Goed om te weten
- De uitvoer bevat precies de stukken die de invoer bevatte. Het enige wat wordt toegevoegd, is een puntkomma na de laatste declaratie van een blok; dat is overal veilig en houdt het resultaat stabiel als de regel later een regel langer wordt.
- Een string, commentaar of url() die niet wordt afgesloten, wordt geweigerd in plaats van opnieuw opgemaakt, want vanaf dat punt kan de tool code niet meer van tekst onderscheiden.
- De opmaak is deterministisch: dezelfde stylesheet met dezelfde optie geeft altijd dezelfde uitvoer, en een al opgemaakte stylesheet opnieuw opmaken verandert niets.