Minificateur CSS

Comment l’utiliser

1. Collez votre CSS, ouvrez un fichier .css, ou partez de l’exemple.
2. Le CSS minifié apparaît pendant que vous tapez, avec la taille avant et après.
3. Copiez-le ou téléchargez-le sous styles.min.css.

Ce qu’il fait

Le Minificateur CSS utilise CSSO, qui va plus loin que la suppression des espaces et des commentaires :

• Il raccourcit les valeurs : #ff0000 devient red, 0px devient 0, et padding: 0 16px 0 16px devient padding: 0 16px.
• Il fusionne les règles qui ont le même sélecteur, et les sélecteurs qui ont les mêmes déclarations.
• Il supprime les déclarations écrasées par une déclaration ultérieure dans la même règle.

Il ne fait que des changements qui préservent le sens de la feuille de style : les pages restent identiques.

Est-ce que ça vaut le coup ?

Les feuilles de style empêchent la page de s’afficher tant qu’elles ne sont pas chargées : un CSS plus léger, c’est un premier affichage plus rapide. La minification fait en général gagner 5 à 15 % de plus en plus de la compression gzip ou Brotli de votre hébergeur, davantage quand la feuille contient beaucoup de commentaires. Si vous utilisez un outil de build comme Vite, il minifie déjà le CSS pour la production ; cette page est pour les feuilles de style écrites et publiées à la main.

Questions fréquentes

La minification peut-elle casser mon CSS ?

Les changements de CSSO préservent le sens d’un CSS valide. Les hacks qui reposent sur une syntaxe invalide pour d’anciens navigateurs peuvent ne pas survivre. Gardez la version lisible comme source et minifiez une copie.

Supprime-t-il le CSS inutilisé ?

Non : il ne peut pas voir quels sélecteurs vos pages utilisent. Des outils comme PurgeCSS le font pendant un build.

Comment retrouver la version lisible ?

Gardez l’original. Le Formateur CSS réindente le CSS minifié, mais les commentaires sont perdus pour de bon.

Mon CSS est-il envoyé quelque part ?

Non. Il est minifié dans votre navigateur.