Formateur CSS

Ce que fait un formateur CSS

Un formateur CSS (on dit aussi « beautifier ») reprend une feuille de style et réécrit sa mise en page sans changer son sens. Chaque règle reçoit son propre bloc, chaque déclaration sa propre ligne, et les blocs imbriqués comme les media queries sont indentés d’un niveau de plus. Le résultat est le même CSS, simplement plus facile à lire, à relire et à modifier.

C’est utile quand vous copiez des styles depuis un fichier minifié, que vous ouvrez un thème écrit à la main au fil des années, ou que vous collez du CSS issu des outils de développement du navigateur. Cela aide aussi avant une revue de code : avec une mise en forme cohérente, le diff ne montre que les vrais changements.

Comment utiliser ce formateur CSS

1. Collez votre CSS dans la zone de gauche. Il est formaté dès le collage.
2. Ou appuyez sur Ouvrir un fichier pour charger un fichier .css depuis votre appareil, ou sur Exemple pour l’essayer avec du code d’exemple.
3. Choisissez l’Indentation : 2 espaces, 4 espaces ou tabulations.
4. Réglez la Largeur de ligne. Les longues listes de sélecteurs et les longues valeurs passent à la ligne au-delà de cette largeur.
5. Activez Guillemets simples si votre projet préfère 'Inter' à "Inter".
6. Appuyez sur Formater (ou Ctrl+Entrée) pour embellir, ou sur Minifier pour compresser.
7. Appuyez sur Copier ou Télécharger pour récupérer le résultat.

Une fois un premier formatage fait, le résultat se met à jour pendant la frappe. Si le CSS contient une erreur de syntaxe, le message sous les zones indique où elle se trouve, et Afficher dans l’entrée vous y amène.

Avant et après

Voici un bloc de CSS minifié :

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Après Formater avec 2 espaces :

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

Remarquez que le combinateur d’enfant > reçoit une espace de chaque côté, que chaque sélecteur de la liste est sur sa propre ligne et que la règle à l’intérieur de la media query est indentée. Les commentaires restent là où vous les avez écrits.

Minifier du CSS

Minifier fait l’inverse. Il retire les commentaires et les espaces dont les navigateurs n’ont pas besoin. Appliqué au code formaté ci-dessus, il redonne une seule ligne :

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Le minificateur est prudent, volontairement. Il garde l’espace de div :first-child, car la retirer changerait le sélecteur. Il garde les espaces dans calc(100% - 2rem), dont calc a besoin. Il ne touche pas aux chaînes ni aux valeurs url(). Les commentaires qui commencent par /*! sont gardés, puisqu’ils contiennent en général une licence :

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

Il ne fusionne pas les règles en double, ne raccourcit pas les couleurs et ne supprime pas les sélecteurs inutilisés. Pour ce niveau d’optimisation, utilisez un outil de build comme cssnano ou Lightning CSS dans votre projet.

Lire les messages d’erreur

Le formateur a besoin d’un CSS valide pour fonctionner. S’il manque une accolade, vous obtenez un message comme celui-ci (les messages de l’analyseur sont en anglais) :

Ligne 1, colonne 1 : Unclosed block

La position indique le bloc ouvert mais jamais fermé. Les causes courantes sont un } manquant à la fin d’une règle, un { égaré après un sélecteur ou un commentaire non fermé. Corrigez le problème et appuyez de nouveau sur Formater.

L’outil ne vérifie pas si les noms de propriétés ou les valeurs existent. colr: red est une syntaxe valide, il est donc formaté, pas signalé. Un linter comme Stylelint repère ce genre d’erreur.

Conseils

• Utilisez 2 espaces sauf si votre projet en utilise déjà un autre. C’est le choix le plus courant dans les guides de style CSS.
• Gardez le fichier minifié comme sortie de build et le fichier formaté comme source. Modifier du CSS minifié à la main est source d’erreurs.
• Si le CSS se trouve dans un fichier HTML, dans une balise style, collez toute la page dans le formateur HTML. Il formate aussi le CSS intégré.
• Les fichiers Sass avec imbrication et $variables vont dans le formateur SCSS.
• Les commentaires en français, accents compris, sont conservés tels quels.

Autres façons de formater du CSS

• VS Code : ouvrez le fichier et lancez la commande Mettre en forme le document (Maj+Alt+F sous Windows, Maj+Option+F sous macOS). Installez l’extension Prettier pour obtenir le même résultat que cette page.
• Ligne de commande : npx prettier --write styles.css formate un fichier sur place avec Prettier.
• Outils de développement du navigateur : le panneau Sources de Chrome et Firefox a un bouton d’affichage lisible pour les feuilles de style minifiées. Il convient pour lire, mais ne permet pas de régler des options comme la largeur d’indentation.

Cette page est pratique quand vous ne voulez rien installer, ou pour vérifier rapidement du code venu d’ailleurs. Si vous travaillez aussi sur des scripts, le formateur JavaScript utilise le même moteur et les mêmes options.