Diminution du nombre de <div> VS intégration graphique

Bonjour,

Au fil des commentaires que je vois, je constate qu'on mise beaucoup sur la diminution du nombre de <div> au minimum. Or, je constate que certains divs que vous suggérer d'enlever sont utilisés pour de l'intégration graphique et donc, si on enlève ces <div>, ça brise la charte graphique !

Je prends cet exemple : http://forum.alsacreations.com/topic-18-52363-1-Amateur-httpwwwculturescroiseescom.html
Ça fait genre deux fois que l'auteur du sujet le dit que son div footer est là pour intégrer une image graphique ! Si vous testiez avec Firebug en enlevant ce div, vous l'auriez vu que la charte graphique serait brisée !

Un autre exemple avec un de mes designs : http://ishimaru-design.servhome.org/tests/3dblue/
Là aussi, j'ai eu des retours sur le nombre de <div> entourant mon tableau. Or, je n'arrête pas de me tuer à dire que c'est la seule façon que j'ai trouvée pour intégrer ces morceaux tout en étant compatible avec Internet Explorer qui, je le répète a la fâcheuse habitude de répéter dans chaque cellule les fonds qu'on a définis dans un <tr> alors que Firefox n'a pas ce comportement ! Et à chaque fois que je me tue à le dire, c'est le silence total et tout est à recommencer !
Donc si vous ne comprenez toujours pas, je vous mets au défi d'arriver à un résultat compatible sur tous les navigateurs sans les trois <div> tout en arrivant à maintenir la même charte graphique ! Je vous mets même le zip du kit graphique pour que vous puissiez tester !
http://ishimaru-design.servhome.org/dl/webdiz/3dblue.zip

Alors, il serait le temps de débattre sur jusqu'où aller dans l'épuration des <div> par rapport à l'intégration graphique, car on n'est pas pour se relancer dans les hacks en folie juste pour IE qui a un comportement fucké lorsqu'on est moindrement audacieux dans le CSS !

[/my 2 cents]
Modifié par IshimaruChiaki (28 Nov 2010 - 19:25)

Hello,

IshimaruChiaki a écrit :
Ça fait genre deux fois que l'auteur du sujet le dit que son div footer est là pour intégrer une image graphique ! Si vous testiez avec Firebug en enlevant ce div, vous l'auriez vu que la charte graphique serait brisée !

Sauf qu'en l'occurrence il aurait été préférable de mettre cette image en background (bottom) de centre_site ce qui aurait évité de rajouter ce DIV footer effectivement inutile (il aurait par contre pu servir pour intégrer les logos en bas à droite sous forme d'éléments IMG).

IshimaruChiaki a écrit :
Alors, il serait le temps de débattre sur jusqu'où aller dans l'épuration des <div> par rapport à l'intégration graphique

Ben il me semble que ce débat n'a pas lieu d'être puisque l'élément DIV (tout comme l'élément SPAN) ne sert à rien d'autre qu'à cela : permettre de cibler une partie du contenu n'existant pas originellement dans le code sous la forme d'un élément HTML par le biais du CSS ou du JavaScript. Donc oui : l'optimisation du code nous invite à ne pas rajouter des éléments qui ne servent à rien d'autre qu'au graphisme et à privilégier l'emploi des éléments déjà disponibles mais il arrive qu'on n'ait pas d'autre choix que celui de rajouter un élément DIV ou SPAN "inutile d'un point de vue sémantique" (pléonasme).

Edit: par ailleurs l'implémentation des CSS étant ce qu'elle est il peut également être nécessaire de rajouter des éléments pour combler les lacunes de tel ou tel navigateur (pas trop le temps -ni l'envie - de vérifier si c'est bien le cas pour ton forum mais je te fais confiance...)
Modifié par Heyoan (29 Nov 2010 - 05:38)

Heyoan a écrit :
Hello,

Sauf qu'en l'occurrence il aurait été préférable de mettre cette image en background (bottom) de centre_site ce qui aurait évité de rajouter ce DIV footer effectivement inutile (il aurait par contre pu servir pour intégrer les logos en bas à droite sous forme d'éléments IMG).

Sauf que justement je pensais qu'il était en background !

a écrit :
Ben il me semble que ce débat n'a pas lieu d'être puisque l'élément DIV (tout comme l'élément SPAN) ne sert à rien d'autre qu'à cela : permettre de cibler une partie du contenu n'existant pas originellement dans le code sous la forme d'un élément HTML par le biais du CSS ou du JavaScript. Donc oui : l'optimisation du code nous invite à ne pas rajouter des éléments qui ne servent à rien d'autre qu'au graphisme et à privilégier l'emploi des éléments déjà disponibles mais il arrive qu'on n'ait pas d'autre choix que celui de rajouter un élément DIV ou SPAN &quot;inutile d'un point de vue sémantique&quot; (pléonasme).

