Minificateur CSS
Allégez une feuille de style en supprimant commentaires et espaces, sans casser une seule règle.
Minifier du CSS en ligne
Chaque octet de CSS doit être téléchargé et analysé avant que le navigateur puisse afficher la page : les feuilles de style gagnent donc à rester légères. La minification retire tout ce dont le navigateur n'a pas besoin : commentaires, indentation et espaces facultatifs. Cette page est le formateur de code réglé sur CSS, avec un exemple déjà minifié pour vous.
Ce qui reste et ce qui part
| Avant | Après |
|---|---|
.card { margin : 0 auto ; } | .card{margin:0 auto} |
width: calc(100% - 32px); | width:calc(100% - 32px) |
a > b | a>b |
/* comment */ | supprimé |
L'espace dans calc() doit rester, car 100%-32px est du CSS invalide. Il en va de même pour l'espace de 0 auto, qui sépare deux valeurs.
Minifier, compresser, ou les deux ?
Minification et compression côté serveur s'additionnent. Gzip ou Brotli sur le serveur rendent généralement un fichier CSS 70 à 80 % plus léger, et minifier d'abord fait gagner encore un peu. Si votre outil de build minifie déjà, vous n'avez pas besoin de cette page pour la production ; elle sert aux extraits qui échappent au build : styles en ligne dans des e-mails, CSS critique collé dans un head, ou feuille de style d'un site sans étape de build.
Outils associés
Pour supprimer les règles qu'une page n'utilise jamais, ce qui fait gagner bien plus que la minification, utilisez la suppression du CSS inutilisé. Pour les scripts qui accompagnent la feuille de style, utilisez le minificateur JavaScript.