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

**foxbille** · 17/11/2023, 14h45

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

**ASCIIDEFOND** · 17/11/2023, 19h55

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**foxbille** · 18/11/2023, 16h56

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

**foxbille** · 18/11/2023, 17h03

je précise encore :
dans le fichier HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
[...]
<div class="div-1 div-1-1">

dans le fichier CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
[...]
.div-1 {}

=> pas de déclaration .div-1-1

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

**ASCIIDEFOND** · 18/11/2023, 20h41

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 20/11/2023, 12h49

Bonjour,

Envoyé par foxbille

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

oui il s'agit des navigateurs

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.

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.