HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir

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”.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



6 commentaires pour “HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir”

  1. Loiseau2nuit dit :

    Oui… sauf que non !

    De 2 choses

    l’une : Il y a (du moins me semble t’il) une erreur d’approche sur le bout de code « HTML 4.01″. Ce n’est pas au titre h1 qu’il faut donner une largeur et une hauteur mais au lien lui même : a ! Avec un < span >  autour de son contenu, tu obtiens bien un bloc image cliquable et ce, sans soucis.

    La seconde : on ne met pas de h1 pour le logo du site. le h1 est réservé au titre de la page logiquement. Pour le logo du site, un simple < strong > fait bien mieux l’affaire.

    Pas de méthode d’intégration miracle, loin de là. Visuellement ca change rien mais pour le référncement global du site ça change tout en revanche, et pas qu’un peu ! (cela dit, maintenant que j’y pense, il me semble que toi et moi on a déjà eu ce débat là, non ?)

    D’ailleurs, d’une manière générale, moins ya de lien dans une balise Hx et mieux tout le monde se porte mais c’est pas toujours possible alors dans la mesure des possibilités, on attend d’être au minimum à h3 pour pondre du titre cliquable.

    My 2 Cents ;)

  2. Loiseau2nuit dit :

    Oui… sauf que non !

    De 2 choses

    l’une : Il y a (du moins me semble t’il) une erreur d’approche sur le bout de code « HTML 4.01″. Ce n’est pas au titre h1 qu’il faut donner une largeur et une hauteur mais au lien lui même : a ! Avec un < span >  autour de son contenu, tu obtiens bien un bloc image cliquable et ce, sans soucis.

    La seconde : on ne met pas de h1 pour le logo du site. le h1 est réservé au titre de la page logiquement. Pour le logo du site, un simple < strong > fait bien mieux l’affaire.

    Pas de méthode d’intégration miracle, loin de là. Visuellement ca change rien mais pour le référncement global du site ça change tout en revanche, et pas qu’un peu ! (cela dit, maintenant que j’y pense, il me semble que toi et moi on a déjà eu ce débat là, non ?)

    D’ailleurs, d’une manière générale, moins ya de lien dans une balise Hx et mieux tout le monde se porte mais c’est pas toujours possible alors dans la mesure des possibilités, on attend d’être au minimum à h3 pour pondre du titre cliquable.

    My 2 Cents ;)

  3. Loiseau2nuit dit :

    Oui… sauf que non !

    De 2 choses

    l’une : Il y a (du moins me semble t’il) une erreur d’approche sur le bout de code « HTML 4.01″. Ce n’est pas au titre h1 qu’il faut donner une largeur et une hauteur mais au lien lui même : a ! Avec un < span >  autour de son contenu, tu obtiens bien un bloc image cliquable et ce, sans soucis.

    La seconde : on ne met pas de h1 pour le logo du site. le h1 est réservé au titre de la page logiquement. Pour le logo du site, un simple < strong > fait bien mieux l’affaire.

    Pas de méthode d’intégration miracle, loin de là. Visuellement ca change rien mais pour le référncement global du site ça change tout en revanche, et pas qu’un peu ! (cela dit, maintenant que j’y pense, il me semble que toi et moi on a déjà eu ce débat là, non ?)

    D’ailleurs, d’une manière générale, moins ya de lien dans une balise Hx et mieux tout le monde se porte mais c’est pas toujours possible alors dans la mesure des possibilités, on attend d’être au minimum à h3 pour pondre du titre cliquable.

    My 2 Cents ;)

    • br1o dit :

      Sur le fait de mettre ou non le logo dans un h1 etc. je dirais que sur la page d’accueil, ce h1 est bien le titre de la page, par exemple j’aurais pu mettre CSS & Webdesign dans un h1 remplacé par un logo en page d’accueil de ce blog et garder ensuite le h1 pour le titre des articles lorsqu’ils sont affichés. C’est d’ailleurs ce que je conseille en général.

      Ici, l’important n’est pas vraiment cette question de h1 d’autant moins qu’avec HTML5 on peut sortir de cette arborescence contraignante et mettre autant de h1 qu’on le juge utile.

      Ton approche est intéressante au détail près qu’elle nécessite un span superflu par rapport à ma méthode qui reste minimaliste.

      Après, comme je le dis, ça marche aussi en enveloppant une balise div classique avec un lien si le h1 ne te convient pas :)

      • Loiseau2nuit dit :

        J4ai pas essayé mais… a > h1 ca passe au validateur ? Si oui effectivement ma réflexion et mes span n’ont pas lieu d’être (c’est vrai que j’ai un peu tendance à en foutre partout ^^)

        • br1o dit :

          Bah, si la spec HTML5 dit que c’est cachère mais que le validateur n’est pas à jour, il faut changer la spec ou le validateur ? ;))

          Sinon, ta réflexion sur le fait que le logo ne doit pas forcément être dans une balise h1 est tout à fait pertinente dans le cadre d’un document structuré à la mode du outline html4. Avec HTML5, je me dis qu’on l’on peut explorer d’autres voies.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site