Une ombre sur du texte (tutoriel modifié)

élucubrations XHTML, CSS
et Standards web

Recherche par mot-clés

CSS · XHTML · Standards W3C · Webdesign · Accessibilité · Référencement · JavaScript · PHP · Humour

AlsaQuiz

A retenir

Syndication

Rédacteurs du blog

Partenaires

Poster

Appliquer une ombre sur du texte est un gadget visuel qui n'a que peu d'utilité... c'est pourquoi le sujet m'a intéressé

La première version du Tutoriel sur ces techniques était vraiment très discutable...

Une technique revisitée

... La seconde est également discutable !!! Mais un peu moins tout de même : cela reste de la bidouille destinée principalement à faire mumuse avec les possibilités des CSS.

L'ancien tutoriel proposait de superposer deux titres H1 identiques mais de couleur différentes. Or, depuis la mode des pseudo-référenceurs de mettre des titres H1 partout, j'ai préféré modifier cette méthode.

Bien-sûr, elle reste très contestable car, comme l'a souligné Laurent Denis : elle s'apparente tout à fait elle aussi aux mauvaises pratiques de référencement par multiplication cachée de mots-clés...

Utiliser du contenu généré en CSS

Par contre, la nouveauté vient d'une seconde technique pour réaliser ce gadget : l'utilisation du pseudo-élément :after allié à la propriété content.

CSS permet de générer du contenu dynamiquement grâce à la propriété Content. Ce genre de technique est à utiliser avec parcimonie car le contenu généré ne s'affichera pas sur les navigateurs sans styles CSS.

Cependant, dans notre cas, cela nous arrange, justement. Si les CSS sont activés, l'ombre apparaîtra; dans le cas contraire, elle sera tout simplement ignorée sans troubler la navigation.

On utilisera la propriété title qui aura le double avantage de générer le texte ombre et d'afficher un texte en passant la souris par-dessus le texte.

Et les images dans tout ça ?

Evidemment, on dira que le moins pire reste encore d'utiliser des images pour faire ses textes ombrés.

Oui peut-être pour certains points, mais les titres en image impliquent :

une séparation incomplète de la structure et de la forme (cela ne facilite pas les mises à jour futures car il faut refaire toutes les images de tous les titres)
une augmentation du poids qui peut être conséquente, même si ce n'est plus trop important
des problèmes de référencement et d'indexation car une image avec alt est moins bien prise en compte.

A vous de voir ! ... et de proposer d'autres applications pratiques ?

Par Raphael GOETTER - samedi 30 octobre 2004 à 11:47

Tutoriels Alsa - #84 - Lu 7065 fois - Intérêt du billet: 2(7) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le samedi 30 octobre 2004 à 16:24, par Fabrice Bonny :: #

On peut aussi gueuler pour qu'une partie des CSS 2 sorties en 1998 et appelé text-shadow soit supporté par autre chose que le seul Safari (1.1 et +) 6 ans après...
www.w3.org/TR/REC-CSS2/te...
www.mediaworkers.de/text-...

Le samedi 30 octobre 2004 à 16:28, par Raphael :: site :: #

@Fabrice > en effet, c'est ainsi que commence le tutoriel : "En attendant la propriété text-shadow, CSS2 qui n'apparaît pas encore sur les navigateurs actuels, nous allons faire cette ombre "à la main""

Le samedi 30 octobre 2004 à 23:08, par Laurent Denis :: #

Dites-moi si je me trompe, mais text-shadow a disparu de CSS2.1, qui tire le bilan de l'utile et de l'inutile dans CSS2.

Sinon, après réflexion sur notre échange à ce sujet, j'en reste décidément sur l'idée qu'un titre en image ou une sIFR mélange moins contenu et présentation dans le HTML que ce "bidouillage", en ne détournant aucun attribut (ici title) de son rôle (**ajouter** une information).

Le samedi 30 octobre 2004 à 23:44, par Laurent Denis :: #

Enfin, soyons juste... Tu as renoncé à cette autre solution à base de <span> dans le <h1>: c'était déjà un pas important

Bon, comme tu le dis très justement, c'est "destiné principalement à faire mumuse" : le coup du title étant apparemment inoffensif pour l'accessibilité... on lui pardonnera de ne pas être sémantique.

Le dimanche 31 octobre 2004 à 12:26, par Talou :: site :: #

Passionnant ! J'aime beaucoup la nouvelle solution, qui se rapproche de plus en plus des bonnes pratiques !
Ce qui est le plus intéressant à mon avis, c'est qu'il y a moins de code de contenu, et le choix d'afficher ou non l'ombre (en remplissant ou non la propriété title - attention cependant à ne pas se tromper dans ce que l'on met ;o) ), mais aussi, que cela ne dérange en rien la navigation lorsque l'on désactive ou que l'on ne peut pas afficher les CSS.

Concernant le text-shadow dans gecko, je ne saurais trop vous recommander d'aller voter pour le bug 10713 bugzilla.mozilla.org/show... si vous avez un compte sur le bugzilla de mozilla !

Le dimanche 31 octobre 2004 à 12:31, par Raphael :: site :: #

@Talou : "Passionnant !"
> Passionnant c'est peut-être beaucoup dire. Ça reste un gadget mais il doit bien y avoir d'autres utilités sympathiques (voir le billet sur before/after tiré du blog de Nanoum)

Le dimanche 31 octobre 2004 à 13:45, par Talou :: site :: #

Bon, je persiste, c'est passionnant :o)
Et d'une, parce qu'il est question de sémantique : alléger les balises - d'accord, au prix d'une petite entorse au paramètre title - et garder le sens des éléments que l'on a disposés dans la page, selon leur rôles respectifs, tout en permettant ce petit plus.
Et de deux, tout simplement parce qu'il est aussi question de présentation et design. Je voudrais d'ailleurs protester énergiquement (bon, pas si fort que ça tout de même ;o) ), parce que l'expression "Gadget visuel", ou l'idée de l'inutilité dans CSS2, concernant les ombres d'un text, me chagrine. En effet, faire des pages web, c'est aussi enjoliver le contenu. Les feuilles de style sont là pour ça : ceux qui le souhaitent (ou qui le peuvent), bénéficient d'une mise en style choisie par l'auteur du site. En cela, ombres sur texte, images ombrées, transparence alpha, couleur des caractères, positionnement, bords arrondis et autres artifices de présentations sont indispensables à notre métier, et il s'agit de bien trouver de quelles manières ils sont le mieux employés.
Mais c'est bien pour ça que tu nous fait d'aussi bon articles ! Merci :o)

Le mercredi 3 novembre 2004 à 16:39, par Felipe :: site :: #

"les titres en image impliquent :
(...)
- une augmentation du poids qui peut être conséquente, même si ce n'est plus trop important "
---
Depuis que tu as ta Freebox, combien de fois est-ce que tu as dû revenir à ton 56k adoré?