FAQ version Beta 0.5
Questions sur la validation, les standards, etc.
Qu'est-ce que le HasLayout, et comment l'utiliser?
Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows.
Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne.
Malheureusement, ce mécanisme est lié à de nombreux bugs de rendu d'Internet Explorer.
CONCRÈTEMENT, COMMENT ÇA MARCHE?
Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article «On Having Layout» figurant dans la liste des liens complémentaires. En voici une traduction française:
http://test.blog-and-blues.org/haslayout/trad_temp.html
On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le "layout", soit il ne l'a pas. Et suivant le cas, l'élément en question ne réagira pas de la même manière. Dans certains contextes, un élément ne s'affichera correctement que s'il a le "layout". Dans d'autres, il faudra éviter qu'il l'ait sous peine de voir se déclencher un bug de rendu!
Mais qui a le "layout"? Par défaut, la grande majorité des éléments HTML n'ont pas le "layout". Un élément obtient le "layout" lorsque l'on lui affecte certaines propriétés CSS. Les plus courantes sont les propriétés CSS width (avec toute valeur autre que "auto") et height (avec toute valeur autre que "auto"). Pour une liste plus exhaustive, consultez le lien donné précédemment.
UN EXEMPLE RAPIDE DE DIFFÉRENCE DE RENDU LIÉE AU HASLAYOUT
Par défaut, les éléments flottants «dépassent» de leurs blocs parents. Prenons le code suivant:
<p style="border: solid 2px red;">
Ce paragraphe n'a pas le "layout". Le flottant dépasse (comportement normal).
<span style="float: left; height: 100px; background: blue;">Un élément flottant</span>
</p>
Nous ajoutons une propriété width avec la valeur 100% au paragraphe qui contient le flottant:
<p style="width: 100%; border: solid 2px red;">
Ce paragraphe a le "layout". Le flottant est englobé (comportement non standard).
<span style="float: left; height: 100px; background: blue;">Un élément flottant</span>
</p>
On pourrait multiplier les exemples, mais d'autres le font déjà très bien:
http://test.blog-and-blues.org/haslayout/
UTILISER LE HASLAYOUT POUR RÉSOUDRE UN PROBLÈME DE RENDU
Comme évoqué précédemment, deux cas de figure co-existent:
1. Le HasLayout crée ou déclenche un problème de rendu, qui affecte soit l'élément qui a le "layout", soit les enfants de cet élément. Pour corriger le bug de rendu, on pourra supprimer les propriétés qui confèrent le "layout" à cet élément.
2. À l'inverse, on pourra utiliser le "layout" volontairement pour corriger un bug de rendu, ou pour obtenir un comportement précis de la part d'un élément.
On pourra utiliser les méthodes suivantes:
1. Appliquer un zoom:1 à l'élément de type bloc qui doit avoir le "layout" (note: la propriété CSS non standard "zoom" est apparue dans Internet Explorer 5.5).
2. Si le correctif doit prendre en compte Internet Explorer 5.01, on pourra utiliser une propriété de dimension avec toute autre valeur que "auto". Par exemple, un width:100% ou un height:1% (note: en mode Standard, le height: 1% sera ignoré tant que l'élément parent n'aura pas lui-même une hauteur déterminée, par exemple une hauteur en pixels).
Enfin, on utilisera de préférence un commentaire conditionnel pour n'appliquer ces propriétés qu'à Internet Explorer. Surtout que certains de ces correctifs à base de HasLayout ne visent que les versions 5 et 6 d'Internet Explorer (de nombreux bugs étant corrigés dans la version 7, et ne demandant donc plus de correctif). Au sujet des commentaires conditionnels, on pourra lire:
http://forum.alsacreations.com/faq/faq-53-Qu039est-ce-que-les-commentaires-conditionnels-.html
On récapitule: zoom:1, width:100%, height:1%. Et commentaires conditionnels dès que possible. Voilà, vous devriez être parés. :)
Mais pour être vraiment exact, on aura intérêt à lire (et relire) les ressources suivantes:
Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne.
Malheureusement, ce mécanisme est lié à de nombreux bugs de rendu d'Internet Explorer.
CONCRÈTEMENT, COMMENT ÇA MARCHE?
Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article «On Having Layout» figurant dans la liste des liens complémentaires. En voici une traduction française:
http://test.blog-and-blues.org/haslayout/trad_temp.html
On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le "layout", soit il ne l'a pas. Et suivant le cas, l'élément en question ne réagira pas de la même manière. Dans certains contextes, un élément ne s'affichera correctement que s'il a le "layout". Dans d'autres, il faudra éviter qu'il l'ait sous peine de voir se déclencher un bug de rendu!
Mais qui a le "layout"? Par défaut, la grande majorité des éléments HTML n'ont pas le "layout". Un élément obtient le "layout" lorsque l'on lui affecte certaines propriétés CSS. Les plus courantes sont les propriétés CSS width (avec toute valeur autre que "auto") et height (avec toute valeur autre que "auto"). Pour une liste plus exhaustive, consultez le lien donné précédemment.
UN EXEMPLE RAPIDE DE DIFFÉRENCE DE RENDU LIÉE AU HASLAYOUT
Par défaut, les éléments flottants «dépassent» de leurs blocs parents. Prenons le code suivant:
<p style="border: solid 2px red;">
Ce paragraphe n'a pas le "layout". Le flottant dépasse (comportement normal).
<span style="float: left; height: 100px; background: blue;">Un élément flottant</span>
</p>
Nous ajoutons une propriété width avec la valeur 100% au paragraphe qui contient le flottant:
<p style="width: 100%; border: solid 2px red;">
Ce paragraphe a le "layout". Le flottant est englobé (comportement non standard).
<span style="float: left; height: 100px; background: blue;">Un élément flottant</span>
</p>
On pourrait multiplier les exemples, mais d'autres le font déjà très bien:
http://test.blog-and-blues.org/haslayout/
UTILISER LE HASLAYOUT POUR RÉSOUDRE UN PROBLÈME DE RENDU
Comme évoqué précédemment, deux cas de figure co-existent:
1. Le HasLayout crée ou déclenche un problème de rendu, qui affecte soit l'élément qui a le "layout", soit les enfants de cet élément. Pour corriger le bug de rendu, on pourra supprimer les propriétés qui confèrent le "layout" à cet élément.
2. À l'inverse, on pourra utiliser le "layout" volontairement pour corriger un bug de rendu, ou pour obtenir un comportement précis de la part d'un élément.
On pourra utiliser les méthodes suivantes:
1. Appliquer un zoom:1 à l'élément de type bloc qui doit avoir le "layout" (note: la propriété CSS non standard "zoom" est apparue dans Internet Explorer 5.5).
2. Si le correctif doit prendre en compte Internet Explorer 5.01, on pourra utiliser une propriété de dimension avec toute autre valeur que "auto". Par exemple, un width:100% ou un height:1% (note: en mode Standard, le height: 1% sera ignoré tant que l'élément parent n'aura pas lui-même une hauteur déterminée, par exemple une hauteur en pixels).
Enfin, on utilisera de préférence un commentaire conditionnel pour n'appliquer ces propriétés qu'à Internet Explorer. Surtout que certains de ces correctifs à base de HasLayout ne visent que les versions 5 et 6 d'Internet Explorer (de nombreux bugs étant corrigés dans la version 7, et ne demandant donc plus de correctif). Au sujet des commentaires conditionnels, on pourra lire:
http://forum.alsacreations.com/faq/faq-53-Qu039est-ce-que-les-commentaires-conditionnels-.html
On récapitule: zoom:1, width:100%, height:1%. Et commentaires conditionnels dès que possible. Voilà, vous devriez être parés. :)
Mais pour être vraiment exact, on aura intérêt à lire (et relire) les ressources suivantes:
Liens complémentaires