Free · Fast · Privacy-first

Correcteur d'Indentation CSS

Corrigez l'indentation incoherente, mixte ou manquante dans n'importe quel fichier CSS avec FixTools.

⚡

Normalise toute l'indentation en espaces coherents

🔒

Corrige les melanges tabulations / espaces

✨

Applique la bonne profondeur d'indentation aux at-regles imbriquees

⚡

Gratuit, instantane et dans le navigateur

Coût: Gratuit à vie
Inscription: Non requise
Traitement: Dans votre navigateur
Confidentialité: Fichiers locaux

GratuitSans inscriptionMarque blanche

Ajoutez CSS Formatter à votre site

Intégrez CSS Formatter dans n'importe quelle page — article de blog, doc produit, intranet, portail scolaire — avec une seule ligne de HTML. Vos visiteurs utilisent l'outil complet, traité entièrement dans leur navigateur. Pas de backend, pas d'upload, pas d'inscription.

Les fichiers restent à 100 % dans le navigateur du visiteur
Responsive — s'adapte à toute largeur de conteneur
Gratuit pour toujours, aucune clé API requise

Code d'intégration

<iframe
  src="https://www.fixtools.io/css-tool/css-formatter?embed=1&lang=fr"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="CSS Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/css-formatter?embed=1&lang=fr"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="CSS Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution conviviale : un petit lien « Propulsé par FixTools » apparaît en bas de l'embed.

Pourquoi une indentation CSS incoherente pose probleme et comment la corriger rapidement

L'indentation incoherente est l'un des problemes de qualite les plus courants dans le CSS ecrit par plusieurs contributeurs au fil du temps. Une developpeuse utilise des tabulations parce que c'est la valeur par defaut de son editeur, un autre utilise deux espaces parce que c'est la regle de l'equipe, un troisieme utilise quatre espaces parce qu'il a copie un extrait de tutoriel qui le faisait, et le resultat est une feuille de style visuellement chaotique et concretement difficile a maintenir. Le probleme est aggrave par les editeurs qui detectent automatiquement l'indentation et basculent silencieusement de style au milieu d'un fichier, par les copier-coller depuis des sources externes qui amenent leurs propres conventions, et par les outils automatises qui resauvent parfois des fichiers avec les reglages par defaut actifs a ce moment-la. Un correcteur d'indentation dedie balaye tout cela en appliquant un seul standard sur l'ensemble du fichier en une operation, eliminant chaque incoherence historique d'un coup au lieu d'essayer de les reparer regle par regle.

La coherence d'indentation depasse de loin la simple proprete visuelle. Une indentation incoherente en CSS, particulierement autour des blocs d'at-regles imbriques comme les media queries et les container queries, peut rendre veritablement difficile de determiner la portee d'une regle donnee. Cette declaration est-elle a l'interieur du bloc media ou en dehors ? Ce keyframe fait-il partie de l'animation au-dessus ou de celle en dessous ? Avec une indentation coherente, la reponse est visuellement evidente en une fraction de seconde. Avec une indentation incoherente, il faut compter les accolades, suivre mentalement les niveaux d'imbrication, et se controler avant chaque modification. Cette charge cognitive supplementaire se multiplie sur chaque session d'edition et chaque revue de code, et elle introduit de vraies erreurs quand un developpeur suppose la mauvaise portee et pousse un changement qui finit par s'appliquer au mauvais selecteur.

Corriger l'indentation a aussi un effet direct sur l'hygiene du controle de version. Un fichier a l'indentation incoherente generera de gros diffs bruites des qu'une seule propriete change, car l'editeur reformatera obligeamment les lignes autour a la sauvegarde selon le reglage local d'indentation. Les relecteurs devront alors trier des dizaines de modifications d'espaces seuls pour trouver le seul vrai changement semantique, ce qui ralentit les revues et augmente le risque qu'un vrai bug passe. Faire passer le correcteur d'indentation sur l'ensemble du fichier avant de commencer le travail produit une base propre, de sorte que les diffs suivants ne montrent que les changements intentionnels. C'est particulierement precieux dans les projets de longue duree ou le fichier CSS a accumule des annees d'indentations mixtes provenant de nombreux contributeurs.

