ForHosting KIT · Outils pour développeurs

Embellisseur CSS

L’embellisseur CSS transforme les feuilles de style compactées ou mal espacées en code plus facile à lire, relire et maintenir.

● BetaGratuit · dans votre navigateur

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Collez du CSS provenant d’un fichier de production, d’un bloc de style intégré ou d’un ancien projet, puis obtenez une version régulièrement indentée dont les déclarations sont séparées. Durant l’analyse, l’outil respecte les chaînes entre guillemets, les commentaires, les crochets et les parenthèses. Il contrôle aussi la structure des blocs et signale une entrée incorrecte lorsque les accolades ouvrantes et fermantes ne sont pas équilibrées.

Rendez lisibles les feuilles de style compactées

Le CSS de production est souvent minifié afin de réduire le volume transféré. Cette pratique convient aux navigateurs, mais complique le travail humain. Sélecteurs, déclarations, requêtes média et blocs imbriqués peuvent tenir sur une seule ligne, au point de rendre une petite modification difficile à examiner. Cet embellisseur rétablit une structure visuelle prévisible : chaque accolade ouvrante commence un bloc indenté, chaque point-virgule terminant une déclaration crée une ligne et chaque accolade fermante revient au niveau précédent. Les espaces ordinaires sont harmonisés sans toucher au texte des chaînes ni aux commentaires. Le résultat est utile quand votre seule source est l’inspecteur du navigateur, un dossier de compilation, un modèle d’e-mail ou un thème tiers. Au lieu d’insérer les retours à la ligne et de compter les blocs à la main, vous obtenez une représentation stable à lire ou à copier dans un éditeur. L’outil ne prétend pas valider toute la grammaire CSS ni modifier vos choix stylistiques.

La protection des valeurs CSS pendant le formatage

Un formateur fiable doit reconnaître que la ponctuation ne commande pas toujours la structure. Un point-virgule placé dans une valeur entre guillemets appartient au contenu ; il ne termine pas une déclaration. Les accolades d’une chaîne sont de simples caractères, et la ponctuation d’une fonction telle qu’une URL de données ne doit pas séparer des propriétés. L’outil parcourt donc la source caractère par caractère en suivant les chaînes, les échappements, les commentaires, les parenthèses et les crochets. Il n’ajoute de rupture structurelle que lorsque la ponctuation se trouve hors de ces contextes protégés. Les libellés, URL incorporées, sélecteurs d’attribut et fonctions complexes restent ainsi intacts, tandis que les blocs habituels deviennent lisibles. Les commentaires demeurent auprès du code au lieu d’être supprimés. L’opération est déterministe : une entrée identique produit toujours la même sortie, sans réseau, heure système, hasard ni comportement dépendant de l’environnement.

Repérez un bloc incomplet avant de poursuivre

L’embellissement sert également de contrôle structurel lorsque le CSS provient d’une réponse partielle, d’un panneau de navigateur ou d’un fichier généré. L’analyseur compte toutes les accolades structurelles, tout en ignorant celles qui figurent dans des chaînes, commentaires, parenthèses ou crochets. Si une accolade fermante apparaît sans ouverture correspondante, la demande échoue en indiquant la position du caractère. Si la lecture se termine alors que des blocs restent ouverts, le message précise leur nombre. Ce contrôle est volontairement ciblé : des accolades équilibrées ne prouvent pas que chaque propriété, valeur, sélecteur ou règle est reconnu par un navigateur donné. Elles empêchent néanmoins qu’un bloc manifestement tronqué soit présenté comme un résultat valide. Servez-vous de la sortie pour une relecture, une comparaison de versions, une documentation ou une validation ultérieure. L’utilisation dans le navigateur est gratuite ; le formatage automatisé par API applique le tarif de base publié de $0.002 par demande.

Cas d’usage

Examiner une ressource minifiée

Déployez une feuille sur une seule ligne avant de rechercher un sélecteur ou une déclaration inattendue.

Préparer une revue de code

Appliquez une indentation stable et séparez les déclarations afin que la revue porte sur le comportement.

Contrôler un extrait copié

Repérez les accolades manquantes ou superflues après une copie depuis un inspecteur, un modèle ou une réponse générée.

Questions fréquentes

Que modifie l’embellisseur CSS ?

Il harmonise les espaces structurels, indente les blocs avec deux espaces et place les déclarations terminées par un point-virgule sur des lignes distinctes.

Modifie-t-il le texte des chaînes ou commentaires ?

Non. Les chaînes entre guillemets, caractères échappés et contenus des commentaires sont conservés pendant l’analyse.

Valide-t-il toute la syntaxe CSS ?

Non. Il contrôle les accolades structurelles et les limites de formatage, mais pas tous les sélecteurs, propriétés, valeurs ou règles propres aux navigateurs.

Que se passe-t-il si les accolades sont déséquilibrées ?

La demande échoue avec une erreur d’entrée incorrecte au lieu de renvoyer un CSS partiellement formaté.

Combien coûte une demande API ?

Chaque demande API applique le tarif de base publié de $0.002. La version pour navigateur peut s’exécuter localement sans appel API.

Pour les développeurs — accès API

Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.

Endpoint

POSThttps://api.kit.forhosting.com/dev2/beautify-css

Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.

Appeler depuis votre stack

curl -X POST https://api.kit.forhosting.com/dev2/beautify-css \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}'

const res = await fetch("https://api.kit.forhosting.com/dev2/beautify-css", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/dev2/beautify-css",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/beautify-css", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/beautify-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Exemple de requête

{
  "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "dev2.beautify_css",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.

Tarifs

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Erreurs

HTTP	Code	Signification
`401`	`unauthorized`	Clé API absente ou invalide : vérifiez l’en-tête Authorization.
`402`	`insufficient_balance`	Solde insuffisant : rechargez votre compte pour lancer cette tâche.
`404`	`unknown_type`	Type de tâche inconnu : vérifiez le champ type de votre requête.
`429`	`rate_limited`	Trop de requêtes : ralentissez la cadence, puis réessayez.

Consulter la documentation complète du KIT →