Détecter les classes utilisées dans HTML, qui ne sont pas décrites dans le fichier CSS

Version imprimable

17/11/2023, 13h45
foxbille

Détecter les classes utilisées dans HTML, qui ne sont pas décrites dans le fichier CSS

Bonjour à tous,
Tout est dans le titre.
Bon, je suis d'accord, c'est une question venant d'un type qui code parfois comme un goret.
soit je ne supprime pas les classes que j'ai utilisées dans le code HTML alors que je les ai supprimées du fichier CSS, soit je nettoie mal du code que j'ai récupéré sur une page en ligne (pour mon usage perso exclusivement).
Est-ce qu'il existe un outil qui contrôle la cohérence CSS/HTML ? puisqu'il semble que l'incohérence ne génère pas d'erreur.
Merci,
Eric

Salut foxbille,

Si j'ai bien compris, tu souhaites rechercher les balises qui comportent les attributs class et style et qui ne sont pas référencés par leur nom de class dans le fichier CSS.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <style>
        .div-1 {
            width: 500px;
            height: 50px;
            background-color: aqua;
        }
 
        .p2 {
            width: 150px;
            line-height: 25px;
        }
    </style>
</head>
 
<body>
    <div>
        <div class="div-1 div-1-1" style="color: red;"></div>
 
        <div class="div-2 div-2-2" style="width: 100px; height: 20px; background-color: black; color: white;">
            <p class="p-2" style="font-weight: bold;">Salut</p>
        </div>
    </div>
 
    <textarea class="textareaClass" id="mytextarea" cols="120" rows="20"
        style="background-color: antiquewhite; font-size: 1.2em;"></textarea>
 
    <script>
        function findElements() {
 
            let bodY = document.getElementsByTagName('body')[0],
                textareA = document.getElementById('mytextarea'),
                infos
 
            textareA.value = null
            textareA.readOnly = true;
 
            for (let balise of bodY.querySelectorAll('*')) {
                if (balise.classList.length && balise.style.cssText.length) {
                    infos = `Balise: ${balise.tagName}\nclass: ${balise.classList}\nStyle: ${balise.style.cssText}\n\n`
                    textareA.value += infos
                }
            }
        }
 
        findElements()
    </script>
 
</body>
 
</html>

18/11/2023, 15h56
foxbille

Bonjour,
Merci pour ta réponse.
C'est quelque chose comme ça, mais il faudrait explorer un fichier HTML et rechercher dans un fichier CSS toutes (et seulement) les classes qui n'y sont pas décrites. Et afficher un message d'erreur. Et, soyons gourmants, prévoir une option pour supprimer la classe du HTML
Je vais essayer de modifier ton script dans ce sens.
Dèja, Merci !
Eric
18/11/2023, 16h03
foxbille
je précise encore :
dans le fichier HTML
Code:

1 2 [...] <div class="div-1 div-1-1">
dans le fichier CSS
Code:

1 2 [...] .div-1 {}
=> pas de déclaration .div-1-1

résultat : "Erreur : class div-1-1 absente de CSS !"

Il faut ajouter la fonction au code que tu veux vérifier. (Le bout de code html que j'avais mis était seulement pour l'exemple)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
... 
Ici ton code
...
 
    // Ce script est à placer en bas de la balise body.
    // Une fois ton code chargé, la fonction parcourra tous les éléments et affichera dans la console ceux qui auront un nom de class et un attribut style.
 
    <script>
        function findElements() {
 
            let bodY = document.getElementsByTagName('body')[0], infos = ''
 
            for (let balise of bodY.querySelectorAll('*')) {
                if (balise.classList.length && balise.style.cssText.length) {
                    infos += `Balise: ${balise.tagName}\nclass: ${balise.classList}\nStyle: ${balise.style.cssText}\n\n`
                }
            }
            console.log(infos)
        }
 
        findElements()
    </script>
</body>

20/11/2023, 11h49
NoSmoking
Bonjour,

Citation:

Envoyé par foxbille

Est-ce qu'il existe un outil qui contrôle la cohérence CSS/HTML ?

oui il s'agit des navigateurs :mouarf:

Dans le cas de règles CSS non utilisées il existe pas mal d'outils, plus ou moins sophistiqués voire même dans les outils des navigateurs en tout cas Chrome. Le gain peut être énorme.

Dans l'autre sens, le gain sera de toute façon minime sauf à coder comme un « gros sagouin », je n'en connais pas de disponible.

Citation:

il faudrait explorer un fichier HTML et rechercher dans un fichier CSS toutes (et seulement) les classes qui n'y sont pas décrites.

Pour faire la corrélation entre les classes appliquées, ou non, aux éléments et les règles CSS présentes il te faut quoiqu'il arrive récupérer ces règles.

Donc dans le 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.

Exemple en ligne :

↪ Analyse des styleSheets
... si cela peut t'inspirer !
20/11/2023, 17h02
foxbille

Waouh, Merci beucoup, je vais regarder ça !
Eric