100 % local — vos données ne quittent jamais votre navigateur

Minifieur CSS — des octets en moins sur la page

Retirez les espaces d’une CSS. Chaînes, contenus d’url() et commentaires de licence /*! sont gardés : la feuille s’allège et rend la même page.

Instantané Privé Zéro cookie

Entrée CSS

Sortie CSS

Ce que fait cet outil

Du CSS lisible devient le plus petit CSS qui se comporte pareil.

a {
  margin: 0 auto;
  color: red;
}
a{margin:0 auto;color:red}

Les blancs autour de la ponctuation partent, le dernier point-virgule avant une accolade fermante part, et le reste demeure exactement tel qu’il était.

Les commentaires de licence restent

/*! normalize.css v8 | MIT License */
a { color: red }
/*! normalize.css v8 | MIT License */a{color:red}

Un commentaire qui commence par /*! est la convention que tous les minifieurs respectent : il signifie « celui-là n’est pas de la décoration ». C’est là que vivent les mentions de licence, et une licence exige souvent qu’elles voyagent avec le code. Ils étaient retirés avec le reste — un vrai défaut, trouvé en écrivant cette page puis corrigé. Les commentaires ordinaires partent toujours, puisque c’est ce que vous êtes venu chercher.

Les espaces qui veulent dire quelque chose sont gardés

  • Dans les chaînes. content: "a b" garde ses deux espaces : entre guillemets, un blanc est une valeur.
  • Dans url(). Une URL sans guillemets peut contenir une espace, une barre oblique ou un point-virgule, et aucun n’y est de la syntaxe.
  • Autour des opérateurs de calc(). calc(100% - 10px) sans ses espaces n’est plus la même expression : elle ne s’analyse plus.
  • Entre sélecteurs. a b, c’est « un b dans un a » ; a>b, a~b et a+b n’ont pas besoin de l’espace, et le perdent.

Ce qu’il ne fait pas

C’est un minifieur de blancs, et rien d’autre. Il ne raccourcit pas les couleurs, ne replie pas les propriétés raccourcies, n’ôte pas l’unité des zéros, ne fusionne pas les règles en double et ne réordonne rien. Ces transformations sont celles d’un optimiseur comme cssnano ou Lightning CSS, chacune porte un risque, et aucune n’est la raison pour laquelle on colle une feuille de style dans une boîte sur une page web.

Le formateur CSS de ce site fait le voyage inverse, pour quand vous voudrez relire le fichier.

Confidentiel par conception

Tout s’exécute localement dans votre navigateur en JavaScript. Vos données ne sont jamais envoyées sur un serveur, ce qui rend l’outil sûr pour des contenus sensibles, et il fonctionne hors ligne.

Questions fréquentes

Mes commentaires de licence sont-ils supprimés ?
Non, plus depuis l’écriture de cette page. `/*! … */` — un commentaire dont le premier caractère est un point d’exclamation — est la convention universelle du « celui-là, on le garde », et c’est là que vivent les mentions de licence. Ils étaient retirés avec le reste, ce qui ôtait discrètement de la feuille de style le texte qui dit qui l’a écrite, et que la licence oblige souvent à conserver. Les commentaires ordinaires, eux, partent toujours.
Mes couleurs et mes valeurs sont-elles raccourcies ?
Non. `#FFFFFF` reste `#FFFFFF` et `margin: 10px 10px 10px 10px` n’est pas replié en `10px`. C’est un minifieur de blancs, pas un optimiseur : chacune de ces réécritures est un jugement sur votre feuille de style, et certaines changent le comportement. Ce qui revient est votre CSS octet pour octet, moins l’espace entre les jetons.
Est-ce sûr avec `calc()` et les sélecteurs descendants ?
Oui — l’espace qui veut dire quelque chose est gardé. `calc(100% - 10px)` a besoin des espaces autour du moins, sans quoi l’expression ne s’analyse plus, et `a b` est un sélecteur descendant là où `ab` serait un élément. Les espaces entre mots sont conservés ; ceux qui entourent `{`, `}`, `:`, `;` et `,` sont ceux qui partent.

Convertisseurs associés