Est-il possible de vérifier quels styles CSS sont utilisés ou non sur une page Web?

Vous voulez savoir quels styles CSS sont actuellement utilisés sur une page Web.

Installez le module complémentaire Utilisation CSS pour Firebug et exécutez-le sur cette page. Il vous indiquera quels styles sont utilisés et non utilisés par cette page.

Google Chrome dispose de deux méthodes pour rechercher les fichiers CSS non utilisés .

1. Onglet Audit: > Clic droit + Inspecter l’élément sur la page, recherchez l’onglet “Audit” et exécutez l’audit, en vous assurant que l’option “Performances de la page Web” est cochée.

Répertorie tous les tags CSS non utilisés – voir image ci-dessous.

Capture d'écran de l'outil d'audit de Chrome

Update: – – – – – – – – – – – – – – OU – – – – – – – – – – – – – –

2. Onglet Couverture: > Clic droit + Inspecter l’élément sur la page, trouvez les trois points à l’extrême droite (encerclé dans l’image) et ouvrez le tiroir de la console (ou appuyez sur Échap), puis cliquez sur les trois points du côté gauche (entouré dans l’image) pour ouvrir l’outil Couverture.

Chrome a lancé un outil pour voir les CSS et JS non utilisés – Mise à jour de Chrome 59 Vous permet de démarrer et d’arrêter un enregistrement (carré rouge dans l’image) pour permettre une meilleure couverture de l’expérience utilisateur sur la page.

Affiche tous les fichiers CSS / JS utilisés et inutilisés dans les fichiers – voir l’image ci-dessous.

Exemple d'outil de couverture dans Chrome

Simplement pour être complet et parce qu’il a été demandé dans les commentaires – il y a aussi l’outil d’audit CSS dans Chrome pour le même objective. Quelques détails ici:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

J’utilise CSS Dig . Il est fait pour le chrome, mais je pense que c’est un excellent outil!

Jetez un oeil à UnCSS . Cela aide à créer un fichier CSS de CSS utilisé.