tigtools

Formateur CSS

Collez une feuille de style pour la rendre lisible ou la compresser. Les chaînes, les valeurs url() et les commentaires sont traités comme des blocs, afin que rien à l’intérieur ne soit cassé.

Fonctionne dans votre navigateur Sans inscription

Mode
Indentation (espaces)

Saisissez du texte pour afficher le résultat.

Mode d’emploi

  1. Collez le CSS dans le champ de saisie, ouvrez un fichier .css ou essayez l’exemple.
  2. Choisissez Formater pour un code lisible ou Minifier pour la sortie la plus compacte.
  3. Lors de la mise en forme, choisissez 2 espaces, 4 espaces ou des tabulations.
  4. Copiez le résultat ou téléchargez-le sous forme de fichier .css. Si les accolades ou les guillemets sont déséquilibrés, l’erreur indique la ligne et la colonne.

Fonctionnement

Le formateur commence par diviser la feuille de style en jetons : les chaînes entre guillemets simples ou doubles, les valeurs url(…), les commentaires, les accolades et les points-virgules. Comme les chaînes et url() forment des jetons uniques, un point-virgule dans une URI de données ou une accolade dans content: « { } » ne perturbe jamais la structure, et leur contenu est copié à l’identique.

Beautify place chaque sélecteur d’une liste de sélecteurs sur sa propre ligne, ajoute des espaces autour des combinateurs enfant, frère et adjacent (>, ~, +), et écrit chaque déclaration sous la forme « property: value; » sur sa propre ligne. Les blocs dans @media, @supports, @layer, @container et la nidification CSS native sont indentés d’un niveau par profondeur. Un point-virgule manquant après la dernière déclaration d’un bloc est ajouté. Les commentaires sont conservés à leur place.

Minify supprime les commentaires (sauf les avis de licence /*! … */), réduit les espaces, supprime les espaces autour des accolades, des deux-points, des points-virgules, des virgules et des combinateurs de sélecteurs, et retire le point-virgule avant chaque accolade fermante. Les espaces qui modifient le sens sont conservés : le combinateur descendant dans « .a .b », l’espace dans « a :focus » et les espaces dans les valeurs comme calc(100% - 2px). « ! important » est normalisé en « !important ».

L’outil ne réécrit pas les valeurs : les couleurs, les unités et les zéros sont laissés tels quels, et les règles ne sont ni fusionnées ni réordonnées. Les fichiers SCSS ou Less avec une nidification simple fonctionnent généralement, mais leur syntaxe propre, comme les commentaires // ou les mixins, n’est pas comprise.

Exemples

Lecture d’un fichier de framework minifié

Collez un extrait de bootstrap.min.css sur une seule ligne et choisissez Beautify avec 2 espaces pour voir chaque règle, les media queries et leurs règles imbriquées sur des lignes séparées et indentées.

Mettre en production une feuille de style écrite à la main

Minifiez une feuille de style de 12 Ko avec commentaires et indentations avant de l’insérer en ligne dans un modèle d’e-mail ou un en-tête de page. Le résumé affiche le nombre de caractères avant et après.

Trouver une accolade manquante

Une feuille de style cesse de s’appliquer à mi-chemin. Le formateur indique « Cette { n’est jamais fermée par un } correspondant » avec la ligne de la règle à laquelle il manque son accolade fermante.

Foire aux questions

Le CSS minifié par cet outil est-il sûr à utiliser en production ?

Il supprime uniquement les commentaires et les espaces que le CSS ignore, donc les règles se comportent de la même façon. Il n’effectue pas les optimisations plus poussées des outils de build comme la fusion de règles ou le raccourcissement des couleurs, le résultat peut donc être légèrement plus volumineux que le leur.

Pourquoi un espace est-il conservé dans « a :focus » ?

Dans un sélecteur, un espace est le combinateur descendant. « a :focus » désigne un élément ayant le focus à l’intérieur d’un lien, tandis que « a:focus » désigne un lien ayant le focus. Supprimer cet espace changerait les éléments correspondants.

Peut-il formater SCSS ou Less ?

Les règles imbriquées simples sont correctement formatées. La syntaxe propre aux préprocesseurs, comme les commentaires //, les mixins avec arguments ou les blocs @if, n’est pas comprise et peut être formatée de façon inattendue ; vérifiez donc le résultat.

Les commentaires de licence sont-ils supprimés lors de la minification ?

Les commentaires commençant par /*! sont conservés, selon la convention habituelle pour les mentions de licence et de droits d’auteur. Tous les autres commentaires sont supprimés.

Confidentialité

Votre CSS est traité uniquement dans votre navigateur. Rien n’est envoyé, stocké ni inclus dans les données d’analyse.