Formateur CSS en ligne pour des feuilles de style lisibles

Introduction

Du CSS minifié ou compressé à la main se télécharge efficacement pour un navigateur, mais se lit mal pour une personne : tout est collé, sans retours à la ligne, sans indentation et le plus souvent sans commentaires. Formater fait l'inverse de minifier : cela reprend le CSS dans cet état compressé et reconstruit les retours à la ligne, l'espacement et l'indentation qui le rendent de nouveau lisible, sans changer ce que fait la moindre règle. Cela compte dès qu'une personne, et non un navigateur, doit réellement regarder le CSS : pour en apprendre quelque chose, pour le vérifier, ou pour y retrouver une règle précise.

Comment cet outil met en forme votre CSS

Coller du CSS et cliquer sur Formater reconstruit le code en un bloc par règle : chaque sélecteur sur sa propre ligne, suivi de ses propriétés indentées en dessous, une propriété par ligne. Les valeurs des propriétés — couleurs, unités, notations abrégées — restent exactement telles que vous les avez collées ; seuls l'espacement et la structure changent. Deux détails méritent d'être connus sur le traitement des sélecteurs et des valeurs :

• Les sélecteurs groupés restent ensemble. Une règle comportant plusieurs sélecteurs séparés par des virgules, comme .card, .card-highlight, .card-featured { ... }, est conservée sur une seule ligne de sélecteurs au lieu d'être éclatée à raison d'un par ligne, comme le font certains formateurs.
• Les valeurs contenant un deux-points sont traitées correctement. Dans chaque déclaration, seul le premier deux-points est pris pour le séparateur entre la propriété et sa valeur : une valeur qui en contient elle-même un — le cas le plus fréquent étant une adresse web comme background: url(http://example.com/img.png) — n'est donc pas coupée au mauvais endroit.

Les commentaires sont supprimés au cours de cette opération, ce qu'il faut savoir si votre feuille de style comporte une licence ou une mention d'attribution : voir l'avertissement ci-dessous.

À savoir avant de l'utiliser

Cet outil fonctionne bien sur du CSS simple et à plat, c'est-à-dire une liste ordinaire de sélecteurs et de leurs propriétés. Il a deux limites précises qu'il vaut la peine de connaître avant d'y coller du code réel :

• Les règles imbriquées ne se mettent pas en forme correctement. Si votre CSS comporte une requête @media, un bloc @keyframes ou toute règle imbriquée dans un autre bloc, la portion qui l'entoure risque de sortir en désordre plutôt que proprement indentée. Cet outil reconstruit la structure en appariant les accolades ouvrantes et fermantes une paire à la fois, sans suivre la profondeur à laquelle une accolade se situe dans un autre bloc : le contenu d'une règle imbriquée dans @media se retrouve donc mêlé à celui du bloc @media lui-même au lieu de rester correctement imbriqué. Si votre feuille de style emploie des requêtes média ou des keyframes, examinez cette portion du résultat de près, ou formatez une version dont les parties imbriquées ont été retirées.
• Tous les commentaires sont supprimés, sans exception. Contrairement à CSS Minifier sur ce site, qui conserve les commentaires rédigés comme licence ou mention d'attribution, cet outil de mise en forme retire chaque commentaire du code collé. Si votre feuille de style comporte un en-tête de licence que vous devez garder, enregistrez-en une copie avant de formater.

Aucune de ces deux limites ne touche à ce que fait le CSS : les règles et les valeurs de fond ne sont pas modifiées, seule change la part de la structure effectivement remise sous une forme lisible.

Quand cet outil est le bon choix

• Lire le CSS minifié de quelqu'un d'autre pour en apprendre quelque chose. Consulter la feuille de style d'un vrai site depuis les outils de développement d'un navigateur montre souvent du CSS compressé et illisible : le coller ici et le formater permet d'étudier réellement comment une mise en page ou un composant est construit, un usage d'éducation au numérique concret, qui dépasse le simple fait d'essayer l'outil sur son propre code.
• Examiner le CSS rendu par un élève. Du code copié-collé d'un éditeur à un autre perd parfois sa mise en forme d'origine ; le formater avant de le lire accélère la correction et le retour.
• Trouver l'erreur dans une mise en page qui ne fonctionne pas. Un CSS dense et non mis en forme se parcourt plus difficilement à la recherche de la règle qui pose problème : le formater d'abord rend généralement le point fautif plus facile à repérer.

Si le CSS sur lequel vous travaillez repose sur des requêtes @media ou d'autres blocs imbriqués et qu'il vous faut une mise en forme fiable, le formateur intégré d'un éditeur de code conviendra mieux que cet outil : voir la limite exposée plus haut. Pour une feuille de style à plat, sans règles imbriquées, ce qui couvre une bonne part du travail d'initiation au web design, cet outil est un moyen rapide d'obtenir un résultat lisible sans rien installer.

Exemple

Un élève trouve intéressant le CSS d'un site modèle et veut comprendre comment une mise en page en cartes est construite. La feuille de style en ligne est minifiée en une seule ligne dense : avant de pouvoir la lire, il la colle dans cet outil et la formate. Les règles se séparent en une structure lisible, ce qui permet de voir quel sélecteur gouverne quelle partie de la mise en page, comment l'espacement est réglé avec margin et padding, et quelles couleurs reviennent dans l'ensemble du design. Si la feuille de style copiée comporte des requêtes @media pour le comportement responsive, cette portion demande un second coup d'œil ensuite : voir « À savoir avant de l'utiliser » plus haut.

Questions fréquentes

Formater change-t-il ce que fait le CSS ?

Non. Seuls l'espacement, les retours à la ligne et l'indentation changent : les sélecteurs, les propriétés et les valeurs restent les mêmes.

Que deviennent les commentaires de mon CSS ?

Ils sont supprimés. Cet outil ne conserve pas les commentaires de licence ou d'attribution comme le fait CSS Minifier : enregistrez-en une copie au préalable s'il vous faut en garder un.

Met-il correctement en forme du CSS comportant des requêtes média ?

Pas de façon fiable. Les règles imbriquées dans @media, @keyframes ou des blocs semblables peuvent sortir en désordre : examinez cette partie du résultat, ou recourez au formateur d'un éditeur de code pour les feuilles de style qui reposent largement sur l'imbrication.

Puis-je formater du CSS minifié copié depuis un autre site ?

Oui, c'est un usage répandu et légitime pour apprendre comment une page est construite. Gardez toutefois en tête les conditions d'utilisation du site d'origine si vous comptez réemployer le code lui-même et pas seulement l'étudier.

Mon code est-il enregistré quelque part ?

Non. Le CSS collé est traité pour produire le résultat mis en forme et n'est pas conservé ensuite ; seul le fait que l'outil a été utilisé est consigné, pas le code lui-même.

Les sélecteurs groupés sont-ils répartis sur des lignes distinctes ?

Non. Une règle écrite avec plusieurs sélecteurs séparés par des virgules reste sur une seule ligne de sélecteurs, telle qu'elle avait été écrite à l'origine.

Quels outils liés puis-je utiliser ?

Utilisez CSS Minifier pour recompresser le CSS en vue de la production, ou JavaScript Beautifier et HTML Beauty pour d'autres tâches de mise en forme de code.