Formateur CSS

Formatez ou minifiez du CSS, triez les propriétés et convertissez les px en rem — directement dans votre navigateur.

À propos de Formateur CSS

De quoi s’agit-il

Le Formateur CSS rend une feuille de style lisible ou compacte. Il indente les règles, trie les propriétés par ordre alphabétique ou selon le modèle de boîte, convertit les px en rem et ramène toutes les couleurs à un même format. Il vérifie aussi le CSS au passage et s’arrête sur des accolades non équilibrées ou une déclaration cassée au lieu de produire un résultat faux.

Fonctionnalités principales

  • Mise en forme avec 2 ou 4 espaces, ou minification sur une ligne.
  • Tri des propriétés : alphabétique, ou logique selon le modèle de boîte.
  • px → rem avec votre propre taille de police de base.
  • Toutes les couleurs en HEX, RGB/RGBA ou HSL.
  • Un filtre par sélecteur qui n’affiche que les blocs utiles.
  • Des erreurs pour les accolades non équilibrées, une déclaration sans « propriété : valeur » et une valeur vide.

Comment l’utiliser

  1. Collez du CSS dans l’éditeur, ouvrez un fichier .css ou cliquez sur « Exemple ».
  2. Choisissez « Format » ou « Minifier » et l’indentation.
  3. Si besoin, réglez le tri des propriétés, px → rem et le format des couleurs.
  4. Copiez le résultat ou envoyez-le vers un autre outil.

Quand c’est utile

  • Lire le CSS minifié d’un site ou d’une bibliothèque.
  • Mettre de l’ordre dans une feuille de style avant une revue de code.
  • Passer un design de px en rem d’un seul coup.

Confidentialité et limites

Vos données

Votre CSS est traité dans votre navigateur et n’est pas envoyé à un serveur — le site reçoit seulement un événement anonyme « outil ouvert », sans le contenu. Un résultat envoyé vers un autre outil reste 24 heures sur cet appareil dans « Activité récente ». Un lien « Partager » contient le CSS dans le lien lui-même : ne le partagez qu’avec des personnes de confiance.

Limites

  • L’outil traite du CSS pur ; SCSS, Less et les autres préprocesseurs ne sont pas pris en charge.
  • Une erreur bloque le résultat : corrigez l’endroit indiqué et la sortie réapparaît.

Questions fréquentes

Que fait le tri logique ?

Il range les propriétés dans un ordre fixe : positionnement d’abord, puis display, dimensions, marges et padding, ensuite typographie, puis couleurs, arrière-plans et bordures, et les animations en dernier. Les propriétés liées se retrouvent côte à côte.

Comment les px sont-ils convertis en rem ?

Chaque valeur en px est divisée par la taille de police de base — 16 par défaut, donc 24px devient 1.5rem. Changez la taille de base si votre police racine est différente.

Pourquoi ai-je une erreur au lieu du CSS formaté ?

L’outil a trouvé quelque chose qu’il ne peut pas lire sans risque — une accolade manquante, une déclaration sans deux-points ou une propriété sans valeur. Corriger à cet endroit donne un résultat juste plutôt qu’une supposition.