Ce que fait cet outil
Du CSS minifié ou emmêlé devient du CSS lisible.
a{margin:0 auto;--x:1px}@media print{a{color:#000}}a {
margin: 0 auto;
--x: 1px
}
@media print {
a {
color: #000
}
}Une déclaration par ligne, un niveau d’indentation par niveau d’imbrication, une ligne vide entre les règles de premier niveau. L’indentation est une option : deux espaces par défaut, quatre si c’est votre convention.
Ce qu’il laisse exactement en l’état
- Vos valeurs.
#FFFFFFne devient paswhite,0pxne devient pas0, etmargin: 10px 10px 10px 10pxn’est pas replié. Ces réécritures sont le travail d’un optimiseur, et chacune est un jugement sur votre feuille de style. - L’ordre. Déclarations et règles ressortent dans l’ordre où vous les avez écrites. En CSS, l’ordre est le sens : à spécificité égale, c’est la dernière règle qui gagne.
- Vos commentaires. Ils gardent leur place, au-dessus de la règle ou en fin de ligne, puisque c’est pour cela qu’ils ont été écrits.
Ce n’est pas un validateur
a { color: reda {
color: redL’accolade manquante revient manquante. Un formateur lit ce que vous lui donnez et le met en page ; il ne vous dit pas si un navigateur l’accepterait. Cela coupe des deux côtés : une feuille de style avec une erreur de syntaxe est quand même rangée, ce qui aide à trouver l’erreur, et un résultat bien rangé ne prouve rien quant à la validité. Pour cela, les outils de développement du navigateur, ou un linter comme Stylelint.
L’autre sens
Le minifieur CSS de ce site fait le voyage inverse : il retire les blancs que cet outil ajoute, garde intacts les chaînes, le contenu des url() et les commentaires de licence, et laisse vos valeurs tranquilles de la même façon. Formater pour lire, minifier pour livrer — la même feuille de style, deux formes.
Confidentiel par conception
Tout s’exécute localement dans votre navigateur en JavaScript. Vos données ne sont jamais envoyées sur un serveur, ce qui rend l’outil sûr pour des contenus sensibles, et il fonctionne hors ligne.