Outils · CSS · Minificateur et formateur CSS
Minificateur et formateur CSS
Minifiez ou mettez en forme du CSS, en direct pendant que vous collez, entièrement dans votre navigateur.
Ajoutez un fichier et lancez l’outil.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Réglages
Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.
Comment ça marche
Collez votre CSS, ou partez de l'exemple déjà présent dans la zone de texte.
Choisissez Minifier ou Mettre en forme, et une taille d'indentation pour la mise en forme.
Copiez le résultat.
Questions fréquentes
Non. La minification et la mise en forme s'exécutent toutes deux entièrement dans votre navigateur.
Non. C'est un vrai tokenizer, pas une regex qui supprime les espaces - il suit les limites des commentaires, des chaînes et des url(), et copie leur contenu tel quel, espaces compris. content: "a b" et url("x?a=1 b=2") ressortent exactement comme vous les avez tapés.
Affiché en direct sous forme de pourcentage réel, calculé à partir de la taille réelle en octets de votre entrée et de votre sortie - pas une promesse fixe. Cela dépend de la quantité d'espaces et du nombre de commentaires dans l'original.
L'outil produit quand même un résultat au mieux, avec une note claire indiquant que les accolades semblaient déséquilibrées - il ne lève pas d'erreur et ne refuse pas de fonctionner.
Guides
Un aperçu plus précis de problèmes concrets que résout cet outil.
Why Minify CSS, and Why a Whitespace Regex Is the Wrong Way to Do It
Minifying CSS removes bytes a browser has to wait for before it paints anything. Doing it with a find-and-replace on whitespace is how valid CSS turns into a stylesheet the browser silently ignores.
Lire le guideHow to Minify CSS Without Breaking It
Paste a stylesheet, keep the mode on Minify, and copy the result. This walks through what the tool removes, the two options that keep things, and how to read the byte counts it shows.
Lire le guideHow to Beautify Minified CSS So You Can Debug It
A production stylesheet is one long line. Beautify mode turns it back into one declaration per line so you can find the rule that is overriding yours. It cannot bring back comments that were already removed.
Lire le guide
Commentaires