ZenovayTools

Formateur CSS

Formatez et embellissez le code CSS. Développez le CSS minifié, corrigez l'indentation, normalisez l'espace blanc et triez les propriétés en option.

Comment utiliser Formateur CSS

  1. 1Collez votre code CSS dans l'éditeur.
  2. 2Choisissez la taille de l'indentation (2 ou 4 espaces).
  3. 3Activez le tri optionnel des propriétés pour la cohérence.
  4. 4Copiez la sortie CSS formatée.
ZenovayAnalytics

Analytics pensé pour les fondateurs.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Outils connexes

Formateur et Validateur JSON
Formatez, validez et embellissez les données JSON avec la coloration syntaxique et la détection d'erreurs.
Décodeur JWT
Décodez et inspectez les jetons JWT. Consultez l'en-tête, la charge utile et vérifiez les signatures.
Encodeur/Décodeur Base64
Encodez du texte en Base64 ou décodez Base64 en texte. Supporte UTF-8 et les données binaires.
Encodage / Décodage URL
Encodez ou décodez les composants URL. Traitez les caractères spéciaux, les chaînes de requête et les URL complètes.

Questions fréquemment posées

Que fait le formateur CSS ?▾
Le formateur prend du CSS minifié ou formaté de façon inconsistante et le réécrit avec une indentation, des sauts de ligne et un espacement cohérents. Chaque bloc de sélecteur obtient son accolade ouvrante sur la même ligne, chaque propriété sur sa propre ligne avec un point-virgule de fin, et l'accolade fermante sur sa propre ligne. Les règles @ (@media, @keyframes, @supports) sont traitées avec un formatage imbriqué. La sortie est immédiatement lisible et facile à diffuser.
Quelles fonctionnalités CSS sont supportées ?▾
Propriétés et valeurs CSS standard, pseudo-classes (:hover, :focus, :nth-child), pseudo-éléments (::before, ::after), sélecteurs d'attributs ([type="text"]), règles @ imbriquées (@media, @supports, @keyframes, @layer, @container), sélecteurs multiples (séparés par des virgules), propriétés personnalisées (--var-name) et fonctions CSS modernes (clamp(), calc(), var()). Les commentaires CSS (/* ... */) sont préservés.
Qu'est-ce que le tri des propriétés ?▾
Quand le tri des propriétés est activé, les propriétés CSS au sein de chaque bloc de règle sont triées alphabétiquement. Cela rend les feuilles de style plus faciles à analyser (vous savez toujours où « background » vient avant « color »), élimine les débats sur l'ordre des propriétés dans les revues de code, et produit des diffs plus cohérents quand des propriétés sont ajoutées. Des outils comme le plugin « order » de Stylelint appliquent ceci automatiquement.
Le formateur changera-t-il mes valeurs CSS ?▾
Non — seuls l'espacement et l'indentation sont modifiés. Les noms de propriétés, les valeurs, les sélecteurs et les conditions des règles @ sont préservés exactement tels quels. Le formateur ne normalise pas les couleurs, n'ajoute pas de préfixes vendeur et ne réécrit pas les propriétés abrégées. C'est un formateur purement cosmétique, pas un préprocesseur.
Comment formater CSS dans mon flux de travail ?▾
Pour les flux de travail en équipe, utilisez Prettier avec le plugin CSS (prettier --write *.css) ou Stylelint avec le drapeau --fix. Les deux s'intègrent avec VS Code, ESLint et les pipelines CI. Pour un formatage ponctuel sans configuration de chaîne d'outils, utilisez ce formateur en ligne. Pour les utilisateurs PostCSS, le plugin postcss-prettify peut formater le CSS par programme.