Création d'apparences dynamiques

Nous allons découvrir dans ce chapitre plusieurs pseudo-formats CSS. Le premier que je vais vous montrer s'appelle:hover. Comme tous les autres pseudo-formats que nous allons voir, c'est une information que l'on rajoute après le nom de la balise (ou de la classe) dans le CSS, comme ceci :
a:hover
{

}
:hoversignifie « survoler ».a:hover peut donc se traduire par : « Quand la souris est sur le lien » (quand on pointe dessus).

À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens lorsqu'on pointe dessus. Laissez libre cours à votre imagination, il n'y a pas de limite.

Voici un exemple de présentation des liens, mais n'hésitez pas à inventer le vôtre :
a /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: red;
font-style: italic;
}

a:hover /* Apparence au survol des liens */
{
text-decoration: underline;
color: green;
}
On a défini ici deux versions des styles pour les liens :
  • pour les liens par défaut (non survolés) ;
  • pour les liens au survol.
Vous pouvez interagir encore plus finement en CSS. Nous allons voir ici que nous pouvons changer l'apparence des éléments lorsque l'on clique dessus et lorsqu'ils sont sélectionnés !

:active: au moment du clic

Le pseudo-format:active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens.

Le lien gardera cette apparence très peu de temps : en fait, le changement intervient lorsque le bouton de la souris est enfoncé. En clair, ce n'est pas forcément toujours bien visible.

On peut par exemple changer la couleur de fond du lien lorsque l'on clique dessus :
a:active /* Quand le visiteur clique sur le lien */
{
background-color: #FFCC66;
}

:focus: lorsque l'élément est sélectionné

Là, c'est un peu différent. Le pseudo-format:focus applique un style lorsque l'élément est sélectionné.

Une fois que vous avez cliqué, le lien reste « sélectionné » (il y a une petite bordure en pointillés autour). C'est cela, la sélection.

Essayons pour l'instant sur les liens :
a:focus /* Quand le visiteur sélectionne le lien */ { background-color: #FFCC66; }
Il est possible d'appliquer un style à un lien vers une page qui a déjà été vue. Par défaut, le navigateur colore le lien en un violet assez laid (de mon point de vue du moins !).

Vous pouvez changer cette apparence avec:visited(qui signifie « visité »). En pratique, sur les liens consultés, on ne peut pas changer beaucoup de choses à part la couleur (figure suivante).
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
color: #AAA; /* Appliquer une couleur grise */
}
Si vous ne souhaitez pas que les liens déjà visités soient colorés d'une façon différente, il vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms y compris !). Une exception notable : Google… ce qui est plutôt pratique, puisque l'on peut voir dans les résultats d'une recherche si on a déjà consulté ou non les sites que Google nous présente.
  • En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certains évènements se produisent. On utilise pour cela les pseudo-formats.
  • Le pseudo-format:hover permet de changer l'apparence au survol (par exemple :a:hover pour modifier l'apparence des liens lorsque la souris pointe dessus).
  • Le pseudo-format:active modifie l'apparence des liens au moment du clic,:visited lorsqu'un lien a déjà été visité.
  • Le pseudo-format:focus permet de modifier l'apparence d'un élément sélectionné.