Utilore

Formateur CSS

Collez une feuille de style — même reçue sur une seule ligne — et relisez-la. Chaque déclaration prend sa ligne, les blocs imbriqués reçoivent leur indentation, les commentaires restent à leur place.

Le code ne quitte jamais cette page : le formatage se fait dans votre navigateur.

Comment faire

  1. Collez le CSS dans le premier champ.
  2. Choisissez l’indentation : deux espaces, quatre ou une tabulation.
  3. Copiez le résultat, ou cliquez sur « Minifier » pour le recompacter.

Bon à savoir

Pourquoi un formateur naïf casse les feuilles de style

Découper à chaque point-virgule et à chaque accolade semble fonctionner, jusqu’à ce que le fichier contienne content: "a;b" ou une data URI avec un SVG dans url(). Deux cas ordinaires en CSS réel. Ce formateur lit le fichier caractère par caractère : les chaînes entre guillemets et les commentaires sont reportés entiers au lieu d’être coupés au premier signe de ponctuation.

Une imbrication qui aide vraiment

Media queries, blocs supports et règles imbriquées modernes ajoutent chacun un niveau, et l’indentation suit. Une ligne vide sépare les règles de premier niveau : une feuille de deux mille lignes se lit alors comme une liste de blocs et non comme un mur de texte.

Questions fréquentes

Mes commentaires sont-ils conservés ?

Oui. Un commentaire isolé occupe sa propre ligne ; un commentaire placé après une déclaration reste avec elle.

Modifie-t-il mon CSS ?

Aucune propriété n’est renommée, réordonnée ni supprimée. Seuls les espaces bougent : la feuille se comporte exactement comme avant.

Mon code part-il vers un serveur ?

Non. Tout tourne dans votre navigateur : la feuille d’un projet sous accord de confidentialité reste sur votre machine.

Et le SCSS ou le LESS ?

Les règles imbriquées et les commentaires se mettent en forme correctement. Variables, mixins et directives de contrôle sont recopiés tels quels, sans être interprétés.

Outils similaires