Outil de Formatage CSS

Le formateur CSS organise les feuilles de style dans une structure cohérente et lisible. Sélecteurs, déclarations, media queries, keyframes, variables et sorties de préprocesseur deviennent plus faciles à examiner que dans du code minifié ou mal indenté. Cela aide au débogage, à la revue, à la maintenance d’un design system, à l’enseignement et à la compréhension de styles copiés. Le formatage ne change pas automatiquement cascade, spécificité, héritage ni compatibilité navigateur. Une règle discrète peut avoir un effet important si elle se charge tard ou utilise un sélecteur fort. En production, il faut vérifier états responsives, régression visuelle, lint, build et contexte du composant.

Le formatage CSS est un problème de tokenisation + pretty-printing, et non d'analyse complète. Un analyseur CSS conforme à la spécification (CSS Syntax Module Level 3, recommandation W3C) est plus lourd qu'un formateur n'en a besoin : il construit un AST avec des règles de style, des at-rules, des déclarations et des valeurs de composantes, et résout les cas limites d'analyse (chaînes non terminées, accolades non appariées, propriétés avec préfixe vendeur). Cette page utilise un tokenizer plus léger qui parcourt le flux de caractères, reconnaît les mêmes classes de tokens (ident, at-keyword, hash, string, bad-string, number, dimension, percentage, url, function, ponctuation, commentaire), et les émet sous forme de liste plate ; le pretty-printer réassemble ensuite les tokens avec l'indentation choisie, le style d'accolades et les règles d'espacement. Les deux unités structurelles en CSS sont les blocs de règles (sélecteur { déclarations }) et les blocs d'at-rules (@media, @supports, @container, @keyframes encapsulant un ou plusieurs blocs de règles). Le formateur parcourt un flux de tokens et suit la profondeur d'accolades : un `{` incrémente la profondeur (suivi d'un saut de ligne + indentation), un `}` décrémente la profondeur (et l'indentation se réduit pour correspondre au `{` associé). Les sélecteurs sont émis tels quels — le formateur ne les analyse pas, car l'analyse d'un sélecteur comme `.foo > .bar:hover:not(.baz)` est un problème distinct (CSS Selectors Level 4). Les sélecteurs sont conservés octet par octet, seul l'espacement est normalisé (espaces multiples réduits à un, espaces de fin supprimés) pour qu'un `.a,.b,.c` minifié produise `.a, .b, .c`. Les déclarations sont formatées selon un style choisi : « expanded » (chaque propriété sur sa propre ligne, le plus lisible), « compact » (une règle par ligne, plusieurs déclarations compactées, le plus courant en production) ou « compressed » (minifié, aucun espacement, la sortie la plus petite possible). Les deux-points après le nom de propriété sont toujours suivis d'une espace ; la valeur est émise telle quelle à l'exception de quelques normalisations (zéros de fin supprimés de `0.500` à `.5`, unités retirées de `0px` à `0`, les astuces classiques de minification CSS). La minification est la direction inverse : supprimer les commentaires, réduire les espaces à l'intérieur et entre les déclarations, omettre le point-virgule de fin après la dernière déclaration d'un bloc (valide selon CSS 2.1 §4.1.7), fusionner les blocs de règles adjacents avec le même sélecteur et le même contexte media, et normaliser les valeurs de couleurs (`#ffffff` -> `#fff`, `rgb(255,255,255)` -> `#fff` lorsque c'est possible). Les minifieurs modernes (cssnano, lightningcss, clean-css) effectuent aussi des optimisations structurelles : fusion des propriétés longues en propriétés raccourcies (`margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;` -> `margin: 1px;`), suppression des déclarations en double dans une règle, et suppression des règles ne correspondant à aucun élément (`div:has-no-children { color: red; }` dans les passes d'élimination de code mort). Pour la sortie minifiée, la page applique les transformations standard ; pour la sortie lisible, la page applique l'indentation et le style d'accolades choisis. Le module CSS Nesting (CSSWG, rédigé en 2023, Baseline 2024) introduit l'imbrication native : `.a { color: red; & .b { color: blue; } }` est désormais du CSS valide dans les navigateurs modernes (Chrome 112+, Firefox 117+, Safari 16.5+). Avant 2024, l'imbrication nécessitait des réécritures par préprocesseur (Sass `&` ou Less `&` pour chaîner les sélecteurs). La page gère les deux : le CSS imbriqué par préprocesseur est formaté comme du SCSS / Less (en préservant le `&`), et le CSS imbriqué nativement (pas de `&` nécessaire) est formaté par parcours des blocs de règles. Les autres at-rules gérées par la page : @keyframes et @counter-style prennent un corps de déclarations, pas des blocs de règles imbriqués, et se formatent donc différemment (déclarations à l'intérieur de l'at-rule, pas d'accolade imbriquée). @media, @supports, @container, @layer prennent un corps de blocs de règles. @import, @charset, @namespace sont uniquement au niveau supérieur et s'émettent sur leur propre ligne. @property (propriétés personnalisées enregistrées) prend un bloc de déclarations. @font-face est un seul bloc de règles avec un complexe de déclarations sans sélecteur. La page traite chacun selon la forme de son corps définie par la spécification, et non par son nom. Le piège de formatage le plus courant est de casser le contenu à l'intérieur des littéraux de chaînes : `content: "hello world";`, `font-family: "Arial Black", sans-serif;`, `background: url("image.png")` — le formateur ne doit pas réduire l'espace à l'intérieur de la chaîne, ne pas découper l'URL sur `/`, et ne pas toucher au texte du commentaire dans `/* ... */`. Un tokenizer qui suit correctement l'état des chaînes et des commentaires fait la différence entre un formateur qui préserve le contenu de l'utilisateur et un autre qui le déforme. Le tokenizer de la page est artisanal et suffisamment petit pour être vérifié visuellement ; les formateurs de production utilisent postcss ou lightningcss, qui portent la même obligation dans leurs lexers internes.

