HTML5 Boilerplate et WordPress ♥ Basics par la même occasion contiennent quelques classes CSS utiles pour masquer du contenu de différentes manières en fonction de vos besoins : .hidden, .visuallyhidden, .invisible and .ir. Après un rapide survol des trois premières classes, nous allons nous attarder un peu sur la dernière classe .ir pour régler une bonne fois pour toutes le problème des images de fond non cliquables.

.hidden { display: none; visibility: hidden; }

Fig. 1: Cache le contenu associé pour les lecteurs d’écran et les navigateurs.

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

Fig. 2: Cache le contenu visuellement seulement (est toujours disponible pour les lecteurs d’écran).

.invisible { visibility: hidden; }

Fig. 3: Cache le contenu visuellement pour les lecteurs d’écran et les navigateurs, mais conserve l’espace occupé.

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

Fig. 4: Remplacement d’image

Remplacement d’image avec CSS

La classe .ir propose un mécanisme pour remplacer du texte par une image grâce à la propriété background, en cachant le contenu initial sous le tapis. C’est très pratique, mais cette technique peut poser un problème lorsqu’on veut que l’image remplacée soit cliquable, comme c’est généralement le cas lorsqu’on place une image en fond de balise <h1> pour remplacer le titre du site, par exemple.

HTML 4.01

Le bout de code suivant :

<h1 id="site-title" class="ir fn org">
    <a class="url home bookmark" href="/" rel="home"><?php bloginfo( 'name' ); ?></a>
</h1>

… accompagné du style CSS :

#site-title {
	width: 220px;
	height: 160px;
	background: url(../img/logo.png) no-repeat;
}

… affiche bien l’image de fond logo.png à la place du titre du site, mais le contenu de la balise <h1> n’étant pas affiché, notre logo-image n’est pas cliquable. C’est bien embêtant.

HTML 5

Débarrassons-nous de ce problème. Grâce à la magie de HTML 5, il suffit de rendre cliquable l’ensemble de la balise <h1> :

<a class="url home bookmark" href="/" rel="home">
    <h1 id="site-title" class="ir fn org"><?php bloginfo( 'name' ); ?></h1>
</a>

D’après la spécification HTML5…

L’élément a peut envelopper des paragraphes entiers, des listes, des tableaux et ainsi de suite, de même que des sections entières, aussi longtemps qu’il n’y a pas d’élément interactif à l’intérieur des contenus, comme des boutons ou d’autres liens.

… l’affaire est dans le sac =^__^=

Traduit avec l’aimable autorisation de moi-même, d’après l’article HTML5 Boilerplate — Using .ir class and make the replaced image “clickable”.