Formateur CSS

Embellissez du CSS avec Prettier : une déclaration par ligne, espacement cohérent, 2 ou 4 espaces ou tabulations, media queries bien imbriquées. En local.

Indentation

Entrée CSS

Sortie

S'exécute entièrement dans votre navigateur. Vos données ne sont jamais envoyées.

Outils Connexes

Voir Tout

Formateur JSON Validateur JSON Formateur XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

Qu'est-ce que Formateur CSS ?

Le formateur CSS transforme des feuilles de style minifiées ou incohérentes en CSS lisible grâce à Prettier : chaque règle et déclaration sur sa propre ligne, espacement normalisé autour des deux-points et des sélecteurs, et règles @ imbriquées indentées.

Comment utiliser Formateur CSS

Collez le CSS dans la zone de saisie ou cliquez sur Charger un exemple.
Choisissez l'Indentation.
Cliquez sur Formater (le résultat se met aussi à jour pendant la saisie).
Copiez ou téléchargez le CSS formaté.

Exemple

Entrée

a{color:red;margin:0 auto}

Sortie

a {
  color: red;
  margin: 0 auto;
}

Quand utiliser Formateur CSS

Utilisez-le pour lire du CSS minifié d'un site, normaliser des feuilles de style écrites à la main avant une revue ou formater des extraits CSS pour une documentation. Il ne vérifie ni les noms de propriétés ni les valeurs : utilisez pour cela le validateur CSS. Pour SCSS ou Less, choisissez ce langage dans l'embellisseur de code.

Comment fonctionne Formateur CSS

La feuille de style est analysée par l'analyseur de Prettier fondé sur PostCSS puis réécrite selon les règles CSS de Prettier : une espace suit chaque deux-points, chaque déclaration se termine par un point-virgule et les sélecteurs d'une liste vont sur des lignes séparées. Les blocs non fermés et autres erreurs de syntaxe sont signalés avec la ligne et la colonne.