28173 sujets
CSS et mise en forme, CSS3
Bonjour,
Cela signifie simplement qu'une CSS valide n'aura d'utilité 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 l'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: <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 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
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).
Cela signifie simplement qu'une CSS valide n'aura d'utilité 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 l'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: <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 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
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).
a écrit :
J'ai bien compris now ce que c'est qu'un arbrre grammaticale, mais si ton document xhtml est validé par le W3C, peux tu quand même avoir cette réponse lorsque tu valides ta feuille css ?
Mon xhtml est valide (cf signature), et ma CSS l'est egalement, et je n'ai pas le meme message que toi (tout du moins avec le style 'champetre' par defaut)
Pour voir la struture de tes pages avec l'extension webdeveloper, tu as notament: information -> plan du document
Ca te listera tes header (h1,h2, etc).
A+