28172 sujets

CSS et mise en forme, CSS3

[Résolu] Colonnes : votre avis sur une approche tordue...

Bonjour,

Pas de souci à régler, juste besoin de vos avis !

J'ai essayé de trouver une méthode alternative à l'utilisation des flottants pour réaliser des colonnes. J'utilise la propriété "table-cell" sur des "div" pour tous les navigateurs mais pour IE les commentaires conditionnels "remplacent" les "div" par un bon vieux "table".

Je voudrais avoir vos avis sur cette approche, que je n'ai jamais vue sur aucun site web traitant du sujet. Elle me paraît avoir l'avantage d'avoir une seule feuille de style, d'être sémantiquement correcte ailleurs que sur IE, et d'avoir en toute circonstance le comportement des tableaux. Par contre au niveau du code ça fait pas très pro...

Voici le code complet de mes colonnes (il passe la validation w3c) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>Layout</title>
  <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />

<style type="text/css">

#ca {
  display: table;
  width: 780px;
  margin: 0 auto;
}

#ca table {
  border-collapse: collapse;
}

#ca-left {
  display: table-cell;
  vertical-align: top;
  width: 200px;
  background: #AB82FF;
}

#ca-right {
  display: table-cell;
  vertical-align: top;
  width: 580px;
  background: #ADFF2F;
}

</style>

</head>
<body>

<div id="ca">
<!--[if !IE]><--><div id="ca-left"><!--><![ endif]--><!--[if IE]><table><tr><td id="ca-left"><![ endif]-->
blabla<br />blabla<br />blabla
<!--[if !IE]><--></div><div id="ca-right"><!--><![ endif]--><!--[if IE]></td><td id="ca-right"><![ endif]-->
blabla<br />blabla<br />blabla<br />blabla<br />blabla
<!--[if !IE]><--></div><!--><![ endif]--><!--[if IE]></tr></table><![ endif]-->
</div>

</body>
</html>


Merci d'avance pour vos réponses,

Fabien
Modifié par fabioushka (27 Jun 2009 - 14:09)
Bonjour,

Quel est ton problème avec les flottants ?

Tu as l'air de les qualifier d'anti-sémantique alors qu'ils n'interviennent pas à ce niveau. La solution de colonnes factices utilisant des flottant est très bonne, tout à fait logique et particulièrement stable (quand bien implémentée).

