fastclemmy.com

Un titre en image

# 12-12-2003

Article original du 07.08.03 - Dans la logique de la conception de pages web en xhtml/css, on essaye autant que faire se peut de limiter les images au strict minimum. Cela est particulièrement vrai pour les titres : il est souvent possible de les styler en CSS pour économiser une image. Seulement cette approche a ses limites et il est vrai que graphiquement un titre en image est toujours plus agréable à l'oeil.

Pour concilier les deux approches, j'en suis venu naturellement à chercher une astuce qui s'est avérée par la suite être la même que celle proposée par Douglas Bowman de StopDesign. En gros le titre est placé dans un élément <h1>, le texte à l'intérieur (contenu dans un <span>) est caché en mettant sa propriété display à none et l'image est en fait un background de l'élément <h1>

Mais deux autres designers ont pensé à une autre méthode basée sur la propriété overflow : Seamus P. H. Leahy et Stuart Langridge. David Shea a d'ailleurs réalisé un article intéressant sur le sujet dans Digital Web.

Mise à jour du 12.12.03 - On ne compte plus les articles sur le sujet : une version mise à jour pour supporter IE5 Mac, une version qui marche en désactivant les images de son navigateur, dernièrement une autre et des articles récapitulatifs sur le sujet.

On l'aura compris la solution idéale n'existe pas. En effet, soit les méthodes échouent sur les navigateurs en désactivant les images, soit sur quelques navigateurs spécifiques et dans tous les cas le code à mettre en oeuvre est assez indigeste. J'en viens donc personnellement à la conclusion qu'il y a simplement une amélioration à faire au niveau des recommandations CSS. Admettons par exemple que l'on considère ces images faisant office de titre comme un type particulier d'images d'arrière-plan. Pour coder le titre, on utiliserait simplement sans autre marquage superflu.

<h1>Mon titre</h1>

Du côté des CSS, là encore on jouerait la carte de la simplicité en ajoutant une propriété qui mettrait l'image au premier plan : background-z-index

h1 { background-image:url(monTitreEnImage.gif); background-repeat:no-repeat; background-z-index:1; height:45px; }

Ainsi, pour les navigateurs texte ou pour Google la page afficherait "Mon titre", les navigateurs supportant les images afficheraient "monTitreEnImage.gif" qui cacherait le texte en-dessous permettant ainsi aux personnes ayant désactivé les images de comprendre le titre. Voilà enfin une solution simple, accessible à tous, sans code superflu. Ne reste plus qu'à la proposer au W3C et que les navigateurs l'incorporent vite ! ;-)

#xhtmlCSS

Vos commentaires

Bobe -
Une propriété d'arrière plan couplé avec un z-index pour la mettre par dessus le texte, voila qui me semble contradictoire. :)

Emmanuel - site -
Il y a longtemps, j'avais pensé à une solution dans le même esprit, à savoir, une propriété « color: transparent » pour le texte, puisque l'on avait bien « background-color: transparent ». Mais en fait non. Je pense que ces solutions sont des bidouilles inutiles et qu'il y a plus à attendre de l'import de typo ou des capacités des OS à lisser et afficher agréablement le texte.

Gatan - site -
Ou alors

h1 {
foreground-image: url(monTitreEnImage.gif);
}

dd_005 -
ehh, une petite question:
ce serait pas plus pratique (et plus accessible) de faire qqch comme ca:
Titre


ca fonctionnerait, non??
je pense que c'est pas top, mais qu'est ce qui fait que cette technique n'est pas utilisée??

Anubis - site -
Emmanuel, je pense que tu veux parler de cette fonctionnalité CSS2 ^^.

h1
{
content: url(monTitreEnImage.gif);
}

Plus d'informations dans la spécifications
http://www.w3.org/TR/REC-CSS2/generate.html#content

denis -
Idée géniale mais malheureusement en avance sur son temps donc unanimement rejetée ;-)

On a déjà assez de mal à ce que les navigateurs respectent l'esprit des standards, pour en plus leur demander de faire des contorsions pour que les bidouilleurs puissent faire en CSS pire qu'avant avec leur soupe de balises

Ajouter votre commentaire