Développement Web
CSS Minify / Beautify
Compresser le CSS pour la production ou formater du CSS minifié dans un format lisible.
Trop volumineux pour l'aperçu
Trop volumineux pour l'aperçu
Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.
How to use it
- Minify: paste CSS and the tool strips unnecessary whitespace, comments, and line breaks while keeping behavior identical.
- Beautify: paste minified CSS with no indentation to get a readable version back, with indentation and line breaks.
- Handy for quickly reading CSS from a third-party site that only ships a minified version.
Common uses
- Minifying CSS for production when there's no build tool (Vite, Webpack) set up, or for a quick one-off minification.
- Beautifying minified CSS from a third-party library to read or debug it.
- Estimating how much a CSS file will shrink before setting up an automated build.
Things to keep in mind
Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.
Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.
Article sur cet outil: Minification CSS : ce qui est vraiment supprimé du fichier, et pourquoi
Questions fréquentes
Qu'est-ce que la minification supprime exactement de mon CSS ?
Minify supprime les espaces, les sauts de ligne et les commentaires et raccourcit certaines valeurs, réduisant la taille du fichier sans changer le comportement du CSS.
Beautify peut-il restaurer parfaitement mon formatage d'origine ?
Beautify reformate le CSS minifié avec indentation et sauts de ligne pour la lisibilité, mais ne peut pas récupérer les commentaires ni vos choix de style d'origine, puisqu'ils ont déjà été supprimés lors de la minification.
La minification est-elle sûre pour tout CSS valide ?
Oui — pour un CSS syntaxiquement valide, la minification ne fait que supprimer les caractères redondants et ne change jamais les sélecteurs ou valeurs de propriétés, et tout se passe localement dans votre navigateur.
Ai-je encore besoin de la minification si le serveur compresse déjà les fichiers avec Gzip ?
Oui — la minification et la compression Gzip/Brotli se complètent : la minification réduit le fichier source lui-même avant la compression, et Gzip/Brotli compresse davantage le résultat pendant le transfert, si bien que les deux ensemble produisent une taille finale plus petite que chaque technique isolée.
Qu'est-ce qu'une source map pour du CSS minifié ?
Une source map est un fichier séparé qui associe les lignes du CSS minifié au code d'origine formaté, permettant aux outils de développement du navigateur d'afficher les bons numéros de ligne et noms de fichiers pendant le débogage, même quand c'est la version minifiée qui est réellement déployée en production.