Formateur CSS
Indentez une feuille de style pour la relire, entièrement dans votre navigateur. Rien n'est renommé, raccourci ni normalisé.
Fonctionne entièrement dans votre navigateur. Rien n'est envoyé, journalisé ni conservé.
Collez une feuille de style minifiée ou mal indentée et relisez-la correctement. Le formatage a lieu dans votre navigateur, et rien de la feuille n'est modifié au-delà de ses espaces.
Comment ça marche
La feuille est découpée en éléments — commentaires, chaînes, adresses, noms, nombres, parenthèses — puis réécrite. Chaque règle obtient son bloc, chaque sélecteur d'une liste sa ligne, et chaque déclaration sa ligne dans la règle. Les règles imbriquées, les media queries et les keyframes s'imbriquent avec.
Les espaces sont conservés sauf s'ils ne signifient manifestement rien. C'est l'inverse de ce que font la plupart des formateurs, et c'est délibéré : en CSS, une espace entre deux sélecteurs est le combinateur de descendance, si bien que « .a .b » et « .a.b » ne visent pas les mêmes éléments. Une espace n'est retirée qu'avant une virgule, un point-virgule ou une parenthèse fermante, et après une ouvrante — là où le CSS ne peut rien y lire.
La seule espace ajoutée est celle qui suit le deux-points d'une déclaration. Distinguer ce deux-points de celui d'une pseudo-classe est précisément la raison pour laquelle le formateur regarde en avant jusqu'à la prochaine accolade ou au prochain point-virgule avant de décider ce qu'il lit.
Exemples
| Cas | Saisie | Résultat |
|---|---|---|
| Une règle écrite sur une ligne | a{color:red;margin:0} | a { color: red; margin: 0; } |
Questions fréquentes
Ma feuille de style est-elle envoyée quelque part ?
Non. Le formateur est du JavaScript qui s'exécute dans cette page. Rien n'est téléversé, rien n'est journalisé et rien n'est stocké — vous pouvez couper votre connexion réseau, l'outil fonctionne toujours.
Minifie-t-il aussi ?
Non, et c'est une décision plutôt qu'un oubli. Minifier du CSS suppose de décider quelles espaces portent du sens et lesquelles n'en portent pas ; se tromper change les éléments qu'une règle vise — en silence, et vous le découvririez en production. C'est un autre métier, et il mérite d'être fait correctement ou pas du tout.
Va-t-il corriger ou ranger mes valeurs ?
Non. Il ne mettra pas une couleur hexadécimale en minuscules, ne raccourcira pas #ffffff, ne supprimera pas un zéro initial, ne réordonnera pas vos déclarations et n'ajoutera pas de préfixes vendeurs. Chacune de ces actions est un avis sur votre code plutôt qu'une question de mise en page, et certaines changent le comportement. Seules les espaces bougent.
Comprend-il Sass ou Less ?
En partie, et disons-le franchement : il met en page les règles imbriquées, ce que ces langages partagent avec le CSS moderne. Il ignore ce qu'est un mixin, une variable ou une directive de contrôle, et les traite donc comme les éléments qu'ils sont. Rien n'est perdu, mais n'attendez pas de lui qu'il sache que @if ouvre une branche.
Qu'advient-il d'une data URI ?
Elle survit. Un url() sans guillemets est lu d'un seul tenant jusqu'à sa parenthèse fermante, parce qu'une data URI contient couramment un point-virgule et que le lire comme la fin d'une déclaration couperait la valeur en deux.
Bon à savoir
- La sortie contient exactement les éléments que contenait l'entrée. Le seul ajout est un point-virgule sur la dernière déclaration d'un bloc, sans danger partout, et qui garde le résultat stable quand la règle gagne ensuite une ligne de plus.
- Une chaîne, un commentaire ou un url() non refermé est refusé plutôt que reformaté, parce qu'à partir de là l'outil ne distingue plus le code du texte.
- La mise en forme est déterministe : la même feuille et la même option produisent toujours la même sortie, et reformater une feuille déjà formatée ne change rien.