Création d`apparences dynamiques

Chapitre
10
Création d'apparences dynamiques
Diculté :
C
'est une de ses forces : le CSS nous permet aussi de modier l'apparence des éléments
de façon dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois
que la page a été chargée. Nous allons faire appel à une fonctionnalité puissante du
CSS : les pseudo-formats.
Nous verrons dans ce chapitre comment changer l'apparence :
au survol ;
lors du clic ;
lors du focus (élément sélectionné) ;
lorsqu'un lien a été consulté.
Vous allez voir que le langage CSS n'a pas ni de nous étonner !
125
CHAPITRE 10.
CRÉATION D'APPARENCES DYNAMIQUES
Au survol
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 :
1
2
a : hover
{
3
4
}
:hover signie 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énir 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 :
1
2
3
4
5
6
a /* Liens par d é faut ( non survol é s ) */
{
text - decoration : none ;
color : red ;
font - style : italic ;
}
7
8
9
10
11
12
a : hover /* Apparence au survol des liens */
{
text - decoration : underline ;
color : green ;
}
On a déni ici deux versions des styles pour les liens :
pour les liens par défaut (non survolés) ;
pour les liens au survol.
Le résultat se trouve à la gure 10.1.
Sympa, n'est-ce pas ?
Même si on l'utilise souvent sur les liens, vous pouvez modier l'apparence de n'importe
quel élément. Par exemple, vous pouvez modier l'apparence des paragraphes lorsqu'on
pointe dessus :
1
2
p : hover /* Quand on pointe sur un paragraphe */
{
3
4
}
126
AU CLIC ET LORS DE LA SÉLECTION
Figure 10.1 Changement d'apparence au survol de la souris
Au clic et lors de la sélection
Vous pouvez interagir encore plus nement 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 :
1
2
3
4
a : active /* Quand le visiteur clique sur le lien */
{
background - color : # FFCC66 ;
}
127
CHAPITRE 10.
:focus
CRÉATION D'APPARENCES DYNAMIQUES
: lorsque l'élément est sélectionné
Là, c'est un peu diérent. Le pseudo-format :focus applique un style lorsque l'élément
est sélectionné.
C'est-à-dire ?
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.
Ce pseudo-format pourra être appliqué à d'autres balises HTML que nous
n'avons pas encore vues, comme les éléments de formulaires.
Essayons pour l'instant sur les liens :
1
2
3
4
a : focus /* Quand le visiteur s é lectionne le lien */
{
background - color : # FFCC66 ;
}
Sous Google
Chrome et Safari, l'eet ne se voit que si l'on appuie sur la
touche Tab .
Lorsque le lien a déjà été consulté
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 signie visité ). En pratique, sur les liens consultés, on ne peut pas changer beaucoup de choses à part la
couleur (gure 10.2).
1
2
3
4
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 diérente, il
vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites
web font cela (le Site du Zéro y compris !). Une exception notable : Google. . . ce qui
128
LORSQUE LE LIEN A DÉJÀ ÉTÉ CONSULTÉ
Figure 10.2 Liens visités en gris
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 résumé
En CSS, on peut modier 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 modier l'apparence des liens lorsque la souris pointe dessus).
Le pseudo-format :active modie l'apparence des liens au moment du clic, :visited
lorsqu'un lien a déjà été visité.
Le pseudo-format :focus permet de modier l'apparence d'un élément sélectionné.
129