Il y a aussi un impact en aval sur l'outillage automatise. Linters, formateurs, etapes de build et scripts de migration se comportent tous de maniere plus previsible quand l'entree est indentee de facon coherente. Les outils qui essaient d'analyser le CSS structurellement gerent generalement n'importe quel espacement, mais ceux qui operent sur des motifs textuels, y compris de nombreux scripts de refactoring rapide et des one-liners ad hoc, fonctionnent beaucoup plus fiablement quand l'indentation est uniforme. Corriger l'indentation a l'echelle de la base de code supprime une source silencieuse d'echecs intermittents d'outils et offre a chaque script de la chaine de build une entree plus previsible.

MDN Web Docs : CSS Google Web.dev : Learn CSS

How to use this tool

💡

Collez du CSS a l'indentation incoherente et cliquez sur Formater. La sortie utilise une indentation uniforme de deux espaces dans tout le fichier.

Comment Ça Marche

Guide étape par étape pour correcteur d'indentation css:

1
Collez votre CSS
Ouvrez le Formateur CSS et collez la feuille de style a l'indentation incoherente. L'entree peut etre un extrait partiel, un fichier complet ou une concatenation multi-fichiers. Le formateur gere toute taille et tout melange de styles d'indentation en une seule operation sans necessiter de nettoyage prealable.
2
Cliquez sur Formater
Cliquez sur le bouton Formater pour appliquer une indentation coherente de deux espaces sur tout le contenu colle. Le correcteur traite l'entree en quelques millisecondes, normalisant tabulations, blocs de quatre espaces et autres variations en un motif uniforme correspondant a la convention CSS la plus largement adoptee.
3
Relisez la sortie
Parcourez la sortie formatee pour confirmer que tous les blocs de regles et at-regles imbriquees sont indentes aux niveaux attendus. Regardez specifiquement les media queries, keyframes et toutes les at-regles profondement imbriquees : ce sont les endroits ou les problemes d'indentation se cachent le plus souvent et ou la verification est la plus utile.
4
Remplacez votre fichier source
Copiez la sortie corrigee et remplacez votre fichier CSS source avec. Committez ce changement seul, avec un message clair indiquant qu'il s'agit d'une pure normalisation d'indentation, avant de reprendre tout autre travail. Cela garde le commit de formatage isole et reversible.

Exemples concrets

Situations courantes où cette approche fait vraiment la différence :

Une developpeuse reprend un projet vieux de cinq ans dont les fichiers CSS melangent indentation de deux espaces, quatre espaces et tabulations issues d'un long historique de contributeurs differents, et fait passer le correcteur sur chaque fichier avant de commencer sa premiere fonctionnalite.

La base propre lui permet de lire les fichiers rapidement, de reperer les selecteurs dupliques et de comprendre la structure existante sans la surcharge cognitive du decodage des differences d'espacement en chemin. Le commit de formatage devient une amelioration silencieuse qui beneficie a tous les developpeurs suivants.

Une equipe introduit une exigence en revue de code que tout CSS utilise une indentation coherente et utilise le correcteur en ligne pour nettoyer chaque fichier existant dans une seule pull request dediee avant d'appliquer la regle.

La PR de formatage est relue rapidement car les relecteurs peuvent verifier qu'aucun changement semantique n'a eu lieu, et a partir de la, tous les nouveaux diffs du projet sont exempts de bruit d'indentation. La regle est ensuite appliquee automatiquement via un hook de pre-commit.

Un developpeur remarque que le formateur CSS de son editeur produit une indentation inattendue et utilise l'outil en ligne pour confirmer a quoi ressemblerait une sortie correctement indentee avant de debugger la configuration locale de l'editeur.

Avoir une sortie de reference connue elimine la speculation pour savoir si l'editeur ou le CSS source est en cause et raccourcit le cycle de debogage. La cause s'avere etre un plugin tiers qui imposait silencieusement ses propres regles d'indentation au-dessus de Prettier.

