CSS Formatter & Minifier

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Formatter & Minifier

Ce formateur réindente une feuille de style selon la profondeur des accolades, ou la réduit au texte le plus court qui s'analyse encore.

How it works

Il repère les trois caractères qui portent la structure du CSS — { } et ; — en indentant d'un niveau par accolade ouvrante et en plaçant chaque déclaration sur sa propre ligne. La minification retire les commentaires et toutes les espaces facultatives : autour des accolades, des deux-points, des points-virgules et des virgules, ainsi que le dernier point-virgule avant une accolade fermante, puisque l'accolade termine de toute façon la déclaration. Rien n'est réordonné et aucune valeur n'est réécrite.

When to use it

  • Lire une feuille de style minifiée récupérée sur un site en production ou dans les outils de développement.
  • Nettoyer du CSS collé depuis un outil de design ou un générateur de code.
  • Obtenir un ordre de grandeur de la taille d'une feuille de style avant de mettre en place une étape de compilation.
  • Uniformiser un fichier modifié à la main avant de le committer.

Watch out for

  • Les deux modes suppriment les commentaires, y compris une bannière /*! ... */ que la licence d'une dépendance vous oblige à conserver.
  • Un point-virgule à l'intérieur d'une valeur casse l'embellisseur. url(data:image/svg+xml;base64,...) en contient un, si bien qu'un data URI intégré se voit couper par un saut de ligne en son milieu et que la règle cesse de fonctionner. La minification gère ce cas ; l'embellissement non.
  • La minification ne retire ici que les espaces. Un vrai minificateur fusionne aussi les règles dupliquées et raccourcit les valeurs (#ffffff en #fff), si bien que la taille mesurée ici n'est pas celle que produira votre outil de compilation.
  • Les sources de préprocesseur sont indentées d'après les seules accolades. L'imbrication SCSS aura l'air correcte, mais @mixin, & et les variables sont transmis sans examen.

Not the right tool for: La minification de production. cssnano ou Lightning CSS analysent la feuille de style et effectuent des transformations que celui-ci ne peut pas faire sans risque.

Frequently Asked Questions

De combien la minification réduit-elle la taille d'un fichier CSS ?

La minification retire typiquement de 10 à 30 % de la taille d'un fichier CSS, en supprimant les espaces, les commentaires et les points-virgules redondants. Combinée à une compression gzip côté serveur, la réduction réelle de la taille transférée peut atteindre 60 à 80 % par rapport à un CSS non compressé et non minifié.

Gère-t-il les propriétés personnalisées CSS (variables) ?

Oui — les variables CSS (--color-primary: #5C5BFE) sont conservées et formatées normalement. Le formateur n'évalue ni n'insère la valeur des variables ; il les traite comme des chaînes opaques.

Faut-il minifier le CSS en développement ?

Non — ne minifiez que pour les compilations de production. Un CSS minifié est illisible et rend le débogage très difficile. Laissez votre outil de compilation (Vite, webpack, esbuild) minifier automatiquement en production. Gardez la source formatée dans la gestion de versions.

How to Use CSS Formatter & Minifier

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.