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 ?!