CSS d'entrée

CSS minifié

Exemples de minification CSS

Le CSS formaté est lisible ; le CSS minifié est compact pour la production. Exemple :

Styles de conteneur et bouton

Entrée formatée :

Entrée

Sortie minifiée :

Sortie

Utilisez Exemple ci-dessus pour charger plus de données d'exemple.

Qu'est-ce qu'un minificateur CSS ?

Les fichiers CSS utilisent des espaces, commentaires et indentations pour la lisibilité. En production, des fichiers plus petits se chargent plus vite. Un minificateur CSS supprime les espaces inutiles, commentaires et raccourcit les valeurs quand c'est sûr pour réduire la taille. Les spécifications W3C CSS définissent le langage ; la minification préserve le comportement tout en réduisant les octets.

Cet outil analyse votre CSS et produit une version compacte. La minification s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur. Pour formater le CSS minifié, utilisez le Formateur CSS. Pour valider, le Validateur CSS.

Comment utiliser cet outil

Coller ou télécharger le CSS

Copiez votre CSS et collez-le dans l'éditeur de gauche. Vous pouvez aussi cliquer sur Télécharger pour charger un fichier .css. Le bouton Exemple charge des données d'exemple. Un CSS invalide affichera une erreur.

Voir la sortie minifiée

Le panneau de droite affiche le CSS compact. Les espaces et commentaires sont supprimés. La sortie est du CSS valide—le comportement est préservé. Un CSS invalide affichera une erreur dans la sortie.

Copier ou télécharger

Utilisez Copier pour mettre le résultat dans le presse-papiers, ou Télécharger pour l'enregistrer. Pour SCSS ou Less, compilez d'abord avec SCSS vers CSS ou Less vers CSS, puis minifiez.

Comment fonctionne le minificateur

L'outil supprime les espaces, sauts de ligne et commentaires de votre CSS. Les valeurs peuvent être raccourcies quand c'est sûr (ex. 0px à 0, #ffffff à #fff). La sortie reste valide selon la spécification W3C CSS. Les outils de build comme cssnano ou PostCSS offrent une optimisation plus agressive ; cet outil fournit une minification rapide dans le navigateur.

Quand la minification CSS aide

Les sites en production bénéficient de fichiers CSS plus petits. La minification réduit la taille du chargement, améliore les temps de chargement et économise la bande passante. Les outils de build comme Webpack, Vite ou Parcel minifient souvent automatiquement, mais cet outil est utile pour des fichiers ponctuels, des vérifications rapides ou quand aucune étape de build n'est disponible.

Les modèles d'e-mail, styles embarqués ou CSS hébergé sur CDN nécessitent souvent une minification manuelle. Passer votre feuille de styles ici donne une sortie prête pour la production. Pour ajouter des préfixes vendor avant de minifier, utilisez le Préfixeur CSS. Pour formater le CSS minifié en forme lisible, utilisez le Formateur CSS.

Questions fréquentes

La minification casse-t-elle le CSS ?

Non. Seuls les espaces et commentaires sont supprimés. Les sélecteurs, propriétés et valeurs restent identiques. La sortie est du CSS valide. Certains minificateurs peuvent raccourcir les valeurs (ex. 0px à 0)—le comportement est préservé.

Mes données sont-elles privées ?

Oui. La minification s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

Et les source maps ?

Cet outil ne génère pas de source maps. Pour des builds de production avec source maps, utilisez un outil de build comme PostCSS, cssnano ou le minificateur de votre bundler.

Prend-il en charge SCSS ou Less ?

Cet outil minifie le CSS brut. Pour SCSS ou Less, compilez d'abord avec SCSS vers CSS ou Less vers CSS, puis minifiez la sortie.

Combien plus petit devient-il ?

Typiquement 20–40 % plus petit selon les espaces et commentaires. Un CSS très commenté ou formaté peut voir des réductions plus importantes. La réduction exacte dépend de votre entrée.

Outils connexes

Pour la spécification CSS : W3C CSS. MDN CSS est la référence. cssnano et PostCSS offrent une minification avancée en temps de build.

Minificateur CSS