Nouplo

Formateur CSS

Une déclaration par ligne — ou tout le fichier sur une seule.

Les exemples remplacent temporairement la saisie et les réglages. Vous pouvez rétablir votre travail précédent.

0 caractères
Résultat
Collez ou saisissez du texte ci-dessus pour voir le résultat ici.

Vos fichiers restent sur votre appareil

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous collez est traité sur votre appareil et n’est jamais envoyé à un serveur : vous pouvez l’utiliser sans crainte avec des jetons, des clés et des textes non publiés.

Exemple

Exemple pratique — Formateur CSS

Saisissez les lignes dans l’ordre et utilisez les réglages ci-dessous. Comparez le résultat avec les lignes de sortie.

Élément Valeur
Entrée 1 a{color:red;margin:0}
Que faire Mettre en forme
Indentation 2 espaces
Sortie 1 a {
Sortie 2 color: red;
Sortie 3 margin: 0;
Sortie 4 }

Les deux déclarations CSS occupent des lignes distinctes, indentées de deux espaces. Les valeurs red et 0 ne changent pas.

Comment ça marche

  1. Collez le CSS.
  2. La mise en forme place chaque sélecteur et chaque déclaration sur sa propre ligne, avec une ligne vide entre les règles.
  3. La compression retire les commentaires et toutes les espaces qui ne servent à rien.
  4. Copiez ou téléchargez le résultat.

Questions fréquentes

Et une accolade dans une chaîne ou dans url() ?
Elle est laissée telle quelle. Les chaînes et les commentaires sont lus comme des blocs entiers avant tout découpage sur les accolades : content: "}" se met donc en forme correctement au lieu de couper la règle en deux.
La compression garde-t-elle l’espace dans .a .b ?
Oui. Cette espace est le combinateur de descendance et signifie quelque chose ; les espaces autour d’un deux-points ou d’une accolade non. Seules les espaces sans signification disparaissent.
Réordonne-t-il ou raccourcit-il mes propriétés ?
Non. Rien n’est fusionné, raccourci ni déplacé — #ffffff reste #ffffff. On met en forme ce que vous avez écrit ; on ne le réécrit pas.
Quelque chose part-il vers un serveur ?
Non. Tout tourne dans le navigateur : ce que vous collez reste sur votre ordinateur.

Outils associés

‹› Formateur HTML Indenté pour le lire, ou compressé pour le livrer. • Minifieur JavaScript Plus petit — et démontrablement le même code. ◐ Vérificateur de contraste Si quelqu’un peut vraiment le lire. ◒ Convertisseur de couleur HEX, RGB, HSL et CMJN — plus le rapport de contraste qui décide de la lisibilité.