Minifier du CSS en ligne

Allégez votre feuille de style en quelques secondes : les valeurs sont raccourcies et les règles simplifiées, sans changer le rendu.

Niveau de protection

Réglages détaillés

Traitement 100 % local, rien n’est envoyé

Comment ça marche ?

Le CSS est analysé par esbuild. Commentaires et espaces disparaissent, et les valeurs sont raccourcies sans changer le rendu : #ffffff devient #fff, 0px devient 0, margin: 0 0 0 0 devient margin:0, bold devient 700.

Les commentaires de licence (/*! … */) sont conservés par défaut. Une source map est disponible en option pour retrouver vos règles d’origine dans les outils du navigateur.

Exemples

Un bouton : 91 octets deviennent 50

margin: 0px 0px 0px 0px, color: #ffffff et rgba(0, 0, 0, 0.5) deviennent margin:0;color:#fff;background:#00000080 : 45 % de moins, même rendu.

Des titres : 76 octets deviennent 36

h1, h2 { font-weight: bold; padding: 10px 10px 10px 10px } avec son commentaire devient h1,h2{font-weight:700;padding:10px} : 53 % de moins.

Questions fréquentes

La minification change-t-elle le rendu de ma page ?
Non : seules des écritures équivalentes sont utilisées. Comparez malgré tout votre page avant et après la mise en ligne, surtout si vous utilisez des hacks pour d’anciens navigateurs.
À quoi sert une source map ?
Une source map (fichier .map) relie le code réduit à votre code d’origine. Les outils de développement du navigateur l’utilisent pour afficher vos noms de variables et vos numéros de ligne quand vous déboguez la version réduite. Publiez-la à côté du fichier réduit, ou gardez-la privée si vous ne voulez pas révéler la source : le code fonctionne sans.
Que font les quatre niveaux ?
« Lisible » ne réduit rien (TypeScript est seulement compilé, avec une source map). « Allégé » supprime commentaires, espaces et retours à la ligne. « Optimisé » renomme en plus les variables locales et simplifie la syntaxe. « Protégé » (JavaScript et TypeScript) ajoute l’encodage des chaînes et le masquage des propriétés. Chaque réglage reste modifiable dans « Réglages détaillés ».
Mon code est-il envoyé quelque part ?
Non. Le traitement se fait dans votre navigateur, dans un worker : votre code n’est ni envoyé, ni enregistré, et aucune requête n’est faite pendant la réduction. Seuls les moteurs sont téléchargés : esbuild (JavaScript, TypeScript, CSS) est servi par ce site, et l’interpréteur Python (environ 13 Mo, une seule fois) vient de jsDelivr, vérifié par une empreinte SHA-256 avant d’être utilisé.

Outils liés