Bonjour,
Tiens, bonne occasion reproduire ici ma réponse antérieure à une question similaire (le sujet ayant été rendu introuvable via la recherche par son auteur qui en a effacé le message initial):
Cela signifie simplement qu'
une CSS valide n'aura les effets escamptés que sur un document HTML lui-même valide.
Disons que la première étape du traitement d'une page Web par un navigateur est d'établir à partir du code HTML l'
arbre du document, c'est à dire la structure exacte de ses différents noeuds éléments, attributs, texte, commentaires... C'est à ce stade que le navigateur rectifie (à sa manière) certaines erreurs éventuelles dans le code HTML (éléments mal imbriqués par exemple).
Pour le rendu CSS, il partira de cet
arbre du document pour établir, en fonction des propriétés CSS, la
structure de formatage qui sera ensuite affichée, imprimée, lue... Cette structure est généralement très similaire à l'arbre du document, mais peut comporter des éléments supplémentaires (générés par des :first-letter, des :before, etc.) ou des éléments en moins (retirés par des display:none).
Pour obtenir un rendu CSS conforme à ce qui est prévu, il faut donc que l'
arbre du document soit lui-même conforme aux attentes de l'auteur : un code HTML comportant des erreurs pourra en effet entraîner un arbre différent des prévisions et au bout du compte un rendu inattendu.
Exemple:
- structure invalide en XHTML: <p style="color: red"><ul><li>foo</li></p> supposée donner un texte "foo" en rouge.
- arbre du document: l'erreur est rectifiée à la manière HTML et <p> est fermé avant <ul>
- application des styles: la propriété color:red ne s'applique finalement pas au texte "foo". Le webmestre est déçu
Un autre exemple que j'ai vu passer récemment: l'auteur avait utilisé certains caractères invalides du point de vue HTML dans ses valeurs d'attribut
id : les blocs de règle CSS visant ces
id étaient valides en CSS, mais n'étaient pas appliqués, faute d'avoir une cible dans l'
arbre du document.
Pour visualiser l'arbre du document, il existe des nombreux outils (extension web developper pour FF, barre d'outil "accessibilité" pour IE, menu webdevelopper pour Opera... ou encore le Live DOM viewer d'Hyxon).
En conclusion:
- cet avertissement rappelle qu'une CSS valide ne sert à rien si une erreur se produit en amont.
- comme tous les avertissements CSS, il ne signifie pas qu'une erreur est présente, mais simplement que le validateur CSS ne peut pas tout vérifier (ici, la validité HTML).
Modifié par Laurent Denis (31 Jul 2006 - 08:23)