Edit: par ailleurs l'implémentation des CSS étant ce qu'elle est il peut également être nécessaire de rajouter des éléments pour combler les lacunes de tel ou tel navigateur (pas trop le temps -ni l'envie - de vérifier si c'est bien le cas pour ton forum mais je te fais confiance...)

Mais justement le problème c'est qu'à chaque fois que j'ai posté le lien vers mon webdiz (qui est en libre téléchargement sur mon site), les mêmes commentaires revenaient au sujet du nombre de <div> autour du tableau !
Des exemples sur ce lien : http://forum.alsacreations.com/topic-9-51412-1-Le-tableless-et-limgless-encore-.html
Et lorsque j'ai enfin pu répondre en rétorquant que je ne pouvais pas faire autrement, c'était le silence de mort !

Ensuite, cet exemple ici où cette fois, c'est la hauteur des cellules d'en-tête où, là aussi, le fond est géré par les <div> pour les mêmes raisons de compatibilité avec IE :
http://forum.alsacreations.com/topic-4-46649-1-En-pleine-angoisse-Alignement-champs-et-boutons-la-galere-.html#p327244

Là aussi aucun retour par rapport à mon explication ! Donc j'en suis à une situation où il m'est impossible d'avoir confirmation si c'est vraiment la seule solution compatible pour ce type de charte graphique !

Je pige pas trop le sens du topic :

Si tu veux faire un rendu identique sur tous les navigateurs, soit tu limites par le bas en faisant (en gros) un design compatible IE6 qui passera forcément sur les autres navigateurs, soit tu fais un design sans prendre particulièrement les restrictions IE6, et dans ce cas là tu vas forcément avoir à allourdir un peu le code, devoir recourir à des hacks, pas pouvoir utiliser de png etc etc ça sera galère et c'est tout.

Sinon tu fais de la dégradation élégante ou de l'amélioration progressive, ça passe pas pareil partout, à toi de voir.

En fait j'arive pas trop à comprendre la revendication ou la question du topic :s
Modifié par HammHetfield (29 Nov 2010 - 17:58)

IshimaruChiaki a écrit :
c'était le silence de mort !
(...)
Là aussi aucun retour par rapport à mon explication !

Pour rappel, nous sommes sur un forum sur le Web, pas dans une conversation en face à face. Quand on n'obtient pas de réponse, c'est parce que les interlocuteurs potentiels n'ont pas vu notre demande ou complément d'information, ne l'ont pas bien comprise, n'ont pas le temps de répondre ou n'ont pas de réponse à fournir. Ce n'est pas un jugement de valeur ou une fin de non-recevoir.

Bien sûr il y a quelques bonnes pratiques qui augmentent les chances d'avoir des réponses (poser une seule question plutôt que deux ou trois, donner les détails nécessaires tout en étant concis, utiliser un ton mesuré), mais ça ne garantit rien.

Sur le problème technique soulevé: au vu de ton code, il y a possibilité de simplifier un minimum. Par exemple pour un bloc de largeur fixe extensible en hauteur (mais avec une hauteur finale relativement limitée même en augmentant la taille du texte), plutôt que la structure suivante:

<div id="machin-top"></div>
<div id="machin-middle">Ici le contenu</div>
<div id="machin-bottom"></div>

on peut avoir ce genre de chose:

<div id="machin">
  <div class="inner-block">
    Ici le contenu
  </div>
</div><!--#machin-->

ou encore:

<div id="machin">
  Ici le contenu
  <span class="deco"></span>
</div><!--#machin-->

Dans les deux cas on pourra utiliser une image unique, qui sera utilisée une fois en background-position: left top; et une fois en background-position: left bottom. Dans le deuxième cas on pourra utiliser le positionnement absolu pour placer l'élément de décoration en dehors du bloc conteneur si nécessaire.

Ces deux techniques sont utilisables sur tous les navigateurs actuels, y compris Papy IE6.
Voir aussi cet article sur le sujet:
http://covertprestige.info/css/boites-fluides/

Il y a aussi des techniques CSS 2.1 utilisables à partir de IE8 uniquement, et qui utilisent un ou deux pseudo-éléments (:before et :after) en display:block ou positionnés en absolu pour placer des images de fond en haut, en bas, sur un côté ou derrière le conteneur. Et enfin des techniques CSS 3 qui seront utilisables à partir d'IE9 (multiple backgrounds, border-image...).