Comment utiliser : Minifieur CSS
- Collez votre CSS, déposez un fichier
.cssdans la zone de saisie, ou cliquez sur Exemple. - Laissez les optimisations activées (elles sont toutes sûres) ou décochez celles que vous ne souhaitez pas.
- Consultez les économies sous l’éditeur, puis cliquez sur Copier ou Télécharger
styles.min.css. - Besoin de lire un fichier minifié ? Passez en mode Formater.
Qu’est-ce que la minification CSS ?
La minification CSS supprime tous les octets dont le navigateur n’a pas besoin : commentaires, indentation, sauts de ligne, le dernier point-virgule de chaque règle, et réécrit certaines valeurs sous des formes équivalentes plus courtes. La feuille de style obtenue fonctionne exactement de la même manière, mais elle est plus légère : elle se télécharge et s’analyse plus vite. Comme le CSS est bloquant pour le rendu, une feuille de style plus petite peut améliorer directement le First Contentful Paint et le Largest Contentful Paint.
Ce que fait ce minifieur
| Optimisation | Avant | Après |
|---|---|---|
| Commentaires et espaces | /* Buttons */ .btn , .link { … } | .btn,.link{…} |
| Dernier point-virgule | {color:red;} | {color:red} |
| Couleurs | #FFFFFF, #aabbccdd | #fff, #abcd |
| Unités sur zéro | margin:0px 0em | margin:0 0 |
| Nombres | 0.50rem, 1.0 | .5rem, 1 |
| Règles vides | .unused{} | (supprimée) |
Pourquoi c’est sûr
Les minifieurs trop agressifs cassent parfois les feuilles de style. Celui-ci applique uniquement des transformations qui ne peuvent pas modifier le comportement :
- Les chaînes de caractères, les valeurs
url()et les caractères échappés sont protégés et ne sont jamais modifiés. - Les unités ne sont supprimées que sur les longueurs :
0s,0deget0%conservent la leur (transition: 0set les sélecteurs de keyframes en ont besoin). Rien à l’intérieur decalc(),min()ouclamp()n’est modifié, carcalc(0 + 10px)est invalide. - La notation abrégée
flexest ignorée (flex: 1 1 0pxetflex: 1 1 0ne sont pas toujours équivalents dans les anciens moteurs), et les valeurs des propriétés personnalisées ne perdent que leurs espaces superflus. - Les espaces dans les sélecteurs sont conservés lorsqu’ils ont un sens :
a :hover(tout descendant survolé) est différent dea:hover. @layer name {}est conservé même vide, car il déclare l’ordre des couches. Les commentaires de licence commençant par/*!sont préservés par défaut.
Minification ou compression ?
La minification et la compression gzip/Brotli se cumulent. La compression supprime les répétitions ; la minification supprime les octets que la compression ne peut pas éliminer, comme les commentaires. La valeur Taille gzip indique à peu près ce qui transitera sur le réseau si votre serveur compresse les réponses (c’est le cas de la plupart). Pour un gain maximal, supprimez aussi les règles inutilisées avec un outil comme PurgeCSS, et n’intégrez en ligne que le CSS critique du contenu visible au chargement.
Vous voulez inspecter un fichier minifié ? Utilisez le mode Formater ici ou le Formateur CSS. Vous souhaitez vérifier les performances d’une page entière ? Lancez un test de vitesse de page.
Aussi recherché comme : minifier css, compresser css, compresseur css, optimiser css, réduire taille css, minifier css en ligne, minification css, css uglify.
Outils complémentaires : Minifieur CSS
- Formateur HTML — Collez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y compris les blocs <style> et <script> intégrés.
- Formateur JavaScript — Rendez lisible du JavaScript, JSON ou JSX avec l'indentation et le style d'accolades de votre choix, ou supprimez espaces et commentaires avec un minifieur vérifié.
- Compresseur d’images — Réduisez la taille de vos photos et de vos graphiques de 50 à 90 % sans perte de qualité visible.
- Formateur SQL — Collez une requête ou une migration complète pour obtenir un SQL lisible, avec une clause par ligne, des jointures alignées et une casse des mots-clés cohérente, selon la grammaire de votre base de données.
Questions fréquentes
La minification peut-elle casser mon CSS ?
calc()). Si votre CSS d’origine contient une erreur de syntaxe, elle reste dans le résultat. Validez donc un CSS qui se comporte de façon étrange.De combien mon CSS va-t-il diminuer ?
Dois-je quand même utiliser gzip ou Brotli ?
Pourquoi certains commentaires sont-ils conservés ?
/*! contiennent par convention des mentions de licence qui doivent rester avec le code. Décochez « Conserver les commentaires /*! licence */ » pour les supprimer également.