Formateur CSS
Formatez des feuilles de style minifiées ou désordonnées avec ce formateur CSS. Collez du CSS ; l’outil l’analyse, puis affiche chaque règle avec son sélecteur sur une ligne, une déclaration par ligne indentée de deux espaces, une espace après chaque deux-points, des combinateurs espacés et des règles at imbriquées telles que les requêtes media. Les erreurs d’analyse sont signalées. Idéal pour les développeurs Web et les designers qui lisent, déboguent ou révisent des feuilles de style provenant de n’importe quelle source.
Foire aux questions
Comment fonctionne le formateur CSS ?
Il analyse votre feuille de style en règles, déclarations et règles at, puis les réimprime dans une mise en page cohérente. Comme le CSS est analysé, le résultat reflète la structure réelle de la feuille de style.
À quoi ressemble le CSS formaté ?
Chaque règle commence par son sélecteur et une accolade ouvrante. Chaque déclaration occupe sa propre ligne, avec une indentation de deux espaces et une espace après les deux-points ; l’accolade fermante a sa propre ligne. Les listes de sélecteurs sont séparées par une virgule suivie d’une espace, et les combinateurs tels que > et ~ sont entourés d’espaces.
Les requêtes média et autres règles at sont-elles prises en charge ?
Oui, les règles à l’intérieur de @media, @supports et de blocs similaires sont imbriquées et indentées. Les instructions telles que @import restent sur une seule ligne, avec les valeurs url() entre guillemets.
Que se passe-t-il en cas de CSS invalide ?
Lorsque l’analyseur ne peut pas lire la feuille de style, par exemple parce qu’il manque une accolade, l’outil s’arrête et affiche le message de l’analyseur avec le numéro de ligne. Corrigez l’emplacement indiqué, puis relancez le formatage.
Les commentaires sont-ils préservés ?
Oui, les commentaires sont conservés, aussi bien entre les règles qu’entre les déclarations. Chaque commentaire est placé sur sa propre ligne, au niveau d’indentation du code qui l’entoure.
Les propriétés personnalisées sont-elles prises en charge ?
Oui, les propriétés personnalisées telles que --brand-color sont formatées comme n’importe quelle autre déclaration. Les références telles que var(--brand-color) sont conservées telles quelles.
Puis-je formater SCSS ou Less ici ?
Non, cette page attend du CSS classique, et les règles imbriquées ou les variables des préprocesseurs peuvent être rejetées. Utilisez le formateur SCSS ou le formateur Less pour ces fichiers.
Puis-je modifier l’indentation ou le style des accolades ?
Non, le formateur ne propose aucune option et utilise toujours deux espaces, avec l’accolade ouvrante sur la ligne du sélecteur. Les résultats restent ainsi cohérents pour toutes les feuilles de style.
Pourquoi le résultat est-il entouré d’un bloc de code css ?
La sortie est renvoyée sous forme de bloc de code Markdown identifié comme css, afin d’être affichée avec la coloration syntaxique dans Markdown. Copiez les lignes entre les délimiteurs dans votre fichier .css.
Quelle peut être la taille de ma feuille de style ?
Jusqu’à 5 MB par exécution ; les entrées plus volumineuses sont rejetées avec un message. La sortie est identique à l’option CSS du formateur de code.