Formateur CSS
Ré-indentez du CSS pour le rendre lisible, ou minifiez-le pour la production. Les règles-at imbriquées, les commentaires et les valeurs entre guillemets sont tous traités correctement.
Vos données ne quittent jamais votre navigateur. Cet outil fonctionne entièrement sur votre appareil.
Ce que fait le formateur
Chaque déclaration occupe sa propre ligne, indentée selon la profondeur d'imbrication, avec une espace après chaque deux-points et un point-virgule après chaque déclaration, y compris la dernière. Les listes de sélecteurs sont éclatées à raison d'un par ligne pour que les longues listes restent lisibles.
Les règles-at imbriquées comme les requêtes media et supports augmentent l'indentation : la structure d'une feuille de style responsive se lit ainsi d'un coup d'œil.
Ce qu’il ne cassera pas
Les points-virgules et deux-points contenus dans des chaînes entre guillemets sont laissés tels quels : content: "a;b" survit donc. Il en va de même de tout ce qui se trouve dans url(), ce qui compte pour les URI de données — elles contiennent à la fois des deux-points et des points-virgules, et seraient sinon découpées.
Les commentaires sont conservés et placés sur leur propre ligne.
La minification
Minifier retire les commentaires, écrase les espaces et supprime le dernier point-virgule de chaque bloc. Le résultat est un CSS fonctionnellement identique, pour environ la moitié de la taille.
Comme pour le JSON, gzip élimine déjà l'essentiel de cette redondance sur le réseau : le gain pratique sur une réponse compressée est donc plus faible que le décompte brut d'octets ne le laisse croire.
Questions fréquentes
Le formatage change-t-il le comportement de mon CSS ?
Non. Seuls les espaces et la présence des points-virgules finals facultatifs changent. La spécificité des sélecteurs, l'ordre des déclarations et chaque valeur restent exactement tels qu'écrits.
Les requêtes media et l’imbrication sont-elles gérées ?
Oui. Les règles-at comme @media, @supports et @layer augmentent la profondeur d'indentation : les blocs imbriqués sont donc correctement indentés.
Une URI de données dans une image de fond survit-elle ?
Oui. Tout ce qui se trouve dans url() est recopié comme un bloc : les deux-points et points-virgules d'une URI de données ne sont donc pas pris pour de la structure CSS.
Faut-il minifier son CSS si le serveur utilise gzip ?
Le gain est modeste. Gzip écrase déjà les espaces répétés : minifier d'abord ne fait généralement gagner que quelques pour cent de plus. Cela reste utile pour le CSS intégré au HTML, où chaque octet se trouve sur le chemin critique.
Outils similaires
- Formateur HTMLRé-indentez du HTML pour que son imbrication soit lisible. Les fragments fonctionnent aussi bien que les documents entiers, et le contenu des blocs pre, script et style reste exactement tel qu'écrit.
- Formateur XMLRé-indentez du XML pour en rendre la structure lisible, et sachez immédiatement s'il n'est pas bien formé. Les sections CDATA et les déclarations sont préservées à l'identique.
- Formateur JSONCollez du JSON pour l'afficher avec une indentation cohérente, ou minifiez-le à nouveau. Un JSON invalide est signalé avec la ligne et la colonne exactes, pour que vous trouviez le problème.
- Encodeur Base64Encodez n'importe quel texte en Base64, émojis et écritures non latines compris. Basculez sur l'alphabet compatible URL quand le résultat doit voyager dans une adresse.