Zo werkt het
- Plak je CSS in de invoereditor.
- Kies bij Inspringing voor 2 spaties, 4 spaties of Tab.
- Kies bij Accolades voor Zelfde regel of Volgende regel.
- Stel Eigenschappen sorteren in en vink Commentaar behouden naar wens aan of uit.
- Kopieer de geformatteerde CSS uit de uitvoereditor.
Voorbeelden
Eigenschappen van een productkaart sorteren
Invoer
.productkaart{padding:16px;color:#222;--accent:#007a3d;background:#fff;border:1px solid #ddd}Uitvoer
.productkaart {
--accent: #007a3d;
background: #fff;
border: 1px solid #ddd;
color: #222;
padding: 16px;
}Geneste CSS voor een mobiele navigatie
Invoer
@media (max-width:768px){.hoofdnavigatie{display:flex;gap:12px;& a{color:#17365d;&:hover{color:#007a3d}}}}Uitvoer
@media (max-width:768px)
{
.hoofdnavigatie
{
display: flex;
gap: 12px;
& a
{
color: #17365d;
&:hover
{
color: #007a3d;
}
}
}
}Commentaar verwijderen, licentie behouden
Invoer
/*! Huisstijl gemeentevoorbeeld.nl | MIT */
/* Knop voor het aanvraagformulier */
.aanvraagknop{background:#005a9c;color:#fff;/* Witte tekst */padding:12px 20px}Uitvoer
/*! Huisstijl gemeentevoorbeeld.nl | MIT */
.aanvraagknop {
background: #005a9c;
color: #fff;
padding: 12px 20px;
}Tips
- Gebruik voor SCSS of LESS de Code Formatter.
- Het kleinst mogelijke bestand nodig? CSS minificeren.
- Vergelijk vóór en na in de Diff Checker.
Veelgestelde vragen
Waarom worden sommige CSS-eigenschappen niet alfabetisch gesorteerd?
De tool behoudt de volgorde als sorteren zou veranderen welke declaratie voorrang krijgt, bijvoorbeeld bij margin en margin-top. Je krijgt dan een waarschuwing.
Waarom wordt mijn grote CSS-bestand niet automatisch geformatteerd?
Automatisch formatteren werkt tot 100 KB invoer. Bij grotere invoer verschijnt de knop CSS formatteren, of je drukt op Ctrl+Enter of Cmd+Enter. Bestanden groter dan 10 MB worden geweigerd.
Hoe vind ik een syntaxfout in mijn CSS?
Bij een syntaxfout toont de tool het regel- en kolomnummer en markeert hij de foutregel in de invoereditor. De uitvoer wordt gewist totdat je de fout herstelt.
Wordt mijn CSS naar een server gestuurd?
Je CSS wordt in je browser verwerkt en niet geüpload. Alleen je optie-instellingen worden lokaal bewaard; de tool slaat je CSS niet op.
Kan ik ook SCSS of LESS formatteren?
Deze tool is bedoeld voor gewone CSS. Gebruik voor SCSS of LESS de Code Formatter.