• Analyse lexicale (CSS Syntax Level 3) : parcours du flux de caractères, émission de tokens ident / at-keyword / hash / string / number / dimension / percentage / url / function / ponctuation / commentaire. Les chaînes et commentaires ont un état — un tokenizer défectueux casse `content: "hello world";`.
• Deux unités structurelles : blocs de règles (sélecteur { déclarations }) et blocs d'at-rules (@media, @supports, @container, @layer encapsulant des blocs de règles). Le formateur parcourt la profondeur d'accolades et indente chaque `{` à un nouveau niveau ; le `}` correspondant réduit le niveau.
• Les sélecteurs sont émis tels quels, avec l'espacement normalisé : `.a,.b,.c` -> `.a, .b, .c`. Le formateur n'analyse pas les sélecteurs (CSS Selectors Level 4 est un problème distinct) — il nettoie seulement les espaces et virgules.
• Styles de sortie : « expanded » (une déclaration par ligne, le plus lisible), « compact » (une règle par ligne, courant en production), « compressed » (pas d'espacement, minifié). Les deux-points + espace après le nom de propriété est la seule règle de formatage universelle.
• Minification : suppression des commentaires, réduction des espaces, omission du `;` final, fusion des règles avec le même sélecteur, normalisation `#ffffff` -> `#fff`, `0.500` -> `.5`, `0px` -> `0`. Fusions structurelles : propriétés longues -> raccourcies (`margin-top: 1px; ... margin-left: 1px;` -> `margin: 1px;`).
• CSS Nesting (CSSWG 2023, Baseline 2024) : `.a { & .b { ... } }` est désormais du CSS natif dans Chrome 112+, Firefox 117+, Safari 16.5+. L'imbrication par préprocesseur d'avant 2024 (Sass `&`, Less) reste valide ; la page formate les deux en parcourant la structure des blocs de règles.
• Corps des at-rules : @keyframes et @counter-style prennent des déclarations ; @media / @supports / @container / @layer prennent des blocs de règles ; @import / @charset / @namespace sont des instructions de niveau supérieur ; @property et @font-face prennent des blocs de déclarations. La page traite chacun selon la forme de son corps définie par la spécification, et non par son nom.
• Limite de sécurité : les littéraux de chaînes (content, noms de polices, URLs) et le texte des commentaires ne sont jamais modifiés par aucune transformation. Un aller-retour octet-par-octet est le test de correction d'un formateur CSS — cassez une chaîne content et l'utilisateur le remarque immédiatement.