À quoi sert un formateur CSS ?
Une feuille de style minifiée tient sur une ligne ; une feuille écrite à plusieurs mélange souvent les styles : accolades sur la même ligne ou non, espaces après les deux-points, propriétés sur une seule ligne. Le formatter réécrit tout de façon cohérente : un sélecteur par ligne, une déclaration par ligne, une indentation régulière.
L’outil utilise Prettier. Vous choisissez l’indentation (2 espaces, 4 espaces ou tabulations) et la largeur de ligne (80, 100 ou 120 caractères). En plus du CSS standard, il formate le SCSS et le Less : l’analyseur est choisi automatiquement d’après l’extension du fichier (.css, .scss, .less) ou via un sélecteur si vous collez du code. Les imbrications, variables et mixins sont donc correctement indentés.
Seule la présentation change : sélecteurs, propriétés, valeurs et ordre des règles restent identiques, et les commentaires sont conservés. Si le code contient une erreur de syntaxe, le message de l’analyseur s’affiche pour vous aider à la corriger.
Tout le traitement a lieu dans votre navigateur, sans envoi. L’essai gratuit couvre un fichier ou un texte collé ; ToolStudio Pro offre un usage illimité et le formatage de plusieurs fichiers à la fois, téléchargés ensemble en ZIP.
Comment formater du CSS ?
- Collez votre code ou déposez un fichier .css, .scss ou .less.
- Vérifiez le langage détecté (CSS, SCSS ou Less) ou choisissez-le dans le sélecteur.
- Réglez l’indentation et la largeur de ligne.
- Lancez le formatage.
- Copiez le résultat ou téléchargez le fichier formaté.
Quand formater du CSS ?
- Lire et modifier le CSS minifié d’un site ou d’un thème.
- Harmoniser un fichier SCSS écrit par plusieurs développeurs.
- Nettoyer du CSS copié depuis les DevTools du navigateur.
- Préparer un extrait de style propre pour une documentation.
- Relire les styles d’un composant avant une revue de code.
CSS, SCSS et Less : pourquoi choisir le bon analyseur
SCSS et Less ajoutent au CSS des variables ($couleur, @couleur), l’imbrication des sélecteurs, les mixins et les fonctions. Un analyseur CSS pur considérerait ces constructions comme des erreurs. En choisissant le bon langage, Prettier comprend la structure et indente correctement chaque niveau d’imbrication.
Foire Aux Questions
L’outil gère-t-il SCSS et Less ?
Oui. L’analyseur est déduit de l’extension du fichier (.scss, .less) ou choisi dans le sélecteur quand vous collez du code.
Le formatage change-t-il le comportement du CSS ?
Non. Seuls les espaces, retours à la ligne et l’indentation changent ; l’ordre des règles et les valeurs restent identiques.
Les commentaires sont-ils conservés ?
Oui, Prettier conserve les commentaires présents dans le code. En revanche, un CSS déjà minifié n’a plus ses commentaires d’origine.
Mon code est-il envoyé sur un serveur ?
Non, le formatage est effectué dans votre navigateur.
Est-ce gratuit ?
L’essai gratuit couvre un fichier ou un texte collé par outil. Une fois l’essai utilisé, vous pouvez encore retraiter ce même contenu avec d’autres options ; pour un nouveau contenu, il faut ToolStudio Pro : usage illimité de tous les outils, plusieurs fichiers à la fois téléchargés ensemble en ZIP, et aucune publicité. Résiliable à tout moment.