Formateur CSS
Embellissez ou compressez votre CSS en un clic avec tri alphabetique des proprietes. Compatible avec @media, @keyframes et toutes les at-rules standard.
Cet outil a-t-il résolu votre problème ?
Questions frequemment posees
Que fait l'embellissement CSS ?
L'embellissement CSS (formatage) prend du CSS compresse ou ecrit de maniere incoherente et le reformate : chaque declaration sur sa propre ligne, indentation correcte dans les blocs de regles et lignes vides entre les regles pour la lisibilite. C'est purement cosmetique — les styles rendus sont identiques.
Qu'est-ce que le tri des proprietes et pourquoi l'utiliser ?
Le tri des proprietes reordonne les declarations alphabetiquement (A→Z) dans chaque bloc de regles. Le CSS trie est plus facile a parcourir pour trouver des proprietes specifiques et aide a eviter les doublons. Les guides de style comme l'ordre alphabetique aident les equipes a rester coherentes dans toute la base de code.
La compression CSS affecte-t-elle l'apparence de la page ?
Non. La compression CSS supprime les espaces, les commentaires et le dernier point-virgule dans les blocs de regles — tous semantiquement insignifiants. Les navigateurs interpretent le CSS compresse et formate de maniere identique. Le CSS compresse est generalement 20 a 40% plus petit que le CSS formate.
Supporte-t-il les requetes @media et @keyframes ?
Oui. Les at-rules comme @media, @keyframes, @supports et @font-face sont reconnues et leurs blocs internes sont correctement indentes. @import et @charset (qui n'ont pas de bloc) sont formates comme des instructions sur une seule ligne.
Peut-il traiter SCSS ou Less ?
Le formateur traite la syntaxe CSS standard et traitera les parties CSS valides des fichiers SCSS/Less. Les fonctionnalites specifiques a SCSS comme les variables ($var), l'imbrication et les mixins (@mixin) peuvent ne pas etre correctement formatees car elles ne sont pas de la syntaxe CSS standard.
Comment autoformater le CSS dans mon projet ?
Utilisez Prettier avec une configuration .prettierrc, ou Stylelint avec le preset stylelint-config-prettier. Pour les projets Tailwind CSS, le plugin Tailwind Prettier peut trier les classes utilitaires. Le formateur CSS integre de VS Code (Shift+Alt+F) convient aussi pour un formatage local rapide.