Minifier CSS directement dans votre navigateur
Pour minifier CSS, collez simplement votre feuille de style : l'outil retire les commentaires, les sauts de ligne et chaque espace dont le navigateur n'a pas besoin. La version compressée apparaît en dessous en une fraction de seconde, avec le nombre exact d'octets gagnés. Rien à installer, aucune étape de build, et rien de ce que vous collez n'est envoyé : tout se passe en ligne, dans votre navigateur.
Minifier du CSS en trois étapes
- Collez ou tapez votre CSS dans la zone CSS brut.
- Un instant après la dernière frappe, le CSS minifié s'affiche en dessous, avec la taille d'origine, la nouvelle taille et le pourcentage gagné. Il n'y a aucun bouton à presser.
- Touchez Copier dans le presse-papiers pour le coller dans votre projet, ou Télécharger .min.css pour l'enregistrer comme fichier.
Un CSS mal formé ne fait jamais planter l'outil : il est minifié aussi loin qu'il peut être lu. Vous pouvez donc coller du code à moitié écrit et le corriger ensuite.
Ce que la minification retire de votre CSS
Chaque règle se comporte exactement comme avant ; seul disparaît ce qui sert à l'œil humain. Les commentaires partent, les blancs se resserrent, les espaces autour des accolades, des deux-points et des virgules disparaissent, et le dernier point-virgule avant une accolade fermante est supprimé. Les chaînes entre guillemets, les valeurs url() et les caractères échappés sont recopiés tels quels : "a b" garde son espace.
Avant : /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Après : .btn{color:#fff;margin:0 auto}
Compresser CSS : de combien la taille baisse-t-elle ?
Tout dépend de la quantité de commentaires et d'espaces dans le fichier. Une feuille de style très commentée et bien indentée perd souvent entre un quart et la moitié de son poids. Sous le résultat, vous voyez la taille d'origine, la taille minifiée et le gain exact en pourcentage.
Un fichier plus léger se télécharge plus vite et la page s'affiche plus tôt. Pour transférer encore moins, votre serveur web peut aussi envoyer le fichier minifié en gzip ou en Brotli.
Garder ou supprimer les commentaires de licence
Les commentaires qui commencent par /*! contiennent en général la licence ou la mention de copyright d'une bibliothèque. Ils sont conservés par défaut, car beaucoup de licences exigent que cette mention accompagne le code.
Décochez Conserver les commentaires de licence, sous la zone de saisie, pour les supprimer aussi et obtenir le fichier le plus petit possible.
Un CSS minifié est-il sûr en production ?
Oui : il ne manque que des caractères sans effet sur la façon dont le navigateur lit la feuille de style. Gardez votre fichier lisible comme source et mettez en ligne la version .min.css, par exemple style.css à côté de style.min.css.
Questions fréquentes
À quoi sert un CSS minifier ?
Il retire tout ce dont le navigateur n'a pas besoin pour lire vos styles : commentaires, sauts de ligne, indentation, espaces autour des accolades, des deux-points et des virgules, et le dernier point-virgule de chaque règle. Le résultat se comporte exactement comme l'original mais pèse moins, donc il se télécharge plus vite.
Comment minifier du CSS sans rien installer ?
Collez votre CSS dans la zone « CSS brut ». La version minifiée apparaît juste en dessous, avec le nombre d'octets gagnés. Touchez « Copier dans le presse-papiers » pour la coller dans votre projet ou « Télécharger .min.css » pour l'enregistrer.
Compresser du CSS, est-ce la même chose que le minifier ?
Oui, dans l'usage courant les deux veulent dire réduire le texte sans changer ce qu'il fait. Collez la feuille de style ici, puis copiez ou téléchargez le résultat compressé. Pour aller plus loin, votre serveur web peut aussi compresser le fichier minifié en gzip ou en Brotli.
Comment retirer tous les commentaires d'un fichier CSS ?
Collez votre CSS et décochez « Conserver les commentaires de licence ». Tous les commentaires sont alors supprimés, y compris ceux qui commencent par /*!. Laissez l'option cochée pour garder uniquement ces mentions de licence.
Comment réduire la taille d'un fichier CSS ?
En le minifiant : les commentaires et les espaces inutiles représentent souvent un quart à la moitié du poids d'une feuille de style bien indentée. Le pourcentage affiché sous le résultat indique le gain exact pour votre fichier. Côté serveur, gzip ou Brotli réduisent encore le transfert.
Qu'est-ce qu'un fichier .min.css ?
C'est la copie minifiée d'une feuille de style, nommée ainsi par convention pour être rangée à côté de la source lisible, par exemple style.css et style.min.css. Modifiez le fichier lisible et liez le fichier .min.css sur votre site en ligne.
Peut-on rendre lisible un CSS minifié ?
Oui, mais pas à l'identique : la minification efface la mise en forme d'origine. Collez le code minifié dans le Formateur de code pour le réindenter. Les commentaires supprimés ne reviennent pas, gardez donc toujours votre source.
Que se passe-t-il si mon CSS contient une erreur ?
L'outil ne plante pas. Votre CSS est minifié aussi loin qu'il peut être lu, ce qui permet de coller du code inachevé et de le corriger après.
Recommandés
-
Support d'ordinateur portable pliable Amazon BasicsPlace l'écran à hauteur des yeux pendant que tu allèges ton code.
-
Web Performance Fundamentals (Nadia Makarevich)Un CSS plus léger n'est qu'un début : apprends à analyser et accélérer tout le site.
-
Souris sans fil Logitech MX Master 3SPrécise et silencieuse pour de longues journées de développement front-end.
Aide à garder les outils gratuits. ✨
Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
