CSS Minifier — Minificateur CSS

Ce que fait le minificateur CSS

Cet outil réduit la taille des feuilles de style avec CSSO (CSS Optimizer), un minificateur qui comprend le CSS au lieu de le traiter comme du simple texte. Lors d'une première passe, il effectue des nettoyages sans risque : les espaces et les commentaires sont supprimés, les couleurs sont raccourcies (#ff0000 devient red, #ffffff devient #fff), les valeurs nulles perdent leur unité, les guillemets et points-virgules superflus disparaissent et les nombres sont écrits sous leur forme la plus courte. Le résultat est un CSS strictement équivalent, mais nettement plus léger.

Lorsque restructure (restructuration) est activé, CSSO va plus loin et optimise la structure de la feuille de style. Les règles ayant le même sélecteur sont fusionnées, les sélecteurs qui partagent des déclarations identiques sont regroupés, les propriétés écrasées plus loin dans la même règle sont supprimées, et les déclarations détaillées, comme des marges séparées, peuvent être condensées en une propriété raccourcie. CSSO veille à préserver la cascade : il ne déplace ou ne fusionne des règles que lorsque cela ne peut pas modifier la déclaration qui l'emporte.

Interpréter les résultats

Les badges indiquent la taille UTF-8 de l'entrée et de la sortie ainsi que le pourcentage économisé. Un CSS écrit à la main, avec commentaires et indentation, diminue souvent de 20 à 50 %. Le code produit par un framework, déjà compact, gagnera moins, tandis que les feuilles de style qui répètent les mêmes déclarations sur de nombreux sélecteurs profitent le plus de la restructuration. Les serveurs appliquent généralement gzip ou Brotli par-dessus : minification et compression se complètent donc au lieu de se concurrencer.

Confidentiel et sûr

Le minificateur fonctionne entièrement dans votre navigateur : rien n'est envoyé, journalisé ni stocké. Il est donc pratique pour le CSS critique en ligne, les modèles d'e-mail, les widgets intégrés ou les corrections rapides sur une machine sans vos outils de build habituels. Conservez les commentaires /*! ... */ si votre feuille de style contient des licences tierces qui doivent être maintenues. Pour les sites en production, intégrez un minificateur à votre build afin que chaque déploiement soit optimisé automatiquement, et vérifiez toujours visuellement le résultat lorsque votre CSS repose sur des hacks de navigateur ou une syntaxe inhabituelle.