Validateur CSS
La ligne, la propriété, la correction

Ce qu’un validateur CSS attrape

Un navigateur est indulgent avec le CSS, et c’est bien là le problème. Donc le navigateur laisse tomber en silence une règle qu’il ne sait pas lire, et la page paraît simplement fausse.

Ainsi, ce validateur CSS nomme ce que le navigateur écarterait. Chaque note porte un numéro de ligne, la propriété ou le sélecteur fautif, et la raison de l’arrêt de l’analyseur.

Il lit la feuille dans l’ordre. Il suit s’il se trouve dans une règle, une chaîne, un commentaire ou une règle @. Comme l’état décide du sens d’un caractère, une accolade dans un commentaire n’ouvre jamais de bloc.

Ce validateur CSS contrôle six familles d’erreurs. Deux cassent le fichier, et les quatre autres coûtent une déclaration sans rien casser.

Tout tourne dans cet onglet. Donc une feuille destinée à un site sous clause de confidentialité ne se distingue pas ici d’une feuille publique.

Comment un validateur CSS lit une feuille de style

Le lecteur parcourt le texte une fois. À chaque caractère, il sait dans lequel de cinq états il se trouve. Un sélecteur, un bloc, une valeur, une chaîne ou un commentaire.

Depuis cet état, il sait si une accolade ouvre un bloc. Il sait si deux-points lancent une valeur. Il sait aussi si un point-virgule termine une déclaration. La grammaire elle-même est courte. Le module de syntaxe CSS est l’endroit où le groupe de travail l’écrit.

Comme le parcours garde son état, une accolade égarée dans un commentaire ne change rien. Un lecteur qui compterait les caractères y verrait le début d’un bloc et décalerait chaque ligne suivante.

La reprise compte autant que la détection. Quand un navigateur rencontre une déclaration qu’il ne sait pas analyser, il saute au point-virgule suivant et continue. Donc une valeur fautive coûte une déclaration plutôt que le fichier.

Ainsi, une règle qui a perdu une déclaration peut rester des mois sur un site en ligne. La page continue de fonctionner, à une propriété près, et rien dans la console ne le dit.

Pourquoi les abandons silencieux valent la peine d’être trouvés

En effet, une faute de frappe dans un nom de propriété coûte peu et se remarque mal. Une lettre de trop et la déclaration disparaît.

Comme le reste de la règle s’applique encore, l’élément garde presque toute sa mise en forme. Donc la page paraît presque juste, et la partie manquante se laisse facilement imputer à autre chose.

Il en va de même pour une unité. Une longueur écrite sans unité est valide à quelques endroits et invalide presque partout. Donc le navigateur écarte une marge de dix plutôt que de dix pixels, et l’espace prévu n’apparaît jamais.

Donc un validateur transforme trois de ces cas en trois lignes de résultat. Voilà toute la valeur : le navigateur se tait et la page non.

Les six contrôles et ce que chacun signifie

Le premier contrôle est l’équilibre des accolades. Une ouvrante sans paire, ou une fermante sans ouvrante, reçoit une note. La note nomme la ligne où le compte a dérapé. C’est la seule erreur qui peut coûter tout le reste du fichier.

Le deuxième est un point-virgule manquant. Le navigateur lit alors la propriété suivante comme une partie de la valeur. Donc un seul signe oublié avale deux déclarations. La note nomme les deux lignes.

Le troisième est une propriété inconnue. Le lecteur signale tout ce qu’il ne reconnaît pas comme une faute probable. Il propose la correspondance la plus proche quand elle existe.

Le quatrième est une valeur que la propriété n’accepte pas. Ainsi, une couleur écrite comme un mot qui n’est pas un nom de couleur. Ou bien une longueur écrite en pourcentage sur une propriété qui n’en prend pas.

Le cinquième est une unité mal orthographiée. Une longueur sans unité. Une unité qui n’est pas reconnue. Et une unité sur une propriété qui attend un nombre simple.

Le sixième est un doublon. Le même sélecteur deux fois dans un bloc, ou la même propriété deux fois dans une règle. Comme la déclaration la plus tardive gagne, une ancienne valeur peut rester là, l’air sûr d’elle, sans rien faire.

Ce que valide ne veut pas dire

Un validateur répond à une question : le navigateur saura-t-il analyser ceci. Il ne peut pas dire si la règle était une bonne idée.

Donc une feuille peut passer tous les contrôles et rester fausse. Ainsi, une couleur peut échouer au contraste. Une largeur fixe peut casser sur un écran étroit. Une taille de police peut être en pixels au lieu d’une unité relative. Rien de tout cela n’est de la grammaire.

Il en va de même pour la prise en charge. Une propriété peut être parfaitement valide et ne rien faire, parce que le navigateur ne l’a pas implémentée. La validation n’en dit rien, et un résultat vert lu comme une promesse de compatibilité trompe.

C’est pourquoi cette page renvoie au vérificateur de contraste et au testeur de sélecteurs. Ces deux-là répondent aux questions qu’un validateur ne peut pas traiter.