Formateur CSS

Collez une feuille de style ou un extrait CSS et cet outil le mettra en forme avec une indentation cohérente, ou le compressera en une seule ligne dense. Un CSS mal formé, avec des accolades non fermées ou des règles orphelines, est tout de même formaté plutôt que de provoquer une erreur, ce qui permet de nettoyer un CSS brouillon sans corriger chaque erreur de syntaxe au préalable.

Comment fonctionnent la mise en forme et la minification ?

La mise en forme repose sur la bibliothèque js-beautify, que vous pouvez régler sur une indentation à 2 espaces, 4 espaces ou tabulation. Elle travaille sur des tokens plutôt que sur une analyse syntaxique stricte, donc une feuille de style avec une accolade fermante manquante ou un point-virgule égaré ressort tout de même correctement indentée au lieu de déclencher une erreur, ce qui compte quand vous nettoyez du CSS copié depuis les outils de développement du navigateur ou un fichier inachevé. La minification prend le chemin inverse : elle supprime les commentaires, réduit les espaces et retire ceux qui ne sont pas nécessaires autour de { } ; : , >, tout en laissant intact le contenu des chaînes entre guillemets et des appels url(...), pour qu’un chemin ou un nom de police avec des espaces survive tel quel.

Le minificateur repose sur une série de passes par expressions régulières plutôt que sur un analyseur CSS complet, ce qui lui laisse deux cas limites connus : une url() contenant une parenthèse fermante littérale à l’intérieur d’un argument entre guillemets n’est pas traitée correctement, et supprimer l’espace avant deux-points peut fusionner un combinateur descendant avec la pseudo-classe qui suit (transformant a :hover en a:hover, ce qui change ce que le sélecteur cible). Les deux cas restent rares en pratique, et l’outil accepte ce petit risque en échange de ne jamais bloquer sur une entrée imparfaite.

Mon CSS est-il envoyé quelque part ?

Non. La mise en forme et la minification se font entièrement dans votre navigateur, grâce à la bibliothèque intégrée. Rien n’est envoyé à un serveur, donc les feuilles de style propriétaires, le travail de clients ou les extraits récupérés avec du contenu réel restent sur votre machine, ce qui est utile quand le CSS à nettoyer vient d’une base de code interne que vous préférez ne pas coller dans un formulaire web quelconque.

Utilisations courantes : nettoyer une feuille de style minifiée enregistrée depuis l’affichage du code source, réduire un fichier CSS avant sa publication, ou reformater les styles d’un composant avec une largeur d’indentation cohérente pour une revue de code. Consultez la référence de syntaxe CSS de MDN pour voir comment sélecteurs, déclarations et règles at s’articulent entre eux.