Chercheur de sélecteurs CSS inutilisés
Comparez une feuille de style avec une page HTML et listez les sélecteurs qui ne correspondent à rien.
Chercheur de sélecteurs CSS inutilisés
Collez une feuille de style d'un côté et le HTML qu'elle style de l'autre, et cet outil liste tous les sélecteurs qui ne correspondent à aucun élément de la page. C'est un moyen rapide de détecter les règles mortes laissées après une refonte, la suppression d'un composant, ou des mois de CSS copié-collé — le genre de surcharge qu'il est fastidieux de chercher à l'œil nu dans un fichier avec des centaines de règles.
"Ignorer les pseudo-classes et pseudo-éléments" compare une règle comme .button:hover en tant que simple .button, car une capture d'écran HTML statique ne peut pas montrer l'état hover ou focus ; laissez-le désactivé et l'outil vérifie ceux qu'il peut faire en toute sécurité — first-child, last-child, nth-child et not — par rapport à la position réelle de chaque élément. "Ignorer les sélecteurs correspondant" prend une expression régulière, ou un fragment de texte brut comme solution de secours, pour exclure les classes qu'un script bascule à l'exécution, comme tout ce qui commence par js- ou is-active, pour qu'elles ne soient jamais signalées comme mortes. "Afficher les classes/IDs HTML sans règle CSS" inverse la comparaison, utile pour détecter les fautes de frappe dans les noms de classe. "Inclure les sélecteurs à l'intérieur de @media" vérifie les règles de requête multimédia de la même manière que le reste de la feuille, ou les ignore quand c'est désactivé. Basculez la sortie vers "CSS nettoyé" pour obtenir la feuille de style avec chaque règle inutilisée supprimée.
La comparaison s'exécute par rapport à la structure HTML telle qu'écrite — le balisage injecté par un script après le chargement de la page n'est pas dans la capture d'écran collée, alors vérifiez avant de supprimer une règle. Les sélecteurs combinés par des virgules sont vérifiés individuellement, donc une règle couvrant deux classes à la fois n'est supprimée qu'une fois que les deux sont confirmées inutilisées.
Tout se passe dans votre navigateur : le CSS et le HTML que vous collez ne sont jamais chargés nulle part. Copiez le résultat, téléchargez-le en fichier .txt, ou renvoyez-le directement à l'entrée pour effectuer une autre passe.