Minifieur et formateur CSS

Collez une feuille de style, puis choisissez de la rendre plus petite ou plus facile à lire. Le résultat et le nombre d'octets avant et après se mettent à jour pendant la saisie.

Gratuit Fonctionne dans votre navigateur Vérifié le mardi 10 novembre 2026

Mode

Minifier retire ce dont le navigateur n'a pas besoin. Mettre en forme place chaque déclaration sur sa propre ligne.

Collez une feuille de style. Les chaînes et les url() sont conservées telles quelles.

Résultat

Octets avant — La taille du texte collé, comptée en octets UTF-8.
Octets après — La taille du résultat, comptée en octets UTF-8.
Économie — De combien le CSS minifié est plus petit que le texte collé.
Commentaires retirés — Commentaires retirés, à l'exception des notices /*!, qui sont conservées.
Résultat

Cet outil fonctionne dans votre navigateur. Ce que vous saisissez ne nous est pas envoyé.

Mode d'emploi

  1. Collez votre feuille de style dans CSS. Les chaînes et les url() sont conservées telles quelles.
  2. Laissez Mode sur Minifier (plus petit) pour réduire le CSS, ou choisissez Mettre en forme (lisible) pour le rendre facile à lire.
  3. Comparez Octets avant et Octets après pour voir ce qui a été économisé.
  4. Copiez le Résultat, ou téléchargez-le sous le nom styles.css.

Ce que la minification retire et ce qu'elle garde

Un commentaire CSS va de /* à */ et il est retiré, sauf une notice qui commence par /*! , que l'outil conserve pour la licence ou la mention d'auteur qu'elle porte. La spécification CSS Syntax définit le commentaire, et l'outil lit les chaînes et les jetons url() selon les mêmes règles : leur contenu est donc copié tel quel.

Les espaces disparaissent là où la grammaire n'en a pas besoin : autour des accolades, des virgules, des deux-points dans les déclarations, et avant un point d'exclamation. Le dernier point-virgule d'un bloc disparaît, car l'accolade fermante termine le bloc de toute façon. Un espace avant deux-points dans un sélecteur reste, car le sélecteur .card :hover n'a pas le même sens que .card:hover.

a { color: red; }  devient  a{color:red}

Couleurs, zéros et raccourcis qui ne sont pas faits

Une couleur hexadécimale dont les paires se répètent s'écrit avec trois ou quatre chiffres : #ffffff devient #fff, et #aabbccdd devient #abcd. Les lettres sont écrites en minuscules. Une couleur dans un sélecteur n'est jamais modifiée, car un sélecteur comme #aabbcc désigne un identifiant.

Une longueur de 0px en tête de valeur devient 0. À l'intérieur d'une fonction comme calc(), et dans une propriété personnalisée qui commence par deux tirets, la longueur est laissée telle quelle, car un 0 seul n'est pas lu comme une longueur dans tous les contextes. La mise en forme ne modifie ni couleur ni longueur.

  • Les tailles sont comptées en octets UTF-8, c'est-à-dire comme les envoie un serveur : une lettre accentuée prend deux octets.
  • Testez la page après la minification, car une astuce rare pour un vieux navigateur peut dépendre d'un espace que le minifieur retire.

Exemple détaillé : une règle avec un commentaire, une couleur et un zéro

Le texte .card { color: #aabbcc; /* note */ margin: 0px 10px; } contient un commentaire, une couleur hexadécimale dont les paires se répètent et une longueur nulle en tête de valeur. La minification retire le commentaire et les espaces, écrit #abc pour la couleur et 0 pour le zéro.

Le résultat est .card{color:#abc;margin:0 10px}, et la règle fonctionne exactement comme avant.

Questions fréquentes

Le CSS minifié est-il le même que l'original pour le navigateur ?

Oui : pour le navigateur, les règles s'appliquent de la même façon, car l'outil retire seulement ce que la grammaire CSS n'exige pas. Vérifiez tout de même la page après la minification, car une astuce rare peut dépendre d'un espace.

Pourquoi l'outil ne retire-t-il pas tous les zéros avec unité ?

Un zéro à l'intérieur d'une fonction comme calc(), et dans une propriété personnalisée, n'est pas toujours lu comme une longueur : l'outil raccourcit donc 0px seulement en tête de valeur. Le résultat reste ainsi sûr dans tous les cas traités.

Pourquoi la mise en forme place-t-elle les commentaires sur leur propre ligne ?

Chaque commentaire est écrit sur sa propre ligne, au niveau de la règle à laquelle il appartient, pour que la structure de la feuille de style reste facile à suivre. Les notices qui commencent par /*! sont conservées aussi.

L'outil vérifie-t-il les erreurs de mon CSS ?

Non. Il lit la structure : il vérifie que les accolades, les chaînes et les url() sans guillemets sont fermés. Il ne contrôle pas si un nom de propriété ou une valeur est valide : utilisez un validateur pour cela.

Mon CSS est-il envoyé ou enregistré quelque part ?

Non. La minification et la mise en forme se font dans votre navigateur. Rien n'est enregistré ni envoyé à notre serveur : copiez donc le résultat avant de quitter la page.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.

Nous utilisons des cookies nécessaires au fonctionnement du site. Avec votre accord, Google utilise aussi des cookies publicitaires pour afficher des annonces personnalisées. Si vous les refusez, vous voyez toujours des annonces, mais elles ne sont pas personnalisées.