Bonjour,
Après plusieurs heures passées à essayer de rendre un code, utilisant la propriété CSS min-height, compatible avec l'ensemble des navigateurs, je suis tombé sur les articles d'Alsa (Blog et FAQ) traitant du sujet.
Cependant, j'ai opté pour une autre solution, qui peut-être pourrait être ajoutée à la FAQ.
Elle consiste à utiliser un tableau de une cellule. Tout simplement.
Ainsi, le code créé un "bloc" pour lequel on peut spécifier une hauteur. Et si le contenu est important, alors la cellule s'étirera, comme le ferait un bloc associé à la propriété min-height.
Etant adepte des CSS, de la sémantique, de l'accessibilité... ce choix peut paraître étrange.
Ma raison est simple. Je n'utilise jamais (ou très rarement) de hack. Je ne le souhaite pas, car je trouve que cela compromet la pérennité d'un site.
Pourquoi vouloir à tout prix se passer de tableau, lorsque celui-ci, qui existe depuis les débuts du html, répond parfaitement à la problématique, sur tous les navigateurs ? La solution paraît plus "solide", et l'accessibilité n'est absolument pas remise en cause.
A priori, le seul inconvénient de ma solution, c'est que j'insère un <table> pouvant apparaître comme facultatif, et limite la séparation fond/forme. On peut également noter une faute de sémantique. Soit. Mais je préfère ici faire un tout petit écart, sans conséquence autre qu'intellectuelle, au bénéfice d'un pragmatisme aux conséquences plus bénéfiques.
Parce que tout d'abord, mon tableau d'une seule cellule s'adapte à la taille des écrans de la même manière que le ferait un bloc <div>, car ses propriétés sont écrites dans le fichier CSS et non dans le code de la page. Aucune information de mise en forme n'intervient vraiment dans le code html.
Un tableau d'une cellule est finalement équivalent à un bloc, et il n'agit que très peu sur la forme. Je peux très bien, via les CSS, le placer ailleurs dans la page.
Et pour revenir au cas précis du min-height, cette solution est plus robuste, et de mon point de vue, plus propre que l'emploi de hack, ou l'emploi de <div> imbriqués, comme j'ai pu le voir proposé sur certains sites.
D'ailleurs, une solution vue consiste précisément à utiliser un display:table-cell, mais c'était lourd et cette propriété CSS n'est pas comprise par tous les navigateurs. Autant donc insérer directement un tableau dans le code html.
Je précise que je n'utilise habituellement jamais de tableaux, sauf pour formater des données tabulaires, précisément. Je ne dis pas, ici, qu'il faut utiliser des tableaux.
Je préfère utiliser les propriétés CSS au fur et à mesure de leur -bonne- implémentation dans les navigateurs, et dans certains cas, utiliser les "anciennes" méthodes, bien plus sûres à mon avis puisque éprouvées depuis longtemps. Surtout lorsque ces anciennes méthodes ne produisent aucun obstacle à l'accessibilité d'un site.
Alors, à ajouter dans la FAQ ou pas ?
Modifié par Francois-Pierre (04 Jun 2006 - 23:40)
Après plusieurs heures passées à essayer de rendre un code, utilisant la propriété CSS min-height, compatible avec l'ensemble des navigateurs, je suis tombé sur les articles d'Alsa (Blog et FAQ) traitant du sujet.
Cependant, j'ai opté pour une autre solution, qui peut-être pourrait être ajoutée à la FAQ.
Elle consiste à utiliser un tableau de une cellule. Tout simplement.
Ainsi, le code créé un "bloc" pour lequel on peut spécifier une hauteur. Et si le contenu est important, alors la cellule s'étirera, comme le ferait un bloc associé à la propriété min-height.
Etant adepte des CSS, de la sémantique, de l'accessibilité... ce choix peut paraître étrange.
Ma raison est simple. Je n'utilise jamais (ou très rarement) de hack. Je ne le souhaite pas, car je trouve que cela compromet la pérennité d'un site.
Pourquoi vouloir à tout prix se passer de tableau, lorsque celui-ci, qui existe depuis les débuts du html, répond parfaitement à la problématique, sur tous les navigateurs ? La solution paraît plus "solide", et l'accessibilité n'est absolument pas remise en cause.
A priori, le seul inconvénient de ma solution, c'est que j'insère un <table> pouvant apparaître comme facultatif, et limite la séparation fond/forme. On peut également noter une faute de sémantique. Soit. Mais je préfère ici faire un tout petit écart, sans conséquence autre qu'intellectuelle, au bénéfice d'un pragmatisme aux conséquences plus bénéfiques.
Parce que tout d'abord, mon tableau d'une seule cellule s'adapte à la taille des écrans de la même manière que le ferait un bloc <div>, car ses propriétés sont écrites dans le fichier CSS et non dans le code de la page. Aucune information de mise en forme n'intervient vraiment dans le code html.
Un tableau d'une cellule est finalement équivalent à un bloc, et il n'agit que très peu sur la forme. Je peux très bien, via les CSS, le placer ailleurs dans la page.
Et pour revenir au cas précis du min-height, cette solution est plus robuste, et de mon point de vue, plus propre que l'emploi de hack, ou l'emploi de <div> imbriqués, comme j'ai pu le voir proposé sur certains sites.
D'ailleurs, une solution vue consiste précisément à utiliser un display:table-cell, mais c'était lourd et cette propriété CSS n'est pas comprise par tous les navigateurs. Autant donc insérer directement un tableau dans le code html.
Je précise que je n'utilise habituellement jamais de tableaux, sauf pour formater des données tabulaires, précisément. Je ne dis pas, ici, qu'il faut utiliser des tableaux.
Je préfère utiliser les propriétés CSS au fur et à mesure de leur -bonne- implémentation dans les navigateurs, et dans certains cas, utiliser les "anciennes" méthodes, bien plus sûres à mon avis puisque éprouvées depuis longtemps. Surtout lorsque ces anciennes méthodes ne produisent aucun obstacle à l'accessibilité d'un site.
Alors, à ajouter dans la FAQ ou pas ?
Modifié par Francois-Pierre (04 Jun 2006 - 23:40)
, et qui montrait que des sites d'associations pour malvoyants utilisaient des tableaux pour la mise en page !