Formateur CSS

Rendre les feuilles de style plus faciles à lire et à réviser

Formateur CSS étend le CSS compact en sélecteurs, blocs de déclaration, propriétés et valeurs lisibles. Il est utile lors du débogage des styles copiés, de la révision du CSS généré, de l'inspection de la sortie du framework ou de la préparation d'exemples.

Embellir la mise en page des changements, pas la sémantique en cascade. L'ordre des sélecteurs, les déclarations en double, les propriétés personnalisées, les commentaires, les requêtes multimédias et l'ordre des calques doivent rester intacts, car ces détails peuvent affecter les styles finaux.

Comment utiliser

1. Collez votre code CSS dans l'éditeur de saisie.
2. Cliquez sur Embellir CSS pour redistribuer les règles et les déclarations.
3. Examinez le résultat pour connaître l’ordre des sélecteurs, les commentaires et les règles at préservés.
4. Utilisez Copier pour le presse-papiers, Télécharger pour un fichier ou Effacer pour réinitialiser.

Qu'est-ce que l'embellisseur CSS ?

Formateur CSS est un utilitaire basé sur un navigateur permettant de faciliter la numérisation des feuilles de style. Il sépare les blocs de règles et les déclarations afin que vous puissiez inspecter les sélecteurs, les propriétés, les valeurs et les règles at sans lire un fichier dense d'une seule ligne.

Le comportement de CSS dépend de l'ordre de la cascade, de la spécificité, de l'héritage, des couches et de la résolution des propriétés personnalisées. Le formatage ne doit pas réorganiser les règles ou les déclarations ; vérifiez les modifications importantes de la feuille de style dans le navigateur.

Notes d'entrée

Collez uniquement CSS, y compris les règles at telles que @media, @supports et @layer. Conservez le sélecteur et l’ordre de déclaration inchangés lors de la copie de la sortie dans un projet.

Exemple

Le CSS dense devient plus facile à analyser une fois que chaque déclaration est placée sur sa propre ligne :

--- Minified Input ---
body{margin:0;padding:0;font-size:16px;}.container{max-width:1200px;}

--- Beautified Output ---
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  max-width: 1200px;
}

Intégration MCP

MCP (Model Context Protocol) permet aux agents IA et aux applications de découvrir et d'exécuter les utilitaires Coding.Tools pour des workflows répétables de conversion, formatage, hachage et génération.

Nom de l'outil MCP: css-beautifier

Point de terminaison MCP: https://coding.tools/mcp

Appelez d'abord tools/list. Chaque outil inclut inputSchema, outputSchema et examples afin qu'un agent IA ou un client puisse construire des arguments valides sans deviner.

Pour tools/call, lisez result.content[0].text pour la valeur affichable et result.structuredContent pour l'analyse par programme. Les échecs d'outil renvoient isError: true ; les échecs de protocole renvoient une JSON-RPC error.

Exemple de requête tools/call :

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"css-beautifier","arguments":{"input":".button{color:white;background:#3366cc;padding:8px 12px;}"}}}'

La plupart des outils de texte et de données acceptent une chaîne input et des options facultatives. Les outils d'image qui dépendent des API d'image du navigateur sont listés pour la découverte et renvoient un lien vers l'interface Web si nécessaire.