Il m’arrive assez fréquemment de devoir répondre à des demandes graphiques plutôt… complexes. Et parfois cela nécessite de multiplier les conteneurs. J’utilise plusieurs méthodes et j’aimerais connaître vos habitudes afin de confronter nos réflexions.
Imbrications des conteneurs
<div class="encadre_arrondi_haut">
<div class="encadre_arrondi_bas">
<p>Du contenu.</p>
</div>
</div>
C’est de loin la méthode que je préfère, car, selon moi, elle ne perturbe pas le sens sémantique de la structure. Elle ne permet pas de traiter tout les cas de figures par contre (notamment quand il s’agit de jouer avec la transparence).
Ajouts d’éléments vides
<div>
<span class="encadre_arrondi_haut"></span>
<span class="encadre_arrondi_bas"></span>
<p>Du contenu.</p>
</div>
C’est pratique et parfois plus souple, ça valide au niveau W3C… mais pas avec l’extension HTML Validator que j’aime beaucoup. C’est tout bête mais ça m’ennuie !
Ajouts d’éléments avec un contenu « neutre »
<div>
<span class="encadre_arrondi_haut"><br /></span>
<span class="encadre_arrondi_bas"><br /></span>
<p>Du contenu.</p>
</div>
ou encore :
<div>
<span class="encadre_arrondi_haut"> </span>
<span class="encadre_arrondi_bas"> </span>
<p>Du contenu.</p>
</div>
Je ne pense pas que les retours chariots ni les espaces insécables soient pris en compte par les lecteurs d’écrans… toutefois, les éléments sont détournées de leur usage et je ne suis pas plus convaincu.
Des avis sur ce sujet, ô combien passionnant ?!
2 commentaires ↓
Je déteste les éléments vides… J’opte pour la première solution en générale. En utilisant des class comme « content », « inner », « top », « mid », « btm » pour toujours garder la même structure…
Les br sont bien lus par les lecteurs d’écran sous certaines conditions. Les espaces insécables eux sont du contenu, à part entière.
Mettre un commentaire suffit probablement pour le validateur, et dans tous les cas dégrader le contenu pour faire plaisir au validateur me semble contestable.
Laisser un commentaire