Supprimer le CSS inutilisé en ligne

Supprimer le CSS inutilisé en ligne

Mis à jour le 29 septembre 2026 · Par Saman

PurgeCSS a popularisé l'idée : comparer une feuille de style avec le balisage qui l'utilise et supprimer toute règle qui ne correspond à rien. Cette page le fait dans votre navigateur. Elle ouvre l'outil de suppression du CSS inutilisé sur son onglet HTML + CSS, où vous collez la page et sa feuille de style, et rien ne quitte votre machine.

Ce qui est conservé

• Une règle dont au moins un sélecteur correspond à un élément du HTML.
• Un sélecteur avec un état ou un pseudo-élément, comme .btn:hover ou .icon::before, quand l'élément sans cette partie existe.
• Tout ce qui figure dans Toujours conserver : noms de classes, id avec ou sans #, et motifs entre barres obliques.
• Tout sélecteur que le navigateur ne sait pas analyser, plutôt qu'une supposition.
• @font-face toujours, et @keyframes tant qu'une règle conservée ou un style en ligne nomme encore l'animation.

Les classes que vous ne voyez pas

Le HTML que vous collez est un instantané. Les scripts ajoutent des classes pendant que la page tourne : un menu ouvert, une diapositive active, un en-tête collant, une erreur de validation. Leurs règles semblent inutilisées parce que l'instantané ne contient aucun élément portant ces classes. Mettez-les dans Toujours conserver. Frameworks et page builders partagent souvent un préfixe, si bien qu'un seul motif comme /^is-/ ou /^elementor-/ couvre toute une famille. Si vous pouvez plutôt enregistrer la page dans Chrome, la page Coverage JSON en CSS voit ce que le navigateur a réellement appliqué, y compris ces classes ajoutées à l'exécution.

Un exemple

Une landing page basée sur Bootstrap qui utilise une grille, une barre de navigation et deux styles de boutons charge malgré tout le framework entier. Collez la page et la feuille de style, ajoutez à Toujours conserver les classes que la barre de navigation bascule, comme show et collapsing, et la plus grande partie du framework disparaît. La liste Sélecteurs supprimés montre ce qui est parti : c'est l'endroit le plus rapide pour repérer une classe qui aurait dû rester.

En ligne ou dans un build

Pour une page ponctuelle, un template ou un e-mail, cette page est plus rapide que d'installer quoi que ce soit. Pour un site qui évolue, lancez PurgeCSS dans le build afin que le CSS soit nettoyé à nouveau à chaque modification du balisage : npx purgecss --css css/style.css --content index.html --output dist/css/. Dans les deux cas, testez la page à toutes les largeurs avant de remplacer la feuille de style d'origine.