Structurez les règles CSS

Les développeurs utilisent Formateur CSS avant une revue de code, une session de débogage ou un passage de relais.

Structurez les règles CSS, afin de faciliter la relecture, les modifications et le débogage. Utilisez-le sans compte dans votre navigateur.

Mode d’emploi

Copiez votre feuille de style dans la zone de saisie, ou importez un fichier de code accepté par l'outil.
Lancez le formatage : les règles et leurs déclarations sont réécrites avec une indentation régulière et des retours à la ligne.
Parcourez le résultat et repérez les blocs qui vous semblaient trop longs ou mal ordonnés dans votre code d'origine.
Copiez la version obtenue dans votre éditeur, puis comparez-la à l'original avant de valider la modification.
Videz la zone de saisie avant de coller un autre fichier, pour qu'un seul projet occupe le résultat.

Exemple

Un développeur reprend une feuille de style écrite à la va-vite, tout sur une seule ligne. Il la colle ici, récupère une version indentée, puis la relit bloc par bloc : les sélecteurs se suivent clairement et chaque déclaration retrouve sa propre ligne.

Limites et formats

L'outil ne corrige pas les erreurs de syntaxe, un point-virgule oublié reste oublié après le passage.
Il réorganise la présentation, pas la logique : il ne renomme pas les classes et ne supprime pas les règles inutiles.
Les fichiers acceptés couvrent notamment le HTML, le CSS, le JavaScript, le JSON et le SQL, mais un fichier binaire ne sera pas lisible.
Sur une feuille très courte, l'indentation automatique apporte peu ; vérifiez malgré tout que le résultat reste identique sur le plan fonctionnel.

Où le traitement a lieu

Le formatage s'effectue à l'intérieur de votre navigateur : le code envoyé dans la zone de saisie n'est copié nulle part et disparaît dès que vous fermez la page. Vous pouvez donc y passer des extraits de projet sans les exposer.

Questions fréquentes

Le formatage modifie-t-il le rendu de ma page ?

Non, il ne touche qu'aux espaces, aux retours à la ligne et à l'indentation. Les sélecteurs, les propriétés et les valeurs restent identiques, donc le navigateur interprète la feuille de style exactement de la même façon qu'avant.

Puis-je formater un fichier très volumineux ?

Cela dépend surtout de la mémoire de votre appareil, puisque tout le travail se fait dans le navigateur. Sur un gros fichier, la page peut ralentir ; dans ce cas, découpez la feuille en plusieurs parties et traitez-les à la suite.

Pourquoi le résultat contient-il encore une ligne très longue ?

Certaines valeurs restent longues par nature, par exemple une liste de polices ou une fonction imbriquée. L'outil ne découpe pas les valeurs à l'intérieur des déclarations, il se concentre sur la structure des blocs de règles.