Comment fonctionne l'embellissement CSS
L'embellisseur lit votre feuille de styles caractère par caractère, suit le niveau d'imbrication de chaque bloc et le réémet avec un espacement cohérent. Il ne modifie jamais ce que font les styles — seulement leur apparence dans le fichier.
- Tokeniser. La bibliothèque analyse votre saisie en un flux de tokens : sélecteurs, noms de propriété, valeurs, at-rules, commentaires et les accolades, deux-points et points-virgules qui les séparent. Les chaînes et les valeurs url() sont reconnues comme des unités uniques, de sorte qu'une accolade à l'intérieur d'une propriété content n'est jamais confondue avec un délimiteur de bloc.
- Suivre l'imbrication. En parcourant le flux de tokens, l'embellisseur maintient un niveau d'indentation courant. Chaque accolade ouvrante approfondit le niveau, qu'elle appartienne à un bloc de règle, une media query ou un bloc keyframes, et chaque accolade fermante le remonte. Cette profondeur détermine le nombre d'unités d'indentation placées devant chaque ligne renvoyée.
- Appliquer vos options. Votre choix d'indentation (2 espaces, 4 espaces ou une tabulation) définit la largeur d'un niveau. Le réglage du style d'accolades détermine si une accolade ouvrante reste sur la même ligne que le sélecteur qui la précède ou tombe sur sa propre ligne. Les autres interrupteurs ajoutent une ligne vide entre les blocs de règles et répartissent les sélecteurs groupés sur des lignes séparées.
- Réémettre. Enfin, le formateur imprime les tokens avec l'indentation et les sauts de ligne qu'il a déterminés, en plaçant une déclaration par ligne et un espace après chaque deux-points. Le résultat est la même feuille de styles, mise en forme de façon qu'un être humain puisse parcourir la cascade.
Pourquoi embellir le CSS
- Lire des feuilles de styles minifiées. Le CSS de production s'expédie sur une ligne sans espacement entre les règles. Embellir restaure les sauts de ligne et l'indentation pour que vous puissiez trouver le sélecteur derrière un bug de layout et voir exactement quelles déclarations il pose, même sans source map.
- Corriger des fichiers incohérents. Une feuille de styles que plusieurs personnes ont touchée dérive vers des indentations et des styles d'accolades mélangés. Un passage dans l'embellisseur normalise l'ensemble du fichier vers une mise en forme unique, ce qui fait que le diff suivant montre de vraies modifications de la cascade plutôt que du bruit d'espaces.
- Cet outil n'alourdit pas votre page. La plupart des formateurs en ligne chargent leur bibliothèque entière dès l'ouverture de la page. Celui-ci charge js-beautify en différé seulement quand vous cliquez sur Embellir ou activez le mode en direct, de sorte qu'ouvrir la page coûte quelques kilo-octets au lieu de quelques centaines, et le rendu initial reste rapide.
- Rien ne quitte votre navigateur. L'embellisseur tourne entièrement sur votre appareil. Votre CSS n'est jamais envoyé à un serveur, ce qui compte quand la feuille de styles que vous inspectez appartient à un client, contient des noms de classes internes ou est soumise à un accord de confidentialité.
Applications courantes
Embellir du CSS survient chaque fois que quelqu'un a besoin de lire une feuille de styles qui n'a pas été écrite pour être lue.
- Débogage en production : coller une feuille de styles minifiée extraite de l'onglet Réseau pour trouver la règle qui écrase le layout attendu.
- Préparation de revue de code : reformater la feuille de styles à indentation incohérente d'un contributeur avant d'ouvrir la pull request pour que les relecteurs voient les changements de cascade, pas le désordre de mise en forme.
- Apprentissage et audit : développer la feuille de styles d'un framework ou d'une bibliothèque de composants pour étudier comment ses sélecteurs, media queries et propriétés personnalisées sont structurés.
Un exemple concret
Prenez un one-liner minifié : a{color:red;margin:0}b{padding:0}. Collez-le ci-dessus avec une indentation de 2 espaces et le style d'accolades Collapse, puis cliquez sur Embellir. Vous récupérez des blocs lisibles : a { sur sa propre ligne, les déclarations color: red; et margin: 0; chacune indentée d'un niveau de plus, l'accolade fermante alignée sous le sélecteur, et la règle b en dessous. Passez le style d'accolades à Expand et chaque accolade ouvrante tombe sur sa propre ligne. Changez l'indentation en Tabulations et chaque niveau passe de deux espaces à un caractère de tabulation. Les styles sont identiques ; seule la mise en forme change.
FAQ
Cela s'exécute-t-il dans mon navigateur ?
Oui. La bibliothèque js-beautify est chargée en différé la première fois que vous cliquez sur Embellir ou activez le mode en direct, puis mise en cache. Votre CSS ne quitte jamais la page — aucun aller-retour serveur, aucun envoi.
Embellir est-il identique à déminifier ?
Cela restaure une mise en forme lisible — indentation, sauts de ligne et espacement — mais ne peut pas récupérer les commentaires que la minification a supprimés ni récupérer une structure qui n'a jamais été dans le fichier. Il ne reformate que les déclarations et sélecteurs présents.
L'embellissement changera-t-il le rendu de mes styles ?
Non. L'embellissement ne fait qu'ajouter et supprimer des espaces et des sauts de ligne ; la cascade est intacte et la page se rend de manière identique. L'ordre des propriétés, la spécificité et les valeurs restent exactement tels que vous les avez écrits.
Que signifient les options de style d'accolades ?
Collapse maintient une accolade ouvrante sur la même ligne que le sélecteur (a {), ce qui est la convention CSS habituelle. Expand place chaque accolade ouvrante sur sa propre ligne sous le sélecteur. Les interrupteurs de ligne vide et un sélecteur par ligne contrôlent l'espacement entre les règles et la disposition des sélecteurs groupés comme h1, h2, h3.
L'embellissement CSS côté navigateur vous donne une feuille de styles lisible sans étape de compilation ni envoi. Collez un fichier minifié ou désordonné, choisissez votre indentation et votre style d'accolades, puis copiez ou téléchargez le résultat. Rien ne quitte votre appareil, aucun compte n'est nécessaire, et la bibliothèque ne se charge que lorsque vous le demandez — ouvrir cette page ne vous coûte que quelques kilo-octets, pas un méga-octet.