Collez une feuille de style dans le minifieur CSS et obtenez une sortie minifiée ou formatée localement, avec conservation des commentaires de licence sur demande.
Ce que la minification supprime : commentaires et espaces redondants
Une feuille de style écrite à la main consacre une grande part de ses octets à l'indentation, aux sauts de ligne et aux commentaires. Un minifieur les réduit au minimum exigé par la grammaire CSS.
Le résultat conserve la même cascade : mêmes sélecteurs, mêmes déclarations, mêmes styles calculés. Seuls les octets entre les jetons changent.
.card { color: #111827; padding: 1rem;}/* .card minifié : */.card{color:#111827;padding:1rem}Ce qu'un minifieur correct doit préserver
Les chaînes comptent : `content: "a; b"` contient un point-virgule à l'intérieur d'une chaîne, et le supprimer changerait le texte de sortie. Un minifieur sûr protège les littéraux de chaîne avant de toucher à la ponctuation.
Les valeurs url() comptent : `background: url("data:image/svg+xml;utf8,...")` contient des caractères qui ressemblent à des séparateurs mais font partie de l'URL.
Les commentaires de licence comptent quand vous distribuez du CSS open source : les commentaires commençant par `/*!` sont conventionnellement conservés, et l'option doit être explicite plutôt que supposée.
Un minifieur qui ne compte que les accolades et supprime chaque `;` corrompra silencieusement ces cas. Vérifiez la sortie après minification : rendez la page, puis comparez le comportement à l'original.
La direction inverse : formater du CSS minifié
Le CSS minifié est difficile à lire parce qu'il n'a jamais été conçu pour ça. Le formatage réintroduit sauts de ligne et indentation : une règle par bloc, une déclaration par ligne, media queries et keyframes imbriqués indentés.
C'est un passage de formatage, pas une passe sémantique. Il ne restaure pas les commentaires déjà supprimés et ne répare pas les points-virgules manquants. Utilisez-le sur le fichier que vous avez, puis relisez le résultat.
Outil de build, navigateur, ou les deux
Les pipelines de production minifient généralement à la compilation avec des outils comme cssnano ou Lightning CSS. Un minifieur dans le navigateur est utile pour une sortie ponctuelle : un extrait copié, un fichier de thème d'un fournisseur ou du CSS intégré dans une page générée.
Quelle que soit la voie, mesurez la charge réelle. Dans DevTools → Réseau, comparez la taille transférée de la feuille de style avant et après ; sur une connexion lente, la différence se voit directement dans le temps de chargement.
Vérifier la sortie sans rien téléverser
Coller votre CSS dans un minifieur en ligne, c'est remettre votre feuille de style à un tiers. Le minifieur de ce site s'exécute entièrement dans le navigateur — aucune requête réseau n'est émise pendant le traitement.
Confirmez-le vous-même : ouvrez DevTools → Réseau, collez une feuille de style et observez le journal des requêtes. Rien n'apparaît parce que rien ne quitte votre appareil. Le même principe zéro téléversement s'applique à d'autres utilitaires locaux comme le formateur JSON et l'aperçu Markdown.
FAQ
Q.Le minifieur téléverse-t-il mon CSS ?
A.Non. La minification et le formatage s'exécutent localement dans votre navigateur. Ouvrez DevTools → Réseau et collez du CSS pour constater qu'aucune requête n'est émise.
Q.Les commentaires de licence seront-ils supprimés ?
A.Seulement si vous désactivez l'option. Par défaut, les commentaires commençant par /*! sont conservés pour que l'attribution de licence survive à la minification.
Q.Pourquoi le dernier point-virgule d'une règle est-il supprimé ?
A.Le point-virgule avant une accolade fermante est facultatif en CSS. Le retirer économise un octet par règle et ne change pas la façon dont la déclaration est analysée.
Q.Comment savoir que le CSS minifié se comporte de la même façon ?
A.Rendez la page avec la feuille de style minifiée et comparez à l'original : styles calculés, mise en page et comportement doivent correspondre. Utilisez DevTools pour comparer les deux fichiers si besoin.
Références
Les règles d'analyse citées ici proviennent des spécifications du W3C :
- CSS Syntax Module Level 3 – tokenisation et commentaires : https://www.w3.org/TR/css-syntax-3/
- CSS Values and Units Module Level 4 – url() et chaînes : https://www.w3.org/TR/css-values-4/
- CSS Conditional Rules Module Level 3 – @media : https://www.w3.org/TR/css-conditional-3/
Minifiez une feuille de style maintenant
Commentaires supprimés, espaces réduits, blocs de licence conservés — le tout traité localement dans votre navigateur.
Minifiez les octets, vérifiez le comportement
La minification CSS est une transformation sûre et mécanique quand les chaînes, les valeurs url() et les commentaires de licence sont protégés. Exécutez-la localement, mesurez la charge dans DevTools et rendez le résultat avant de le livrer.
Ouvrez le minifieur CSS, collez votre feuille de style et copiez la sortie compressée.