Formateur CSS
Rendez lisible du CSS minifié avec une déclaration par ligne, des blocs @media indentés et des sélecteurs séparés comme vous le préférez.
Entrée
Résultat
Le résultat apparaîtra ici.Le CSS minifié servi par un CDN ou issu d’un build de production est illisible à dessein. Cet outil le déplie avec le formateur CSS de js-beautify : une déclaration par ligne, une ligne vide entre les règles, les blocs @media et @supports indentés, et des combinateurs comme > qui ont de la place pour respirer. C’est ce qu’il vous faut pour lire une feuille de style tierce, vérifier ce qu’un build a réellement livré ou mettre au propre du CSS écrit à la main avant qu’il n’entre dans une pull request.
Comment ça marche
- Chaque sélecteur d’une liste séparée par des virgules obtient sa propre ligne par défaut ; désactivez cette option pour garder .card, .panel ensemble.
- Les commentaires restent à leur place, y compris les bannières de licence /*! que les minifieurs conservent.
- Les valeurs restent exactement telles qu’elles ont été écrites — couleurs, unités et propriétés personnalisées sont réespacées, jamais réécrites.
Où vont vos données
Nulle part. Cet outil s’exécute entièrement dans votre navigateur : le texte collé est traité par la page, jamais transmis à un serveur ni consigné dans un journal.
Cet outil est gratuit et ne demande aucun compte. Ses résultats n’existent que dans la page ouverte et ne sont enregistrés nulle part.
Ce que ça coûte
Cet outil est gratuit, sans connexion ni points.
Questions fréquentes
- Corrige-t-il ou valide-t-il mon CSS ?
- Non. Il ne modifie que les espaces, donc un point-virgule manquant ou une propriété mal orthographiée ressort formaté mais toujours cassé. Le formatage rend toutefois ces erreurs plus faciles à repérer, car chaque déclaration se retrouve sur sa propre ligne.
- Prend-il en charge SCSS ou Less ?
- En partie. Le mode CSS de js-beautify s’accommode de l’imbrication et de la plupart de la syntaxe SCSS et Less assez bien pour la lecture, mais les mixins aux arguments complexes et certaines interpolations peuvent être espacés bizarrement. Pour les fichiers source que vous committez, Prettier avec son analyseur SCSS est le choix le plus sûr.
- Le formatage peut-il changer l’apparence de la page ?
- Il ne devrait pas. Les espaces entre les déclarations et autour des sélecteurs n’ont aucun effet sur le rendu. La seule exception est le rare hack pour vieux navigateurs qui dépend d’espaces exacts, que les feuilles de style modernes ne contiennent plus.
L’open source derrière
Cet outil fonctionne grâce à beautifier/js-beautify, publié sous licence MIT. Si vous avez besoin du même comportement dans votre propre programme, c’est cette bibliothèque qu’il faut utiliser.
beautifier/js-beautifyAussi appelé
- formateur css
- css beautifier
- déminifier css
- formater css en ligne
- indenter css
- embellir css