Une auteure d'un site de documentation prepare des exemples CSS pour un tutoriel et fait passer chaque extrait dans le correcteur avant publication, garantissant des exemples uniformement indentes quelle que soit la facon dont les extraits ont ete ecrits a l'origine.

Cela produit une experience pedagogique plus soignee et evite de troubler les apprenants qui se demanderaient sinon pourquoi differents exemples du meme tutoriel suivent differentes conventions, ce qui distrairait du contenu reel.

When to use this guide

A utiliser quand le CSS contient un melange de tabulations et d'espaces, des niveaux d'indentation incoherents, ou des proprietes qui ne sont pas indentees du tout, ce qui est courant dans les feuilles de style ecrites a la main par plusieurs auteurs.

Conseils d'experts

Obtenez de meilleurs résultats avec ces suggestions d'experts :

Faites passer le correcteur sur tout le fichier, pas seulement la section modifiee

Corriger l'indentation uniquement de la section que vous editez laisse le reste du fichier incoherent et garantit que le probleme reapparaitra la prochaine fois que quelqu'un touchera une autre partie. Formatez l'ensemble du fichier en un seul passage pour une base entierement coherente, puis commitez ce passage seul avant de continuer tout autre travail.

Committez les corrections d'indentation dans un commit dedie

Quand vous corrigez l'indentation a l'echelle d'un gros fichier, faites-en un commit separe avec un message clair comme "Normaliser l'indentation CSS". Cela maintient le changement d'indentation distinct des changements de logique, rend le commit facile a annuler si quoi que ce soit d'inattendu se produit, et preserve l'utilite de git blame pour l'historique semantique reel plutot que de l'enfouir sous le bruit d'espacement.

Verifiez specifiquement l'indentation des regles @media

Les at-regles imbriquees demandent deux niveaux d'indentation : la regle @media ou @supports elle-meme se trouve au premier niveau, et les regles internes sont indentees d'un niveau supplementaire. Verifiez cette imbrication apres correction, surtout quand le fichier melange l'ancienne syntaxe des media queries avec des container queries plus recentes ajoutees plus tard par d'autres contributeurs.

Utilisez le correcteur comme outil de diagnostic

Si le correcteur produit une sortie inattendue, le CSS source peut comporter des erreurs structurelles comme une accolade manquante ou une chaine non terminee. La sortie du formateur reflete la veritable structure d'accolades du fichier, donc une sortie irreguliere pointe souvent directement la ligne du probleme structurel. Considerez une sortie surprenante comme un signal de diagnostic, pas un bug de l'outil.

Corrigez l'indentation avant d'integrer de nouveaux contributeurs

Faites passer le correcteur d'indentation sur tous les fichiers CSS avant qu'un nouveau membre d'equipe ne rejoigne le projet. Partir d'une base coherente l'empeche d'introduire involontairement de l'indentation mixte.

Corrigez l'indentation avant un refactoring

Une indentation coherente revele la veritable structure d'une feuille de style avant que vous ne commenciez a deplacer des regles. Refactoriser un CSS uniformement indente est nettement plus facile et produit des diffs plus propres.

Corrigez les problemes tabulations / espaces en une seule etape

Si votre CSS melange des sections indentees par tabulations et par espaces, un probleme frequent dans les fichiers edites sur differents systemes d'exploitation, le correcteur normalise tout en espaces en un seul collage.

FAQ

Questions fréquentes

Le formateur applique une indentation de deux espaces, qui est la convention la plus largement adoptee dans la communaute CSS et la valeur par defaut d'outils comme Prettier et du Google CSS Style Guide. Chaque niveau imbrique ajoute deux espaces supplementaires, donc une regle a l'interieur d'une media query se trouve a quatre espaces, et une at-regle plus profondement imbriquee a six. Cette convention s'adapte proprement a toute profondeur d'imbrication et produit une structure visuelle coherente sur des fichiers de toute taille.

