Outils pour Développeurs

Formateur CSS

Transformez du CSS minifié ou mal indenté en règles propres, lisibles et indentées.

Évaluez cet outil
Entrée
Sortie

Comment utiliser Formateur CSS

  1. Collez votre CSS à gauche.
  2. La version mise en forme apparaît à droite.
  3. Copiez le CSS propre.

À propos de Formateur CSS

Le Formateur CSS transforme des feuilles de style minifiées ou mal mises en forme en règles propres et lisibles. Collez votre CSS à gauche et la version mise en forme apparaît à droite, chaque sélecteur, déclaration et accolade fermante étant disposés de façon cohérente et indentés pour que la structure de vos règles soit facile à suivre.

L'outil s'appuie sur js-beautify, la même bibliothèque de mise en forme reconnue et utilisée dans de nombreux éditeurs de code, si bien que l'espacement et l'indentation suivent des conventions que les développeurs connaissent déjà, plutôt qu'un style improvisé. C'est particulièrement utile lorsque vous héritez d'une feuille de style compressée en production, ou d'un bundle issu d'un outil de build, et que vous devez la comprendre ou la modifier sans vous battre contre une seule ligne dense.

Toute la mise en forme s'effectue dans votre navigateur, votre CSS n'est donc jamais envoyé. Copiez le résultat propre dans votre projet une fois terminé. Au moment de la mise en production, le Minifieur CSS le recompresse, et pour le balisage et les scripts qui accompagnent vos styles, le Formateur HTML et le Formateur JavaScript font le même travail.

Questions fréquentes

Quel moteur de mise en forme utilise-t-il ?

Il utilise js-beautify, une bibliothèque bien établie également intégrée à de nombreux éditeurs et IDE. Ses règles d'espacement et d'indentation sont prévisibles et familières plutôt qu'une implémentation maison.

La mise en forme change-t-elle l'application de mes styles ?

Non. Elle ne fait qu'ajuster les espaces et l'indentation. Vos sélecteurs, propriétés et valeurs restent identiques, donc le style se comporte exactement de la même façon dans le navigateur après la mise en forme.

Peut-il développer une feuille de style minifiée ?

Oui. Collez un fichier CSS compressé sur une seule ligne et il est réindenté en règles lisibles, ce qui est idéal quand vous devez inspecter ou modifier une sortie de production ou d'outil de build.

Mon CSS est-il envoyé quelque part ?

Non. La mise en forme s'exécute entièrement dans votre navigateur, votre feuille de style ne quitte donc jamais la page. Cela la rend sûre pour des styles propriétaires ou non publiés.

Comment le reminifier pour la production ?

Après modification, passez le résultat dans le Minifieur CSS pour supprimer commentaires et espaces, produisant un fichier plus léger pour le déploiement tout en conservant votre copie lisible séparément.