Formater du CSS

Comment ça marche

La feuille de style d'un site en ligne est presque toujours un fichier .min.css tassé sur une seule ligne : 40 Ko de règles sans début ni fin visibles. Collez le code dans le volet de gauche. À droite, chaque sélecteur passe sur sa propre ligne, chaque propriété (color: red;) aussi, et l'intérieur de chaque bloc est indenté selon la largeur choisie. Les blocs @media, @supports et @keyframes reçoivent un cran de plus : vous voyez tout de suite où commencent les règles pour mobile. Les sélecteurs séparés par une virgule (.carte h2, .carte h3) sont placés l'un sous l'autre, les commentaires restent à leur place. Les règles imbriquées d'un fichier SCSS ou LESS sont dépliées de la même manière ; les variables comme $couleur ou @couleur ne sont pas touchées. La ligne de résultat indique combien de lignes vous aviez, combien vous en avez maintenant et combien de blocs de règles ont été trouvés. Si vous réglez Que faut-il faire ? sur Minifié, l'outil fait l'inverse : espaces et commentaires disparaissent, les couleurs comme #ffffff sont raccourcies et le code tient sur une ligne. Les règles ne sont pas fusionnées et leur ordre ne change pas.

Cet outil est aussi connu sous le nom de formater css, css formatter en ligne, indenter du css, embellir du css, css beautifier, formater scss.

Qu'est-ce que CSS ?

Le CSS (Cascading Style Sheets, feuilles de style en cascade) est le langage qui fixe les couleurs, les polices, les marges et la mise en page d'une page web. Chaque règle associe un sélecteur (.carte, h2, #menu) à des paires propriété: valeur; entre accolades. Le navigateur ignore les espaces et les retours à la ligne entre les règles : la même feuille peut donc être joliment indentée ou écrasée sur une ligne, avec exactement le même rendu.

Qu'est-ce que SCSS et LESS ?

SCSS et LESS sont des préprocesseurs : ils ajoutent au CSS des variables, des règles imbriquées et des blocs réutilisables (mixins). Le navigateur ne les lit pas directement ; un compilateur les transforme d'abord en CSS ordinaire. Leur écriture est assez proche du CSS pour que le même outil les indente : une structure imbriquée .carte { h2 { ... } } gagne un cran de retrait par niveau.

Quelle différence entre formater et minifier du CSS ?

Les deux poussent le même code dans des directions opposées. Formater ajoute espaces et retours à la ligne pour qu'une personne puisse lire le code ; le fichier grossit, le sens ne change pas. Minifier retire espaces et commentaires, raccourcit couleurs et nombres et, en mode poussé, fusionne des règles ; le fichier maigrit et se charge plus vite, mais devient difficile à lire. Pour le navigateur le résultat est le même : la différence tient à qui doit lire le fichier.

La mise en forme modifie-t-elle le CSS ?

Non. En mode indenté, seuls les espaces, les retours à la ligne et le retrait changent ; sélecteurs, propriétés, valeurs et commentaires restent identiques au caractère près. Le navigateur ignore les espaces dans le CSS, la page s'affiche donc exactement pareil. Vous pouvez ainsi lire sans risque la feuille minifiée d'un site en ligne, chercher une erreur ou copier une règle.

L'outil ne vérifie rien : une accolade fermante manquante, un nom de propriété mal écrit ou un point-virgule oublié ne sont pas signalés, le code est simplement indenté tel quel. Le retrait trahit quand même les erreurs : après un bloc jamais fermé, toutes les règles suivantes se retrouvent un cran trop à droite.

Indenté ou minifié ?

Le CSS indenté sert aux personnes : lire, modifier, partager avec une équipe. Le CSS minifié sert au navigateur : plus le fichier est léger sur le site en ligne, plus vite la page s'affiche. La pratique courante consiste à garder le fichier indenté dans le projet et à minifier au moment de la mise en ligne.

L'option Minifié de cette page reste prudente : seuls les espaces et les commentaires partent, couleurs et nombres sont raccourcis, le nombre et l'ordre des règles ne bougent pas. Les commentaires de licence /*! sont conservés. Pour une minification plus poussée qui fusionne les règles, avec une comparaison avant/après en octets, utilisez l'outil Minifier du CSS.

• Lire, chercher une erreur, copier une règle → Indenté
• Mettre en ligne, intégrer dans un e-mail → Minifié
• Fichier source SCSS/LESS → Indenté (on minifie le CSS compilé)

Questions fréquentes

Comment rendre lisible un fichier CSS minifié ?

Copiez le contenu du fichier et collez-le dans le volet de gauche de cette page. Chaque sélecteur et chaque propriété passent sur leur ligne, chaque bloc est indenté. Vous pouvez copier le résultat ou le télécharger en fichier .css. Pour récupérer la feuille de style d'un site ouvert, passez par l'onglet Sources des outils de développement du navigateur.

Puis-je formater du SCSS ou du LESS ?

Oui. Les règles imbriquées, les variables et les sélecteurs avec & sont dépliés et indentés de la même façon. L'outil ne compile pas le SCSS et n'exécute pas les mixins (@mixin, @include) ; il rend seulement la structure lisible.

L'outil signale-t-il les erreurs de mon CSS ?

Non, ce n'est pas un validateur ; un code erroné est indenté tel quel. Une accolade restée ouverte se remarque souvent aux règles suivantes, décalées d'un cran. L'outil Minifier du CSS, lui, indique la ligne et la colonne des passages illisibles.

Mon code est-il envoyé à un serveur ?

Non. La mise en forme se fait entièrement dans votre navigateur ; le code collé ne quitte pas cette page et n'est enregistré nulle part.