Comment ça marche
Réindente et met en forme des feuilles de style CSS ou SCSS compressées ou mal alignées pour les rendre lisibles. Utile pour inspecter des styles minifiés, examiner du CSS tiers ou unifier le format avant de l'enregistrer.
Il permet de choisir le type d'indentation (espaces ou tabulations), la taille d'indentation et la fin de ligne. Chaque déclaration passe sur sa propre ligne et les sélecteurs séparés par des virgules sont placés sur des lignes distinctes.
Le traitement est entièrement local, dans votre navigateur, avec js-beautify. Il met en forme la présentation ; il ne minifie pas, ne réordonne pas les propriétés et ne valide pas que les règles sont correctes.
Exemples
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}Les sélecteurs sont répartis sur des lignes et chaque propriété est indentée.Cas d'usage
- Rendre lisible un fichier .css minifié d'un site.
- Normaliser l'indentation d'une feuille de style avant un commit.
- Examiner et comparer les règles CSS d'un framework ou d'une bibliothèque.
- Mettre en forme du SCSS collé depuis de la documentation ou des générateurs.
Questions fréquentes
Fonctionne-t-il aussi pour SCSS ou LESS ?
Il formate le CSS et une syntaxe compatible comme SCSS, y compris les règles imbriquées. Il ne compile pas SCSS ni LESS en CSS : il ne fait que réorganiser l'indentation et les sauts de ligne.
Réordonne-t-il ou regroupe-t-il les propriétés ?
Non. Il conserve l'ordre original des sélecteurs et des déclarations. Il ne change que l'espacement, l'indentation et les sauts de ligne pour améliorer la lisibilité.
Est-ce la même chose que minifier le CSS ?
Non, c'est l'inverse. Le formatage ajoute des espaces et des sauts de ligne pour mieux le lire ; la minification les supprime pour réduire la taille du fichier. Pour compresser, utilisez l'outil de minification.
Mon code est-il envoyé sur un serveur ?
Non. Le formatage se fait entièrement dans votre navigateur ; le CSS ne quitte jamais votre ordinateur.