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 ?
Cet outil vous permet de compresser (minifier) ou de formater le code CSS. La minification supprime les espaces inutiles, les commentaires et les caractères redondants pour réduire la taille du fichier pour le déploiement en production. Le formatage formate le CSS avec une indentation appropriée et des sauts de ligne pour une meilleure lisibilité pendant le développement.
Fonctionnalités principales
- Minifier CSS - Supprimer les espaces, les sauts de ligne et les commentaires pour réduire la taille du fichier
- Formater CSS - Formater le CSS avec une indentation appropriée et des sauts de ligne pour la lisibilité
- Taille d'indentation personnalisable (2 espaces, 4 espaces ou tabulations)
- Option pour conserver les commentaires lors de la minification
- Comparaison de taille de fichier montrant le taux de compression
Cas d'utilisation courants
- Optimiser les fichiers CSS pour le déploiement en production afin de réduire le temps de chargement des pages
- Formater le CSS minifié ou compressé pour faciliter le débogage et la révision du code
- Nettoyer le code CSS avec un formatage incohérent
- Réduire l'utilisation de la bande passante en servant du CSS minifié aux utilisateurs
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
La minification CSS atteint généralement une réduction de 20-50% de la taille du fichier selon le formatage et la densité de commentaires du code original. Combinée avec la compression Gzip côté serveur, la réduction totale peut dépasser 80%.
| 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