Travaux pratiques
TROISIÈME PARTIE
158
Variante utilisant la propriété visibility
L’exemple précédent fait appel à la règle display: none. Illustrons ce en quoi elle
diffère de l’instruction visibility: hidden :
Dans ces conditions, le cadre entourant l’image ne fluctue pas au survol : il a réservé
l’espace nécessaire à l’affichage de la légende. C’est visuellement moins perturbant.
Application pratique
li a span {
visibility:hidden;
}
li a:hover span {
display: block;
visibility:visible;
}
EXCÈS DE ZÈLE Quand les navigateurs en mode texte font pire que mieux
Les déclarations display: none; et display: inline; n’ont de sens qu’en mode
graphique. Dans les autres médias (notamment les navigateurs en mode texte), on
s’attend à une interprétation du document web en mode dégradé, ignorant toute
instruction de mise en forme.
Presque tous les navigateurs en mode texte affichent donc les portions masquées de
la page, ce qui pose des problèmes de compréhension (surtout à l’intérieur de l’élément ).
L’exemple des infobulles personnalisées applique ces techniques à notre projet
de site web alsacien. Je vous propose de le compléter en l’appliquant à tous les
mots importants du texte… que vous veillerez toutefois à ne pas surcharger.
À vous de jouer !