Formateur CSS
Formater et embellir le CSS avec coloration syntaxique
CSS d'entrée
CSS formaté
Exemples de formatage CSS
Le CSS minifié est difficile à lire ; le formatage ajoute l'indentation et les sauts de ligne. Exemple :
Styles de conteneur et bouton
Entrée minifiée :
Sortie formatée :
Cliquez sur Exemple ci-dessus pour charger du CSS minifié dans l'éditeur.
Qu'est-ce qu'un formateur CSS ?
Le CSS (Cascading Style Sheets) stylise chaque site web. Le CSS minifié ou mal formaté est difficile à lire et à déboguer. Un formateur CSS ajoute l'indentation et les sauts de ligne au CSS brut ou minifié pour voir clairement les sélecteurs, propriétés et imbrications. Les spécifications W3C CSS définissent le langage.
Cet outil analyse votre CSS et le reformate avec une indentation cohérente. Il s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur, il est donc sûr pour les feuilles de style en production. Pour minifier le CSS, utilisez le Minificateur CSS. Pour la validation, le Validateur CSS.
Comment utiliser cet outil
Coller ou télécharger
Copiez votre CSS et collez-le dans l'éditeur de gauche. Vous pouvez aussi cliquer sur Télécharger pour charger un fichier .css. Le bouton Exemple charge des données d'exemple. Un CSS invalide affichera une erreur.
Vérifier la sortie
Le panneau de droite se met à jour automatiquement. Le CSS valide est formaté avec une indentation correcte. Utilisez <strong>Minifier</strong> pour supprimer les espaces et obtenir une version compacte pour la production.
Copier ou télécharger
Utilisez Copier pour mettre le résultat dans le presse-papiers, ou Télécharger pour l'enregistrer. Pour SCSS ou Less, compilez d'abord avec SCSS vers CSS ou Less vers CSS.
Comment fonctionne le formateur
L'outil analyse votre CSS et le reformate avec une indentation cohérente. Les sélecteurs, propriétés et règles sont détectés ; les accolades et points-virgules sont préservés. Les spécifications W3C CSS définissent le langage. Le formatage ajoute des sauts de ligne et des espaces pour la lisibilité sans changer le comportement. Les at-rules comme @media, @keyframes et @import sont gérées. Le traitement s'exécute dans votre navigateur—rien n'est envoyé à un serveur.
Les outils de build comme Vite, Webpack ou Parcel produisent souvent du CSS minifié. Coller cette sortie ici la rend lisible. Pour le code source SCSS ou Less, compilez d'abord avec SCSS vers CSS ou Less vers CSS, puis formatez.
Quand le formatage CSS aide
La plupart des développeurs ont besoin d'un formateur pour inspecter les styles des sites en production, déboguer le CSS tiers ou examiner la sortie minifiée des outils de build. Coller du CSS compressé ici rend les sélecteurs et règles visibles immédiatement. La sortie compilée de Bootstrap ou Tailwind est souvent minifiée—le formatage révèle la structure.
Le formatage aide aussi avant de partager des styles avec l'équipe ou de réviser les pull requests. Pour ajouter des préfixes vendor, utilisez le Préfixeur CSS. Pour convertir en styles inline (ex. e-mail), CSS vers Inline. Pour la validation, le Validateur CSS.
Questions fréquentes
Mes données sont-elles privées ?
Oui. Le formatage s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur. Vous pouvez le vérifier dans l'onglet Réseau de votre navigateur.
Prend-il en charge SCSS ou Less ?
Cet outil formate le CSS brut. Pour SCSS ou Less, compilez d'abord avec SCSS vers CSS ou Less vers CSS, puis formatez la sortie.
Que fait Minifier ?
Il supprime les espaces, sauts de ligne et commentaires de la sortie formatée, donnant la version la plus petite pour la production. Il existe aussi une page dédiée Minificateur CSS.
Les commentaires sont-ils préservés ?
Le formatage préserve les commentaires. La minification peut les supprimer selon le minificateur. Vérifiez la sortie avant utilisation en production.
Et les propriétés personnalisées CSS ?
Les variables CSS (--var-name) sont prises en charge. Le formateur gère la syntaxe CSS moderne incluant les propriétés personnalisées, @media et @keyframes.