Minifieur & Embellisseur CSS
Compresser le CSS pour la production ou l'embellir pour la lisibilité (100% côté client)
Documentation du Compresseur et Formateur CSS
Qu'est-ce que cet outil ?
La minification CSS supprime les caractères syntaxiquement inutiles des feuilles de style sans modifier leur comportement: espaces entre règles, sauts de ligne, commentaires CSS (/* ... */), points-virgules redondants avant les accolades fermantes. Le beautifier effectue l'opération inverse: reformatage avec indentation et sauts de ligne cohérents.
Fonctionnalités principales
- Suppression des espaces et commentaires: tous les espaces inter-règles, sauts de ligne et commentaires /* */ sont supprimés. Les littéraux de chaîne et les valeurs url() sont préservés. Les blocs /*! ... */ (licences) sont conservés si l'option est activée.
- Compaction sélecteurs et déclarations: fusion d'espaces multiples dans les sélecteurs, suppression du dernier point-virgule avant }, normalisation 0px→0, 0.5→.5.
- Indentation beautifier configurable: 2 espaces, 4 espaces ou tabulation; une règle par ligne; préservation de @media, @keyframes, structures imbriquées.
- Gestion CSS custom properties: les expressions var() et espaces dans calc() ne sont pas compactés (risque de rupture de parsing dans certains navigateurs).
- Affichage delta taille: octets d'origine, octets minifiés et pourcentage de compression affichés à côté du résultat.
Cas d'utilisation courants
- Pipeline de build production: intégration dans Webpack (css-minimizer-webpack-plugin), Vite (Lightning CSS intégré) ou Gulp (gulp-clean-css).
- Débogage CSS minifié tiers: beautification de Bootstrap 5 bootstrap.min.css ou sortie Tailwind pour inspecter la structure des règles.
- Nettoyage feuilles de style legacy: reformatage avant refactoring de CSS à indentation incohérente.
- Réduction payload CDN: livraison de CSS minifié pour réduire les octets transférés et améliorer le LCP; réduction typique de 20-50%.
Comment cet outil traite le CSS
Suppression des espaces
Supprime tous les espaces, sauts de ligne et tabulations inutiles. Les règles CSS sont condensées en une seule ligne sans affecter la fonctionnalité. Exemple : `.btn { color: red; }` devient `.btn{color:red;}`
Suppression des commentaires
Supprime tous les commentaires CSS (/* ... */) sauf si l'option 'Préserver les commentaires' est activée. Les commentaires de licence importants utilisant la syntaxe /*! ... */ sont généralement préservés par la plupart des minifieurs.
Suppression des caractères redondants
Élimine les points-virgules inutiles (dernière propriété d'une règle), les espaces autour des opérateurs et les zéros superflus (0.5 → .5). Raccourcit les codes de couleur (#ffffff → #fff).
Optimisation des propriétés
Supprime les espaces autour des accolades, des deux-points et des virgules. Exemple : `margin: 10px 20px;` devient `margin:10px 20px;`. Note : les espaces sont préservés dans calc() et autres fonctions où ils sont requis.
Impact sur la taille des fichiers
20-50% de réduction pour CSS écrit à la main. 5-15% pour les sorties de framework (Tailwind). 40-60% pour les fichiers très commentés. Gzip en supplément: 70-80% de réduction du transfert.
| Scénario | Original | Minifié | Réduction | Gzippé |
|---|---|---|---|---|
| CSS bien formaté avec commentaires | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (85-90% au total) |
| CSS déjà compact avec peu de commentaires | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (80-85% au total) |
| CSS de documentation fortement commenté | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (88-92% au total) |
Outils Connexes
Compresseur et Formateur HTML
Compressez ou formatez le code HTML, supprimez les espaces et commentaires pour optimiser la taille du fichier, ou formatez le code pour la lisibilité
Compresseur et Formateur JavaScript
Compressez ou formatez le code JavaScript, supprimez les espaces et commentaires pour optimiser la taille du fichier, ou formatez le code pour la lisibilité
Sélecteur de couleurs
Convertir les couleurs entre HEX, RGB, HSL, CMYK, YCbCr, Lab, générer des palettes de couleurs, vérifier le contraste WCAG
Générateur de palette
Générateur de palette de couleurs professionnel avec mélange de couleurs, création de dégradés, schémas de couleurs et export en CSS/SCSS/JSON
Convertisseur Image vers Base64
Convertir des images en encodage Base64, prend en charge PNG, JPG, GIF, SVG, WebP, générer Data URI et arrière-plans CSS
Vérificateur de Différences de Texte
Comparer les différences entre deux textes ou fichiers avec vue côte à côte surlignée