Minifier du CSS pour Accélérer votre Site
Supprimez les commentaires et espaces inutiles de votre CSS pour réduire sa taille instantanément.
Votre feuille reste sur votre appareil
Rien à supprimer ensuite
Sûr pour des interfaces non livrées
Fonctionne dans tout navigateur moderne
Comment ça marche
- 1
Collez votre CSS
Une feuille de styles, les styles d’un composant ou un bloc que vous voulez alléger.
- 2
Vérifiez les tailles
Comparez minifié et compressé, et lisez les avertissements avant de remplacer l’original.
- 3
Copiez la sortie
Emportez-la dans une sortie de build, un bloc `<style>` ou un gabarit.
Pourquoi cet outil
Ordre des déclarations préservé
Rien n’est réordonné, car la cascade tranche les égalités par la position et déplacer une règle change le rendu.
Solutions de repli intactes
Une propriété déclarée deux fois est généralement un repli volontaire pour navigateurs anciens, non un doublon à supprimer.
Aucune fusion de raccourci risquée
Replier des propriétés détaillées dans un raccourci réinitialise les côtés non mentionnés : cela n’est pas fait en silence.
Taille compressée affichée
Le chiffre minifié à côté du chiffre gzip, car seul le second correspond à ce que le navigateur télécharge.
Analysée là où elle appartient
Un navigateur est déjà un moteur CSS : aucune requête n’est nécessaire et le fichier reste dans la page.
Sans limite et sans inscription
Utilisez-le sur une seule règle ou sur le build d’un framework, aussi souvent que vous voulez.
L’ordre est du sens, ce qui limite ce qu’un minificateur peut faire sans danger
CSS tranche les déclarations concurrentes d’abord par spécificité, ensuite par ordre du document : à poids égal, celle écrite en dernier gagne. La position fait donc partie du sens d’une feuille de styles, et c’est pourquoi l’optimisation agressive est plus risquée ici que dans la plupart des langages. Un outil qui regroupe toutes les règles partageant un sélecteur, ou trie les déclarations pour mieux compresser, ou fusionne deux blocs déclarant par hasard les mêmes propriétés, peut produire un fichier plus petit octet pour octet et visuellement différent — parce qu’une règle qui venait en dernier n’y est plus. Les réductions toujours sûres sont celles qui ne déplacent rien : retirer les espaces, retirer les commentaires, et raccourcir les valeurs dont le sens est fixe. Tout ce qui réordonne exige de comprendre votre cascade entière, ce qu’un outil au niveau du texte ne fait pas.
La même propriété deux fois est généralement un repli, non une erreur
C’est le cas précis où « supprimer le doublon » casse une page. Déclarer deux fois une propriété dans le même bloc est la façon standard de prendre en charge d’anciens navigateurs : `color: #ccc` suivi de `color: rgba(0, 0, 0, .5)` signifie que le navigateur comprenant la seconde l’emploie et que celui qui ne la comprend pas retombe sur la première, car une déclaration inanalysable est écartée et non fatale. Le même motif couvre `display: -webkit-box` avant `display: flex`, une largeur en pixels avant une largeur en `calc()`, et une couleur unie avant un dégradé. Un minificateur qui voit deux déclarations d’une propriété et ne garde que la dernière a supprimé la prise en charge ; celui qui ne garde que la première a supprimé la fonctionnalité. Les deux ont tort, et le comportement correct est de laisser la paire tranquille.
Fusionner le détaillé en raccourci réinitialise ce que vous n’avez pas mentionné
C’est le piège de correction le plus subtil de l’optimisation CSS. Si une règle définit `margin-top` et `margin-left`, les replier dans une seule déclaration `margin` ne laisse pas les deux autres côtés en place : un raccourci définit toutes les propriétés de son groupe, donc les côtés non mentionnés sont réinitialisés à leurs valeurs initiales, écartant ce qui était hérité ou posé par une règle antérieure. `background` est pire, car il réinitialise une longue liste dont `background-size` et `background-position` : une fusion peut annuler en silence un `background-size: cover` déclaré ailleurs. `font` se comporte pareil avec `line-height`. Le gain de ces fusions est mince et la panne est une mise en page correcte dans le fichier et fausse dans le navigateur — raison pour laquelle cet outil ne les effectue pas.
Le gros gain, ce sont les règles inutilisées, et c’est plus dur qu’il n’y paraît
Minifier une feuille en rogne peut-être un cinquième. Retirer les règles qu’une page n’emploie jamais peut en rogner quatre-vingt-dix pour cent, car un framework généraliste livre des styles pour chaque composant et chaque variante alors qu’une page donnée en utilise une poignée. C’est là que se trouve la taille réelle — et le faire sans risque est réellement difficile, pour une raison propre au CSS. Un outil de purge parcourt vos gabarits et votre code à la recherche de noms de classes et conserve les règles correspondantes. Il ne voit pas un nom assemblé à l’exécution : `"btn-" + variant` ne ressemble à rien pour lui, et la règle de `btn-danger` est supprimée alors que le code qui en a besoin tourne toujours. Tout ce qui est construit dynamiquement, injecté par un composant tiers ou ajouté par JavaScript après le chargement doit être listé en exception, et cette liste fait de la purge un projet plutôt qu’un interrupteur.
Le CSS bloque le rendu, si bien que sa taille coûte autre chose
Pourquoi la taille compte n’est pas la même chose pour le CSS que pour les scripts. Un navigateur ne peindra pas un contenu qu’une feuille en attente pourrait restyler : une feuille dans l’en-tête bloque donc le rendu — jusqu’à son arrivée et son analyse, la page reste blanche. Le coût du poids du CSS retombe ainsi de plein fouet sur le premier affichage, la partie du chargement que les visiteurs remarquent le plus, et c’est l’argument le plus fort pour garder la feuille critique légère. Cela explique aussi pourquoi le conseil habituel est d’intégrer la petite quantité de CSS nécessaire à la zone visible et de charger le reste de façon asynchrone — un changement structurel bien plus efficace que la minification. Si vous ne pouvez faire qu’une chose, découper la feuille l’emporte sur la compresser.
Pourquoi minifier en local compte pour ce type de fichier
Une feuille de styles est moins évidemment confidentielle que du code applicatif et décrit pourtant plus qu’on ne le remarque. Les noms de classes cartographient votre interface : ils nomment des composants non encore livrés, des variantes appartenant à une expérience en cours, des panneaux réservés aux administrateurs et des fonctionnalités derrière un indicateur. Les commentaires en CSS sont francs comme ne le sont pas ceux d’ailleurs — un nom de client, une note sur le navigateur qui a cassé, un rappel qu’une valeur contourne un bogue d’une version précise. Coller une feuille de production dans un minificateur hébergé livre tout cela contre une réduction de taille disponible en local. Cet outil traite le fichier dans la page et ne transmet rien, ce que vous pouvez vérifier dans l’onglet Réseau des outils de développement.
Erreurs courantes à éviter
- Retirer une propriété déclarée deux fois dans un bloc. C’est presque toujours un repli volontaire pour anciens navigateurs — n’en garder qu’une supprime soit la prise en charge, soit la fonctionnalité.
- Fusionner des propriétés détaillées en un raccourci. Un raccourci définit toutes les propriétés de son groupe : les côtés non mentionnés sont réinitialisés à leurs valeurs initiales.
- Laisser un outil réordonner ou regrouper des règles pour mieux compresser. La cascade tranche par ordre du document : un fichier plus petit peut s’afficher différemment.
- Attendre de la minification qu’elle règle la taille de la feuille. Les règles inutilisées en constituent l’essentiel ; la minification rogne un cinquième de ce que rognerait une passe de CSS inutilisé.
- Purger le CSS inutilisé sans lister les noms de classes dynamiques. Un nom assemblé en `"btn-" + variant` est invisible pour un scanner : sa règle disparaît alors que le code tourne encore.
Comparaison
| Critère | Cet outil | Minificateurs en ligne | Une chaîne de build |
|---|---|---|---|
| Feuille envoyée à un serveur | Jamais | Le plus souvent | Non |
| Préserve l’ordre des déclarations | Toujours | Le plus souvent | Le plus souvent |
| Conserve les replis navigateur | Oui | Variable | Configurable |
| Retire les règles inutilisées | Non | Non | Avec une étape de purge |
| Taille compressée affichée | Oui | Rarement | Avec un greffon |
| Prix | Gratuit | Gratuit / offres payantes | Gratuit |
Fonctionnalités
Suppression des espaces et commentaires
Tout ce que l’analyseur ignore est retiré, y compris les lignes vides qui regroupent vos règles.
Raccourcissement sûr des valeurs
Couleurs réduites à leur forme équivalente la plus courte et unités nulles rognées, là où le sens ne peut changer.
Sûr pour l’ordre par conception
Les règles conservent leur position : spécificité et ordre source continuent de se résoudre à l’identique.
Les deux tailles rapportées
Brute et compressée, puisque la compression réduit déjà l’essentiel de ce que retire la minification.
Syntaxe moderne comprise
Propriétés personnalisées, imbrication, requêtes de conteneur et couches passent sans être abîmées.
Supporte les grandes feuilles
Le build d’un framework entier se minifie sans envoi ni plafond de taille.
Rien à installer
Pas d’outil de build, pas d’environnement d’exécution, pas de dépendances : tout se passe sur la page web.
Compatible arabe et RTL
Interface complète en huit langues, dont l’arabe de droite à gauche.
Sécurisé par défaut
Servi en HTTPS, sans suivi du contenu ni envoi à un tiers.
Qui l’utilise
Développeurs front-end
Alléger une feuille de styles qui ne passe pas par une étape de build.
Ingénieurs performance web
Réduire la feuille bloquant le rendu qui conditionne le premier affichage.
Développeurs e-mail
Compacter des styles à intégrer dans un gabarit soumis à une limite de taille.
Qui intègre un bloc de styles
Rendre les styles d’un composant assez légers pour l’en-tête d’une page.
Questions Fréquentes
Non. Tout s’exécute localement dans votre navigateur — votre texte n’est jamais envoyé, stocké ni partagé.
Oui — entièrement gratuit, sans compte et sans limite.