Des logos spécifiques à chaque style

Attention : les informations contenues dans ce document sont anciennes et peuvent être obsolètes.

J'ai par ailleurs souhaité pousser un peu plus loin la personnalisation des pages en fonction des styles. Outre le changement de couleurs, on peut facilement adapter les puces des listes ou tout autre icône en utilisant la propriété « image de fond » (background-image). Par contre personnaliser le logo était une autre affaire puisqu'il s'agit d'une image intégrée au code HTML.

La première solution que j'ai envisagé consistait à prendre une image transparente en guise de logo, puis de lui insérer une image de fond différente pour chaque style. Mais cette méthode à un inconvénient majeur: sans styles appliqués, le logo n'est qu'une image vide, qui ne signifie donc rien.

Une méthode plus intéressante est d'utiliser un texte comme logo (le nom du site par exemple), puis de le remplacer par une image. Il existe de nombreuses techniques permettant d'obtenir cet effet, la plus connue étant le Fahrner Image Replacement (FIR). Elle n'est pourtant pas parfaite: pour masquer le texte à remplacer par l'image, elle utilise la propriété display: none; or, le non-affichage du texte induit certaines difficultés de lecture pour les lecteurs d'écran utilisés notamment par les aveugles. De nombreux web designers se sont donc creusés les méninges afin de trouver une (des) alternative(s); Dave Shea, initiateur du génialissime projet Css Zen Garden, en propose d'ailleurs un tour d'horizon commenté, avec les avantages et les inconvénients de chaque méthode. Dans le cas de ce site, un problème supplémentaire devait être résolu: non seulement l'entête à un logo (le nom du site), mais il a aussi une image de fond à proprement parlé.

Ces techniques de remplacement d'un texte par une image peuvent se diviser en deux groupes :

  • Cacher le texte en appliquant l'image par dessus. Cette méthode nécessite d'introduire un conteneur vide supplémentaire, généralement un span. Vous aurez par exemple l'entête suivant : <h1>Mon Titre<span></span></h1>; les feuilles de styles vous permettent ensuite d'insérer une image de fond dans ce span vide et de le formater pour qu'il recouvre le texte « Mon Titre ». C'est apparemment la méthode parfaite, hormis le fait que l'on insère artificiellement un morceau de code et qu'elle ne peut fonctionner qu'avec une image sans zones transparentes.
  • Rendre le texte invisible. C'est la technique classique du FIR, qui utilise un display: none. Nous avons vu les limites de cette méthode, limites tout aussi valables pour sa variante visibility: hidden (au lieu de ne pas afficher le texte, on le rend « invisible ») ou pour les méthodes qui utilisent des tailles de texte très petites. D'autres variantes jouent elles sur les marges internes (padding) ou externes (margin) de la boîte pour simplement sortir le texte de la zone de visibilité.

C'est l'une de ces dernières techniques qui m'a semblé la plus appropriée pour le site. J'ai ainsi remplacé l'image du logo par un titre :

<h1><a href="http://www.omacronides.com/">Omacronides</a><h1>

Le titre (h1) me permet d'insérer l'image de fond et la balise du lien l'image du logo, toutes deux spécifiques au style utilisé. Ce lien est ensuite formaté de telle sorte à ce que le texte soit minuscule. Tout ceci ne vaut pas pour IE: le navigateur de Microsoft ne gérant pas la transparence des images PNG, le logo se résume au texte du titre.

Voilà, c'était le énième épisode de « Martine au pays merveilleux des CSS ». Prochaine aventure : comment passer du HTML au XHTML sans se prendre la tête.