Ta solution est lourde et produit un code pas du tout sémantique pour IE (un tableau de présentation, contenant des données non tabulaires, n'étant pas sémantique).

Accessoirement il est possible de combiner les table-cell avec des colonnes factices, sans changer le HTML.
fabioushka a écrit :
J'utilise la propriété "table-cell" sur des "div" pour tous les navigateurs mais pour IE les commentaires conditionnels "remplacent" les "div" par un bon vieux "table".

Auquel cas ta structure HTML n'est pas simplifiée ou plus souple qu'en utilisant directement un tableau de mise en forme. Donc il n'y a aucun gain, mais une complexification: il faut gérer un balisage HTML largement plus complexe qu'avec simplement un tableau de mise en page.

Conclusion: vu que tu utilises un tableau de mise en page pour IE 6-7, eh bien assume et ne double pas par des DIV dans le but d'utiliser du display:table-cell dans les autres navigateurs.

Informations en sus:
- Un tableau de mise en page peut être tout à fait accessible. Ceux qui proscrivent les tableaux de mise en page par souci d'accessibilité sont dans l'erreur.
- Les tableaux de mise en page sont globalement déconseillés car en abuser produit une soupe de balise difficilement maintenable, et aussi parce que leur utilisation à outrance est associée aux éditeurs WYSIWYG et à leurs utilisateurs parfois peu compétents. Une utilisation plus raisonnable et maitrisée des tableaux de mise en page ne présente pas ces inconvénients, et ne peut donc pas être proscrite sur cette base.
- Enfin les tableaux de mise en page peuvent être déconseillés car ils obligent à gérer un aspect de la mise en page (en partie) dans le code HTML, et à modifier le code HTML si on décide de revoir la mise en page. Notons qu'on retrouve le même problème avec des DIV dans de nombreux cas, c'est juste un peu plus sensible avec un tableau.
- Le comportement des éléments de tableaux (qu'il soit obtenu en utilisant ces éléments ou en passant par du display: table[-*]) peut être problématique dans certains cas. Notamment sur la gestion de la largeur des conteneurs et des débordements de contenus. Ce n'est pas rédhibitoire, mais c'est à garder à l'esprit.

fabioushka a écrit :
Je voudrais avoir vos avis sur cette approche

Inutilement complexe. Aucun intérêt concret. Et techniquement erroné car tu appliques ton code HTML «alternatif» à toutes les versions d'IE alors qu'IE8 (en passe de rattraper IE6 en parts de marché, si ça n'est pas déjà fait) implémente très bien display:table-cell.
Laurie-Anne a écrit :
un tableau de présentation, contenant des données non tabulaires, n'étant pas sémantique

Bullshit.

Les tableaux de présentation sont, concrètement, aussi neutres que des éléments DIV d'un point de vue sémantique. Smiley cligne
Modifié par Florent V. (25 Jun 2009 - 14:48)
@Laurie-Anne

Merci pour votre réponse.

a écrit :
Quel est ton problème avec les flottants ?


Je ne dit pas que les flottants sont anti-sémantique, seulement, j'ai un mal fou à faire des structures stables en les utilisant... C'est un problème récurrent pour moi, car je réalise de temps en temps des sites internet pour des petites structures, je suis donc seul, je me débrouille parfaitement avec PHP, mySQL... mais quand il s'agit de faire la mise en page, c'est la galère... Cela dit, c'est aussi un domaine qui m'intéresse donc j'essaye de trouver des solutions adaptées à mon niveau, voila pourquoi j'essaye de me passer des flottants.

@Florent V.

Merci pour votre réponse très détaillée.

a écrit :
Conclusion: vu que tu utilises un tableau de mise en page pour IE 6-7, eh bien assume et ne double pas par des DIV dans le but d'utiliser du display:table-cell dans les autres navigateurs.


Mais n'est ce pas quand même un avantage d'avoir les "div" pour les navigateurs qui permettent d'utiliser des feuilles de style alternatives ? (question naïve je ne connais pas la réponse)

Ce qui m'énerve c'est que je fais beaucoup d'effort pour utiliser convenablement XHTML/CSS et dans beaucoup de cas je me trouve face à des problèmes qui me poussent au dernier moment à revenir à des tableaux...
Florent V. a écrit :

Bullshit.

Les tableaux de présentation sont, concrètement, aussi neutres que des éléments DIV d'un point de vue sémantique. Smiley cligne

Moui… La spécification ne traduit pas une telle ouverture, bien qu'étant toutefois plus laxiste quant à leur rôle par rapport à d'autres éléments, je te l'accorde.
À noter aussi: la sémantique ne sert pas que pour l'accessibilité, c'est seulement l'une des conséquences heureux d'un marquage propre, mais il y a tas d'autres implications.
fabioushka a écrit :
Je ne dit pas que les flottants sont anti-sémantique, seulement, j'ai un mal fou à faire des structures stables en les utilisant... C'est un problème récurrent pour moi, car je réalise de temps en temps des sites internet pour des petites structures, je suis donc seul, je me débrouille parfaitement avec PHP, mySQL... mais quand il s'agit de faire la mise en page, c'est la galère... Cela dit, c'est aussi un domaine qui m'intéresse donc j'essaye de trouver des solutions adaptées à mon niveau, voila pourquoi j'essaye de me passer des flottants.


Dans ce cas, je pense, mais ce n'est que mon avis, que tu devrais avant tout essayer de comprendre le positionnement flottant, plutôt que de le contourner par des solutions plus complexes.
Benjamin D.C. a écrit :
Moui… La spécification ne traduit pas une telle ouverture, bien qu'étant toutefois plus laxiste quant à leur rôle par rapport à d'autres éléments, je te l'accorde.

Je ne parlais pas de la spécification. J'ai dit concrètement, pas théoriquement. Smiley cligne

Benjamin D.C. a écrit :
mais il y a tas d'autres implications.

Un tas, un tas, tu y vas fort. Et pour revenir aux tableaux, je doute que le moindre outil exploitant la sémantique HTML interprète un élément TABLE comme contenant des données tabulaires, en l'absence d'autres indices (tels que la présence de CAPTION ou TH...). Donc bon, osef.
fabioushka a écrit :
Mais n'est ce pas quand même un avantage d'avoir les "div" pour les navigateurs qui permettent d'utiliser des feuilles de style alternatives ? (question naïve je ne connais pas la réponse)

Si. Avec deux bémols:
- Dans l'absolu, un navigateur web devrait permettre de passer une cellule de tableau en display:block ou display:inline ou autre. Beaucoup le font. D'autres non (IE 6-7, à vérifier pour IE8). Donc entre une structure donnée en DIV, et une structure équivalente en TABLE/TR/TD, il n'y a que dans le cas où les TABLE et TR sont franchement inutiles qu'on se retrouve avec une structure moins souple.
- Les feuilles de styles alternatives, ça a une utilité très réduite.

fabioushka a écrit :
Ce qui m'énerve c'est que je fais beaucoup d'effort pour utiliser convenablement XHTML/CSS et dans beaucoup de cas je me trouve face à des problèmes qui me poussent au dernier moment à revenir à des tableaux...

Il y a des cas où le rendu d'une cellule de tableau est LA bonne solution pour un besoin précis. Dans ce cas, soit on utilise du display:table-cell, soit on utilise un tableau de mise en forme (si besoin d'une compatibilité IE 6-7, ce qui est encore largement le cas aujourd'hui).

Il y a d'autres cas où utiliser un tableau est une facilité pour des personnes un peu à la rue sur le positionnement CSS. Ces dernières n'ont peut-être pas lu le guide de survie qui va bien?
@Laurie-Anne

a écrit :
Dans ce cas, je pense, mais ce n'est que mon avis, que tu devrais avant tout essayer de comprendre le positionnement flottant, plutôt que de le contourner par des solutions plus complexes.


Je pense avoir bien compris le positionnement flottant, seulement je n'aime pas trop cette méthode. Pour ma part, je pense que retirer des éléments du flux et utiliser un élément "inutile" pour rétablir le flux, juste pour afficher des "div" côte à côte, c'est complexe également. (Je précise quand même que ce n'est que mon point du vue Smiley cligne ).

@Florent V.

a écrit :
pour des personnes un peu à la rue sur le positionnement CSS


Smiley eek Merci !!!

Sans rire, il y sans doute une faille dans ma méthodologie mais plusieurs fois, j'ai commencé des projets web en réalisant une maquette avec des positionnements flottants qui rendaient impeccable sous les principaux navigateurs, et puis après le projet avance je rajoute des éléments à la page et pour finir : gros bug d'affichage impossible à résoudre... Je ne pense pas être un cas isolé.
fabioushka a écrit :
Je pense avoir bien compris le positionnement flottant, seulement je n'aime pas trop cette méthode. Pour ma part, je pense que retirer des éléments du flux et utiliser un élément "inutile" pour rétablir le flux, juste pour afficher des "div" côte à côte, c'est complexe également.

Devoir gérer le dépassement des flottants est relativement complexe, en effet. Par contre apparemment il te manque quelques notions de base sur les moyens de bloquer le dépassement des flottants... notamment l'utilisation d'un contexte de formatage.

Je précise tout de même que le rendu des tableaux peut aussi être jugé complexe à certains égards: gestion de la largeur, algorithme dynamique de calcul de la largeur des colonnes... il y a un certain nombre de subtilités aussi. Par contre ces subtilités posent plus rarement problème que les effets de bord du positionnement flottant.

fabioushka a écrit :
Sans rire, il y sans doute une faille dans ma méthodologie (...)

Je dirais plutôt que certaines connaissances sur le positionnement CSS manquent. Ce n'est pas tout à fait surprenant car il s'agit de subtilités pas toujours évidentes, telles que la gestion du dépassement des flottants et les contextes de formatage par exemple. De plus il faut rajouter les bugs et insuffisances d'IE 6-7, et les moyens de les contourner. Quand on n'est pas intégrateur web de métier, ce n'est pas évident de maitriser toutes les subtilités du positionnement CSS qui reste globalement complexe, et manque d'outils puissants (je ne pense pas ici à l'équivalent des tableaux de mise en page, qui existe en CSS depuis des années, mais plutôt à un système de grille dynamique comme dans le module Advanced Layou de CSS3).
@Florent V.

a écrit :
techniquement erroné car tu appliques ton code HTML «alternatif» à toutes les versions d'IE alors qu'IE8 (en passe de rattraper IE6 en parts de marché, si ça n'est pas déjà fait) implémente très bien display:table-cell


Effectivement, tests à l'appui, "table-cell" est bien interprété sur IE8.

a écrit :
Je dirais plutôt que certaines connaissances sur le positionnement CSS manquent. (...) De plus il faut rajouter les bugs et insuffisances d'IE 6-7 (...) Quand on n'est pas intégrateur web de métier(...)


On est d'accord. Je suis étudiant en info mais j'ai appris ce que je sais sur le HTML puis sur le XHTML/CSS tout seul grâce à des sites comme celui-ci car la réalisation de sites web m'intéresse beaucoup.

Pour en revenir une dernière fois à la méthode que j'ai suggérée pour les colonnes : (désolé d'insister Smiley cligne )

Est ce que la "méthode" serait moins soumise à critiques si le choix entre "<div>" est "<table>" était géré avec un langage serveur comme PHP ? (Laissant ainsi un code source propre pour tous les navigateurs). Ça ne résout pas le problème de la maintenance, mais comme vous l'avez souligné, c'est peu être un peu idéaliste de penser qu'en cas de refonte du design on ne retouche pas un minimum au code XHTML.

Encore merci pour vos réponses.
fabioushka a écrit :
Est ce que la "méthode" serait moins soumise à critiques si le choix entre "<div>" est "<table>" était géré avec un langage serveur comme PHP ?

Le problème alors est que la détection du navigateur côté serveur est incertaine, le User-Agent déclaré en HTTP par le navigateur n'étant pas toujours correct.

fabioushka a écrit :
(Laissant ainsi un code source propre pour tous les navigateurs).

Un tableau de mise en page ça n'est pas sale. J'ai listé ci-dessus les arguments valables contre l'utilisation de tableaux de mise en page, et je ne crois pas que la technique que tu présentes apporte le moindre avantage par rapport à ça. Donc...
Sujet clos
Aller à