Minificateur CSS

Collez une feuille de style pour supprimer les espaces et les commentaires, raccourcir les valeurs comme #ff0000 → red et fusionner les règles en double grâce aux optimisations structurelles de CSSO.

Fonctionne dans le navigateurSans inscriptionAucun envoi de données

Sortie minifiée

Comment utiliser : Minificateur CSS

  1. Collez du CSS ou ouvrez un fichier .css.
  2. Laissez Restructurer activé pour fusionner règles et déclarations, ou désactivez-le pour une passe sûre limitée aux espaces.
  3. Laissez Conserver les commentaires de licence activé pour préserver les mentions /*! … */.
  4. Comparez les tailles d’origine, minifiée et gzippée.
  5. Copiez le résultat ou téléchargez output.min.css.

Comment fonctionne la minification CSS

Cet outil utilise CSSO (CSS Optimizer), qui analyse votre feuille de style en arbre syntaxique puis la réécrit sous sa forme équivalente la plus courte. En plus de supprimer espaces et commentaires, il applique des réécritures de valeurs sûres :

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Les règles vides et les déclarations en double sont supprimées

Que fait l’option « Restructurer » ?

La restructuration analyse toute la feuille de style : les règles aux déclarations identiques sont fusionnées en une seule liste de sélecteurs (.a,.b{color:red}), et les sélecteurs répétés sont regroupés. Cela fait souvent gagner encore 5 à 15 % sur de vraies feuilles de style. CSSO ne fusionne que si l’ordre de la cascade reste identique, mais si vous comptez sur des surcharges inhabituelles, vous pouvez la désactiver pour une minification purement syntaxique.

Pourquoi minifier le CSS ?

Le CSS bloque le rendu : le navigateur ne peut pas afficher la page tant que les feuilles de style du <head> ne sont pas téléchargées et analysées. Un CSS plus léger signifie un First Contentful Paint plus rapide et de meilleurs Core Web Vitals, ce qui profite aux utilisateurs comme au référencement. Combinez la minification avec gzip ou Brotli côté serveur pour un résultat optimal.

Questions fréquentes

Minifier le CSS est-il sans risque ?
Oui. Les espaces et commentaires n’ont aucun effet sur le rendu du CSS, et les réécritures de valeurs de CSSO sont équivalentes selon la spécification. La restructuration préserve l’ordre de la cascade ; désactivez-la si vous voulez la sortie la plus prudente.
Le CSS moderne est-il pris en charge (propriétés personnalisées, nesting, @layer) ?
Oui. Les propriétés personnalisées (--var), @media, @supports, @layer, @container et la syntaxe grid sont conservés.
Puis-je « dé-minifier » le CSS plus tard ?
N’importe quel formateur peut réindenter du CSS minifié, mais les commentaires supprimés sont perdus. Conservez votre fichier source d’origine et considérez le fichier minifié comme un résultat de build.
Ma feuille de style est-elle envoyée quelque part ?
Non. La minification s’exécute dans votre navigateur ; rien n’est envoyé à un serveur.

Outils associés

Minificateur JavaScript Compresser et raccourcir du JS avec Terser, tailles et gzip à l’appui. Minificateur HTML Supprimer commentaires et espaces, minifier le CSS/JS inline. Formateur SQL Formater ou minifier du SQL : PostgreSQL, MySQL, T-SQL, BigQuery… Formateur JSON Formater, minifier et valider du JSON, erreurs à la ligne près.