Minificateur CSS
Réduisez des fichiers CSS et voyez exactement combien vous économisez.
Fonctionne dans votre navigateur. Rien de ce que vous tapez n'est envoyé nulle part.
- Affiche les octets économisés
- Retire les commentaires
- Rien n'est envoyé
Comment minifier du CSS
- Collez votre CSS.
- Vérifiez la taille économisée dans la ligne de statistiques.
- Copiez ou téléchargez le CSS minifié.
Ce qui est retiré
- Les commentaires écrits comme /* ... */
- Les espaces et retours à la ligne entre les règles et déclarations
- Un point-virgule final juste avant une accolade fermante
- Les règles en double ou redondantes, quand csso peut les fusionner en toute sécurité
- Les points-virgules superflus et les blocs de règles laissés vides sans déclaration à l'intérieur
Économies de taille habituelles
| Point de départ | Réduction approximative |
|---|---|
| CSS écrit à la main avec commentaires | 20 à 30 % |
| CSS déjà compact | 5 à 10 % |
| CSS généré par un préprocesseur | 10 à 20 % |
Quand minifier, et quand s'en abstenir
- Minifiez juste avant le déploiement, pas pendant l'édition active, car une feuille de style lisible se débogue bien plus vite.
- Ne minifiez pas un fichier déjà servi compressé en gzip et petit, où la différence de taille ne vaut pas l'étape de build supplémentaire.
Quand minifier fait la plus grande différence
- Les feuilles de style partagées sur de nombreuses pages, car les octets économisés se multiplient à chaque chargement.
- Les grands design systems ou bibliothèques de composants avec beaucoup de règles répétées et fusionnables.
- Les sites sans pipeline de build, où du CSS écrit à la main est servi directement sans autre étape de minification.
- Un framework CSS réduit aux seules classes utilitaires réellement utilisées sur la page.
FAQ Minificateur CSS
De combien mon CSS va-t-il rétrécir ?
En général de 10 à 30 %, plus si l'original a beaucoup de commentaires et d'espaces, moins s'il est déjà compact.
La minification change-t-elle l'apparence de ma page ?
Non. Minifier ne fait que retirer les espaces, les commentaires et la syntaxe redondante. Les règles qui s'appliquent à votre page restent les mêmes.
Cela fusionne-t-il les règles en double ?
Oui, quand c'est sûr de le faire, ce qui peut réduire le fichier davantage que le simple retrait des espaces.
Devrais-je garder le fichier original ?
Oui. Gardez la version lisible pour l'édition et utilisez la version minifiée seulement en production.
Quel minificateur est utilisé ici ?
csso, le même minificateur CSS utilisé par plusieurs plugins de bundler. Il fusionne aussi certaines règles en double ou redondantes au-delà du simple retrait des espaces.
Le CSS minifié est-il toujours sûr à coller dans une feuille de style ?
Oui, c'est du CSS standard avec les espaces retirés. Tout navigateur ou outil de build le lit exactement comme l'original.
Retire-t-il les préfixes de fournisseur dont j'ai encore besoin, comme -webkit- ?
Non. Les propriétés et valeurs avec préfixe de fournisseur restent exactement telles qu'écrites. Minifier ne retire que les espaces, les commentaires et les règles fusionnables en toute sécurité, jamais une propriété que votre CSS déclare réellement.
Qu'advient-il des propriétés personnalisées CSS (variables) ?
Elles sont conservées telles quelles, y compris leurs noms en -- et leurs valeurs, car minifier ne renomme ni ne résout les propriétés personnalisées.