Oui. Que l'entree utilise des tabulations, des espaces ou un melange des deux dans le meme fichier, le correcteur normalise tout le contenu en une indentation coherente a base d'espaces. C'est particulierement utile pour les fichiers edites sur differents systemes d'exploitation ou par des developpeurs avec des reglages d'editeur differents, ou tabulations et espaces finissent souvent entrelaces dans le meme bloc de regle d'une maniere quasi impossible a corriger a la main sans manquer un cas.

Non. L'indentation est de l'espace blanc et n'a aucun effet sur la maniere dont le navigateur analyse ou applique le CSS. Toutes les regles, selecteurs, noms de proprietes, valeurs et at-regles sont preserves exactement, et la page rendue sera identique avant et apres la correction. Cela fait de la normalisation d'indentation l'un des changements les plus surs possibles sur un fichier CSS, ce qui en fait un excellent commit dedie a deposer avant tout refactoring plus risque.

La sortie par defaut utilise une indentation de deux espaces. Pour quatre espaces, envisagez d'executer Prettier localement avec l'option tabWidth a 4, ce qui permet de configurer la largeur d'indentation par projet. Le formateur dans le navigateur est volontairement opinion sur l'indentation pour rester rapide et sans configuration ; pour les projets engages sur une largeur non standard, un outil local configure est plus adapte.

Les causes les plus courantes sont : plusieurs contributeurs aux reglages d'editeur differents, copier-coller depuis des sources externes qui apportent leurs conventions, detection automatique de l'editeur qui bascule silencieusement entre tabulations et espaces a mi-fichier, fichiers anciens anterieurs a tout standard d'equipe, generateurs de code ou systemes de templates qui emettent du CSS avec leurs propres conventions internes. Chaque cause individuelle est mineure ; ensemble sur des annees, ils produisent le chaos d'indentation des projets legacy.

Corrigez d'abord l'indentation sur l'ensemble du fichier existant, committez ce changement separement avec un message clair, puis seulement commencez a ecrire du nouveau CSS. Cela garantit que votre nouveau code est ecrit dans un environnement coherent, rend la correction facile a annuler si necessaire, et garde le diff de votre travail fonctionnel suivant propre et relisible. Faire l'inverse signifie que votre commit de fonctionnalite sera pollue par des changements d'espaces dans des sections que vous n'avez pas reellement modifiees.

Le formateur traite uniquement du CSS standard. Les template literals de CSS-in-JS contiennent de la syntaxe JavaScript autour du CSS, que le formateur n'est pas concu pour analyser. La solution pratique est d'extraire la partie CSS de l'interieur du template literal, de la passer dans le formateur et de recoller le CSS corrige dans le literal. Pour les projets qui utilisent beaucoup de CSS-in-JS, envisagez un formateur conscient du JavaScript comme Prettier, qui comprend a la fois l'enveloppe JavaScript et le CSS a l'interieur.

Le formateur est concu pour du CSS standard. Les constructions SCSS et Less de base qui ressemblent etroitement au CSS, comme les declarations de variables avec @ ou $ et l'imbrication standard de regles, peuvent se formater correctement, mais la syntaxe specifique aux preprocesseurs comme les fonctions Sass, les mixins et l'imbrication via le symbole esperluette peut ne pas produire la sortie attendue. Pour SCSS et Less specifiquement, utilisez un formateur conscient du preprocesseur tel que Prettier avec le plugin adequat.

Non. Le correcteur est purement une operation sur l'espace blanc. Les declarations restent dans l'ordre ou vous les avez ecrites, les regles restent dans l'ordre du fichier, et les blocs d'at-regles gardent leurs positions originales. Si vous voulez reordonner les proprietes alphabetiquement ou regrouper les regles logiquement, c'est une operation separee geree par des outils comme stylelint avec le plugin d'ordonnancement approprie. Le correcteur se concentre uniquement sur l'indentation pour que le commit resultant soit sans ambiguite un changement d'espacement sans effet de bord semantique.