Formateur et minifieur CSS
Mettez en forme du CSS illisible — une déclaration par ligne, indentation propre — ou minifiez-le pour la production, en un clic.
Ce que fait la mise en forme
Le CSS se moque des espaces : pour le navigateur, une feuille de style sur une seule ligne et la même indentée sont strictement équivalentes. La mise en forme ne sert donc qu’à vous. L’outil applique les conventions les plus répandues :
- Le sélecteur et l’accolade ouvrante sur la même ligne, séparés par une espace.
- Une déclaration par ligne, indentée d’un niveau, toujours terminée par un point-virgule.
- Une espace après le deux-points, aucune avant.
- L’accolade fermante seule sur sa ligne, alignée sur le sélecteur.
- Les règles imbriquées — contenu d’un
@media, d’un@supports, d’un@keyframes— indentées d’un niveau supplémentaire. - Une ligne vide entre deux règles de premier niveau, pour aérer la lecture.
Les commentaires sont conservés : placés seuls, ils gardent leur propre ligne ; accolés à une déclaration, ils restent à sa suite.
La minification, et ce qu’elle vaut réellement
Minifier consiste à supprimer tout ce qui ne sert qu’à la lecture : commentaires, retours à la ligne, indentation, espaces autour des accolades, des points-virgules et des deux-points, et le dernier point-virgule avant une accolade fermante. Le gain dépend entièrement du style d’écriture du fichier d’origine : une feuille très commentée et très aérée perd beaucoup de poids, une feuille déjà compacte presque rien.
Un point mérite d’être connu : l’essentiel de la réduction réelle du transfert vient de la compression gzip ou brotli appliquée par le serveur, pas de la minification. Or ces algorithmes compriment très efficacement les répétitions — et l’indentation en est une. Minifier avant de compresser apporte donc un gain supplémentaire modeste. Cela reste une bonne pratique, mais ce n’est pas là que se gagnent les secondes de chargement : supprimer les règles inutilisées a bien plus d’effet.
Ce que l’outil ne touche pas
| Opération | Faite ici |
|---|---|
| Indentation, retours à la ligne, espaces | Oui |
| Suppression des commentaires (en minification) | Oui |
Réécriture des couleurs (#ffffff → #fff) | Non |
| Fusion de règles au même sélecteur | Non |
| Suppression des déclarations en double | Non |
| Ajout ou retrait de préfixes navigateurs | Non |
Ce choix est volontaire : ces réécritures changent le contenu des règles et peuvent modifier le rendu. Une déclaration répétée est parfois une solution de repli délibérée pour un vieux navigateur ; deux règles au même sélecteur peuvent être séparées par une troisième qui les départage. Un outil de ligne de commande intégré à votre chaîne de compilation est le bon endroit pour ces optimisations — pas un formateur manuel.
Les espaces qui comptent vraiment
Deux endroits du CSS n’autorisent pas la suppression des espaces, et c’est pourquoi la minification reste prudente ici :
- Dans
calc():calc(100% - 20px)exige une espace de chaque côté du moins et du plus. Sans elles, la valeur est invalide et la déclaration ignorée, car-20pxse lit comme un nombre négatif. - Dans un sélecteur descendant :
a :hovereta:hoverne désignent pas la même chose. Le premier cible un descendant survolé, le second le lien lui-même.
Les chaînes de caractères et les commentaires sont traités comme des blocs insécables : une content: "a { b }" ou une police dont le nom contient des espaces ne sont jamais altérées.
Un détail d’accessibilité
Profitez d’une relecture de feuille de style pour vérifier les couleurs de texte : c’est le défaut le plus répandu et le plus facile à corriger. Le convertisseur de couleurs donne le rapport de contraste de chaque valeur et indique si elle atteint le seuil WCAG. Pour le reste, le traitement se fait intégralement dans votre navigateur : une feuille de style n’est pas un secret industriel, mais un fichier de projet n’a aucune raison de transiter par un serveur inconnu. Le même principe s’applique au formateur JSON et à l’outil échapper le HTML.
Questions fréquentes
Le CSS minifié est-il plus lent à interpréter ?
Non, c’est même marginalement plus rapide : l’analyseur a moins de caractères à parcourir. Le navigateur construit exactement le même arbre de règles dans les deux cas. La seule différence pratique est la lisibilité pour les humains, raison pour laquelle on publie une version minifiée accompagnée d’une source map en développement.
Pourquoi mes commentaires disparaissent-ils ?
Parce que la minification les supprime : c’est son rôle. En mise en forme, ils sont intégralement conservés. Si vous devez garder une mention de licence dans le fichier minifié, ajoutez-la à la main après coup ; les outils de compilation reconnaissent pour cela la syntaxe /*! … */.
Deux espaces ou une tabulation ?
Deux espaces est la convention la plus courante en CSS et le réglage par défaut ici. La tabulation a l’avantage de laisser chacun régler sa largeur d’affichage, et elle pèse un octet au lieu de deux. Dans un projet existant, le seul vrai critère est de faire comme le reste du fichier.
Mon CSS comporte une erreur : sera-t-elle signalée ?
Non, l’outil ne valide pas la syntaxe : il met en forme ce qu’il reçoit, même incomplet, ce qui permet de travailler sur un extrait. Une accolade manquante se repère en revanche immédiatement à l’indentation, qui part en escalier : c’est souvent le moyen le plus rapide de localiser la faute.