Outil de développement / 16

Formateur et embellisseur CSS

Formatez, indentez et développez les règles CSS, listes de sélecteurs et déclarations de propriétés pour obtenir un code lisible.

Formateur et embellisseur CSS: TOEA analyse les règles CSS, les requêtes @media et les déclarations, et normalise l'espacement des propriétés et l'indentation des blocs. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie: Outils développeur
Exécutions: Dans votre navigateur
Coût: Gratuit · sans inscription
Disponibilité: Prêt à l'emploi

Formatage et embellissement CSSTraitement local

Fonctionne entièrement dans votre navigateur

Sortie CSS formatée

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Lire la feuille de style de quelqu’un d’autre

La mise en forme d’un fichier minifié le rend lisible, mais pas identique à la source dont il provient : les minificateurs fusionnent les règles et réordonnent les déclarations. Attendez-vous donc à trouver des sélecteurs regroupés et des valeurs abrégées. Pour déterminer quelle règle applique le style d’un élément, les outils de développement du navigateur sont plus rapides ; leur panneau Sources peut aussi mettre en forme un fichier minifié directement. Mettez en forme deux versions d’une feuille de style, puis comparez-les dans le comparateur de différences pour voir ce qu’une mise à jour a modifié.

Ce que la mise en forme laisse intact

Le formateur ajoute une indentation et des espaces ; il ne trie pas les propriétés, ne corrige pas les noms mal orthographiés, n’ajoute pas de préfixes fournisseurs et ne supprime pas les déclarations en double. Ainsi, colour: red reste inchangé. Les suites d’espaces sont réduites partout, y compris dans les chaînes entre guillemets ; vérifiez donc les valeurs de content qui reposent sur plusieurs espaces. Lorsque le fichier est prêt à être publié, compressez-le à nouveau avec le minificateur CSS.

Comment l'utiliser

Collez du code CSS brut ou minifié.
Sélectionnez une indentation de 2 espaces ou 4 espaces.
Cliquez sur Format CSS puis copiez ou téléchargez le résultat.

Confidentialité et limitations

Tout le formatage CSS s'exécute localement dans votre navigateur.

Outils associés

Questions fréquentes

Prend-il en charge les requêtes @media ?

Oui, les règles @ imbriquées et les requêtes @media sont formatées avec une indentation correcte.

Modifie-t-il les codes couleur ou les sélecteurs ?

Non, le formatage ajuste les espaces, l'indentation et la structure sans modifier les valeurs des propriétés.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis