Utilisation de XHTML et des CSS
Afficher ou masquer des éléments
Habituellement réservés à des langages comme Javascript, l'interaction entre l'affichage et les actions de l'utilisateur peuvent être configurées grâce aux CSS.
On peut par exemple, facilement faire apparaître un texte ou une info-bulle lors du survol d'un élément. On utilisera alors la pseudo-classe :hover, qui sera utilisée lors du survol d'un élément.
Prenons l'exemple d'un texte (span) qui doit être affiché lors du survol d'un lien (a). Dans le code XHTML le lien et le texte seront bien présents comme le montre le code ci dessous :
<a href="">
Lien
<span>avec un texte caché</span>
</a>
Par défaut on va cacher le texte affiché dans la balise span grâce à la propriété display fixée à none.
Ensuite nous allons utiliser la pseudo classe :hover pour indiquer que lors du survol du lien par la souris on pourra afficher ce texte caché :
a span{
display:none;
}
a:hover span{
display:inline;
}
L'exemple ci dessus ne fonctionne pas avec Internet Explorer bien que la syntaxe soit bonne. Afin de le faire fonctionner avec ce navigateur il va falloir utiliser de nouveau une astuce qui consiste à spécifier une couleur de fond au survol des liens.
a:hover{
background:none;
}
Une fois ce réglage effectué le code fonctionnera sans problèmes sous tous les navigateurs.
La norme CSS3 actuellement en élaboration permettra de définir de nouvelles pseudo classes qui permettront encore plus d'interactivités avec l'utilisateur.