Formateur CSS

À propos du formatage CSS

La minification du CSS supprime les espaces, les commentaires et les caractères redondants pour réduire la taille du fichier. Le formatage le redéveloppe dans un style indenté, une règle par ligne, plus facile à parcourir et à modifier.

La minification va ici légèrement au-delà de la suppression des espaces : elle réécrit aussi les valeurs dans leur forme équivalente la plus courte, si bien que background-color: white devient background-color:#fff et color: #ff0000 devient color:red, selon ce qui prend le moins d'octets. Elle n'analyse pas quelles règles s'appliquent réellement à une page — c'est une tâche distincte appelée « suppression du CSS inutilisé » ou tree-shaking, qui nécessite de connaître votre HTML et votre JavaScript pour identifier ce qui est superflu, et cet outil conserve chaque règle que vous avez écrite. Une exception à la suppression des commentaires : un « commentaire à bang » commençant par /*! est délibérément conservé, car c'est la convention utilisée par les outils de build pour les mentions de licence devant survivre à la minification.

Où vous le rencontrerez

• Réduire une feuille de style avant de la déployer en production
• Reformater un fichier CSS minifié pour le lire ou le modifier
• Nettoyer des styles copiés depuis le panneau d'inspection du navigateur
• Uniformiser le formatage avant d'examiner un diff CSS

Questions fréquentes

La minification change-t-elle l'apparence de ma page ?
Non. Seuls les espaces et les commentaires sont supprimés — chaque sélecteur, propriété et valeur reste exactement comme écrit.

Cela prend-il en charge SCSS ou LESS ?
Non, seulement du CSS pur. Compilez d'abord votre SCSS ou LESS en CSS.

Ma feuille de style est-elle stockée ?
Non. La conversion se fait sur le serveur pour cette seule requête et rien n'est conservé ensuite.

Cet outil supprime-t-il les règles CSS que ma page n'utilise pas réellement ?
Non. C'est une tâche différente — généralement appelée « suppression du CSS inutilisé » ou tree-shaking — qui nécessite de croiser votre CSS avec le HTML et le JavaScript réels pour savoir quels sélecteurs correspondent effectivement à quelque chose. Cet outil ne fait que retirer les espaces et la syntaxe redondante, et raccourcit les valeurs à leur forme équivalente la plus petite ; chaque règle que vous avez écrite ressort intacte, juste plus compacte. Si un commentaire doit survivre à la minification — une mention de licence, par exemple — commencez-le par /*! plutôt que /*, et il sera conservé.