Minificateur CSS
Des feuilles de style plus légères, le même design
Ce minificateur CSS gratuit fonctionne en ligne, retire les commentaires et les espacements de votre feuille de style et vous rend un fichier plus léger. D’abord, collez votre CSS ou déposez vos fichiers. Puis cliquez sur l’action voulue. Enfin, copiez le résultat, car tout le travail se fait dans cet onglet.
- GratuitPrix
- InutileCompte
- AucunEnvois
- À chaque passageVérifié
Minificateur CSS
Collez une feuille de style ou déposez vos fichiers — rien n’est envoyé
Résultat minifié
- Original
- —
- Minifié
- —
- Économisé
- —
- Avec gzip
- —
- Règles
- —
- Durée
- —
Prêt. Collez votre CSS, puis appuyez sur Minifier ou Embellir.
Pourquoi minifier ses feuilles de style CSS avant la mise en ligne ?
Un minificateur CSS réécrit une feuille de style écrite pour des humains en une feuille que le navigateur télécharge plus vite. Il supprime vos commentaires, votre indentation et les espaces qui n’aident que le lecteur. Cependant, il garde chaque règle écrite, donc la page reste exactement identique.
Le gain compte parce qu’une feuille de style bloque le rendu. Un navigateur n’affiche pas un seul pixel avant d’avoir votre CSS, donc chaque octet retiré arrive avant le premier affichage et non après. Par conséquent, une feuille qui passe de 60 Ko à 42 Ko montre votre design plus tôt.
On appelle parfois ce travail compresseur CSS. Les deux termes désignent une seule chose : moins de caractères, un comportement identique. Bref, vous publiez le petit fichier et gardez le lisible.
Minifier sans risque suppose de savoir ce dont l’analyseur a besoin. La référence MDN sur la syntaxe CSS en est la description honnête la plus courte.
Là où la plupart des outils cassent discrètement votre CSS
Trois pièges causent presque tous les dégâts, et un outil fondé sur rechercher-remplacer tombe dans chacun. D’abord, `calc(100% - 20px)` a besoin des espaces autour de ce signe moins. Retirez-les et le navigateur ignore toute la déclaration, donc votre mise en page s’effondre sans la moindre erreur.
Ensuite, `.card .title` et `.card.title` sélectionnent des éléments différents. Cet espace est le combinateur de descendance, et il a un sens. Enfin, une data URI dans `url()` contient des points-virgules et des virgules qui ne sont pas du tout des séparateurs.
Cet outil lit votre feuille de style caractère par caractère, il sait donc quel espace il regarde. De ce fait, il retire les espaces sans signification et garde ceux qui en ont une.
Quand minifier le CSS
Minifiez en dernier, après votre build et après vos tests. Gardez la feuille lisible dans votre éditeur et publiez la petite, car personne ne devrait jamais modifier à la main un fichier minifié.
C’est surtout rentable pour la feuille que charge chaque page. Par exemple, une feuille partagée que chaque visiteur télécharge mérite bien plus d’attention qu’un fichier propre à une page.
Et le CSS inutilisé ?
Retirer les règles que rien n’utilise est un autre travail, et risqué. Une classe ajoutée plus tard par votre JavaScript semble inutilisée pour un scanner, donc cet outil ne devine jamais. Au contraire, il raccourcit ce que vous avez.
Sur cette page
- L’outil
- Pourquoi minifier ses feuilles de style CSS avant la mise en ligne ?
- Minifier du CSS en quatre étapes
- Un minificateur CSS qui vérifie son propre travail
- Tirer le meilleur de ce compresseur CSS
- Les erreurs qui cassent une feuille minifiée
- FAQ du minificateur CSS
- D’autres outils utilisables tout de suite
Continuer
Minifier du CSS en quatre étapes
Ni installation, ni inscription, ni attente. Cet onglet suffit, rien d’autre à ouvrir.
- 1
Collez ou chargez votre fichier CSS
Collez votre CSS dans l’éditeur, ou déposez vos fichiers .css dans l’onglet d’import. Les deux voies font le même travail.
- 2
Choisissez ce qui part
Les commentaires partent par défaut. De plus, vous pouvez raccourcir les couleurs et retirer les règles au contenu vide.
- 3
Appuyez sur minifier
L’outil parcourt chaque caractère, réécrit la feuille, puis relit sa propre réponse avant de vous montrer quoi que ce soit.
- 4
Copiez ou téléchargez
Prenez le résultat en texte, ou enregistrez-le en fichier .min.css. Pendant ce temps, votre original reste exactement tel que vous l’avez laissé.
Un minificateur CSS qui vérifie son propre travail
Les navigateurs échouent en silence face à un CSS cassé. Ils ignorent la déclaration et continuent, donc personne ne vous prévient que quelque chose a mal tourné.
Il protège calc()
Dans calc, clamp, min et max, un plus ou un moins entouré d’espaces garde ses espaces. Par conséquent, votre arithmétique survit, là où la plupart des minificateurs échouent en silence.
Il vérifie chaque passage
L’outil relit sa propre sortie et la compare à ce qu’il voulait écrire. Si quelque chose diffère, il vous le dit au lieu de se taire.
Il connaît vos sélecteurs
Un espace entre deux sélecteurs signifie « descendant », donc il reste. Autour d’un combinateur d’enfant ou de frère, il ne signifie rien, donc il part.
Il laisse passer url() tel quel
Une data URI peut contenir points-virgules, virgules et parenthèses. Cet outil traite tout le url() comme un seul bloc et le copie octet pour octet.
Vos fichiers restent dans cet onglet
Votre feuille de style ne voyage jamais. Il n’y a ni requête, ni stockage, ni journal, donc même un travail client peut être collé ici en toute sécurité.
Il affiche le nombre réel, sans arrondi
Vous voyez la taille gzip à côté de la taille brute, car c’est le gzip qui atteint réellement votre visiteur.
Tirer le meilleur de ce compresseur CSS
Quelques petites habitudes gardent une feuille minifiée prévisible.
- Gardez l’original. Modifiez toujours la feuille lisible. Ainsi, la copie minifiée reste quelque chose que vous générez, jamais quelque chose que vous entretenez.
- Minifiez en dernier. Lancez-le après Sass, après PostCSS et après vos tests. Sinon, vous testez un fichier et en publiez un autre.
- Servez-le en gzip. Minifier et compresser s’additionnent. De ce fait, la taille transférée tombe bien en dessous de la taille du fichier sur le disque.
- Attention aux bannières de licence. Laissez cet interrupteur activé quand un framework que vous utilisez exige que son commentaire d’attribution voyage avec le code.
- Vérifiez l’interrupteur des règles vides. Il est désactivé par défaut, car une règle vide documente parfois une intention. Activez-le quand vous savez que ce n’est pas le cas.
- Surveillez le badge de vérification. Si un passage indique un jour qu’il n’a pas pu vérifier, ne publiez pas ce fichier. Envoyez-nous plutôt le cas et gardez votre original.
Les erreurs qui cassent une feuille minifiée
Presque toutes les histoires de « le minificateur a cassé mon design » sont l’une de ces trois.
Perdre les espaces de calc
Un outil qui les retire transforme une longueur valide en rien. Votre mise en page s’effondre alors sans une seule erreur dans la console.
Modifier le fichier minifié
Vos modifications disparaissent au prochain build. La correction se fait donc toujours dans la feuille source.
Minifier deux fois
Repasser une feuille déjà minifiée ne fait rien gagner, et rend seulement la comparaison suivante plus difficile à lire.
FAQ du minificateur CSS
Ce minificateur CSS va-t-il casser mon design ?
Il ne devrait pas, et il le vérifie au lieu de le supposer. L’outil relit chaque passage et le compare à ce qu’il voulait écrire, donc il repère une accolade perdue ou un url() abîmé et vous le dit, au lieu de vous livrer une feuille cassée.
calc() continue-t-il de fonctionner ?
Oui, et cela pèse plus qu’on ne le croit. Dans calc, clamp, min et max, les espaces autour d’un plus ou d’un moins restent exactement là où vous les avez mis, car les retirer transforme une longueur valide en déclaration que le navigateur ignore.
De combien ma feuille de style sera-t-elle plus légère ?
Une feuille lisible perd en général 20 à 40 pour cent, et l’outil affiche le chiffre exact pour votre fichier. Cependant, une feuille déjà compacte gagne bien moins, puisqu’il y a moins d’espaces à retirer.
Retire-t-il le CSS que je n’utilise pas ?
Non, et c’est voulu. Une classe que votre JavaScript ajoute plus tard semble inutilisée pour n’importe quel scanner, donc deviner casserait de vraies pages. C’est pourquoi cet outil raccourcit ce que vous avez écrit et vous laisse les décisions.
Mon code CSS est-il transmis à un serveur ?
Non. Tout le minificateur tourne dans votre onglet. Il n’y a ni requête, ni stockage, ni journal, vous pouvez donc coller sans risque un travail confidentiel.
Puis-je minifier plusieurs fichiers à la fois ?
Oui. Ouvrez l’onglet d’import et déposez autant de fichiers .css que vous voulez. L’outil minifie chacun séparément, et vous pouvez les télécharger un par un.
D’autres outils utilisables tout de suite
Chacun tourne dans votre navigateur et ne demande rien.
Minificateur JavaScript
Allégez un script de la même façon, avec la même vérification que le résultat correspond toujours à votre code.
Ouvrir l’outil →Compresseur SVG
Allégez des fichiers SVG ou du balisage collé, et retirez les scripts cachés dedans.
Ouvrir l’outil →Convertisseur PNG en WebP
Convertissez un lot d’images dans un format plus léger, en gardant la transparence.
Ouvrir l’outil →
Allégez votre prochaine feuille de style en quelques secondes
Collez votre CSS, appuyez sur un bouton et vérifiez vous-même le gain. Rien ne voyage nulle part et rien n’est conservé.