TanodTools
FR

Minifier et indenter du CSS

Collez une feuille de style pour la compresser avant la mise en production ou la rendre lisible, et voyez combien d'octets vous gagnez.

Fonctionne entièrement dans votre navigateur

Mode
Commentaires

Données jusqu'à environ 10 Mo. L'outil retire uniquement les espaces et les commentaires ; il ne fusionne pas les règles, ne réécrit pas les valeurs et ne supprime pas le CSS inutilisé.

Comment minifier ou indenter du CSS

  1. Collez votre CSS dans le champ, ou cliquez sur Insérer un exemple.
  2. Choisissez Minifier pour le compresser, ou Indenter pour le mettre en forme avec votre indentation. Cochez ou décochez l'option des commentaires de licence quand vous minifiez.
  3. Vérifiez le gain de taille, puis copiez le résultat ou téléchargez-le en fichier .css.

Minifier du CSS sans le casser

Minifier une feuille de style, c'est retirer tout ce que le navigateur ignore : commentaires, indentation, sauts de ligne et espaces autour de la ponctuation. Les fichiers plus légers se téléchargent et s'analysent plus vite, et pour une grosse feuille de style le gain représente souvent d'un quart à la moitié de sa taille avant compression. Les règles et leur ordre restent exactement tels qu'écrits.

La difficulté est de savoir quels espaces le navigateur ignore. Une espace entre deux sélecteurs, comme dans nav a, est un combinateur qui signifie « n'importe quel descendant » : nav a et nava sont donc deux choses différentes. Dans calc(1rem + 2px), les espaces autour de + sont obligatoires, et calc(1rem+2px) est invalide. Le texte entre guillemets et dans url() est une donnée, pas de la syntaxe. Un minificateur fait d'expressions régulières se trompe souvent sur l'un de ces points ; celui-ci lit la feuille de style comme une suite de jetons et ne retire les espaces que là où la grammaire les rend facultatifs.

Indenter, c'est l'opération inverse : une déclaration par ligne, indentée à l'intérieur des accolades, pour qu'un fichier minifié venant d'un CDN devienne lisible et comparable.

Conseils

Questions fréquentes

Mon CSS est-il envoyé en ligne ?

Non. La minification se fait dans votre navigateur, et la bibliothèque d'indentation n'est chargée depuis ce site que si vous choisissez Indenter. Votre feuille de style n'est jamais envoyée nulle part.

Que change exactement Minifier ?

Il retire les commentaires et les espaces autour des accolades, points-virgules, virgules et combinateurs (>, ~, +), et supprime le dernier point-virgule de chaque bloc. Il garde l'espace dans a b (le combinateur descendant), dans and (min-width: ...) et autour de + et - à l'intérieur de calc(), clamp(), min() et max(), où le retirer casserait la valeur.

Touche-t-il aux chaînes et à url() ?

Non. Tout ce qui est entre guillemets, y compris du texte qui ressemble à un commentaire ou à une accolade, et le contenu de url() sont copiés caractère par caractère.

Raccourcit-il les couleurs ou les nombres ?

Non. Les valeurs comme #336699, 0.5em et 0px restent telles qu'écrites. Ces réécritures font gagner peu et comportent un certain risque : seuls les espaces et les commentaires sont donc retirés.

Comment savoir si le CSS minifié est sûr ?

Après chaque passage, la page analyse votre original et le résultat avec l'analyseur CSS du navigateur et compare ce qu'il lit. S'ils diffèrent, un avertissement apparaît au-dessus du résultat. S'ils concordent, le navigateur voit les mêmes règles.

Que sont les commentaires de licence ?

Les commentaires qui commencent par /*! sont conservés par convention par les minificateurs, car ils contiennent un texte de copyright ou de licence que la licence peut vous obliger à garder. Désactivez l'option pour les retirer aussi.