Analyse des styleSheets
Analyse des règles CSS déclarées dans la page en utilisant la propriété styleSheets de l'objet document.
Un titre de section
Juste du texte dans un paragraphe
Un paragraphe d'informations
Principe
On parcourt les document.styleSheets présentes dans le document, pour chaque règles de celles-ci, on regarde si il existe au moins un élément accessible via le sélecteur de la règle (cssRule.selectorText), on utilise pour ce faire la méthode querySelector(cssRule.selectorText).
Si l'on trouve un élément alors on stocke le sélecteur dans un array.
Ensuite on récupère tous les éléments ayant une classe CSS déclarée en utilisant la méthode document.querySelectorAll("[class]"), il ne nous reste plus qu'à tester que pour chaque élément la ou les classes qu'il possède sont dans le tableau de récupération des sélecteurs.
Voilà pour le principe de base.
Résultat analyse de la page
Règles CSS utilisées
Règles CSS non utilisées
Liste des sélecteurs utilisés
Éléments corrigés
Règles @
Remarques
Les feuilles de styles doivent appartenir au même domaine pour pouvoir être analysés.
Les sélecteurs non valides ne sont pas pris en compte.
Les règles @, @import, @media ..., ne sont pas prises en compte.
Les pseudo-éléments, tout comme certaines pseudo-classes, ne sont pas pris en compte.
Les règles relatives aux éléments ajoutés dynamiquement au document sont considérées comme inutilisées.
La mise en place de classe CSS sur des éléments peut également servir à cibler ces éléments en JavaScript.