Styliser les états interactifs

Un lien ou un bouton ne doit pas sembler identique dans toutes les situations : une personne peut le survoler avec un pointeur, le sélectionner au clavier ou l’activer. Si ces changements ne sont pas perceptibles, il devient plus difficile de comprendre quand un contrôle est prêt à être utilisé ou s’il a été activé. Vous allez ajouter des styles distincts aux états interactifs de la page de présentation de l’atelier de jardinage.

Vous avez déjà appris à cibler les éléments par balise, classe, identifiant et descendant dans la leçon « Cibler les éléments d’une page ». Ici, vous ajoutez à ces sélecteurs une pseudo-classe : elle cible un élément selon son état, sans modifier le HTML.

Distinguer le survol, le focus et l’activation

La pseudo-classe :hover s’applique lorsqu’un pointeur se trouve au-dessus d’un élément. :focus s’applique lorsqu’un lien ou un bouton reçoit le focus, par exemple après une sélection au clavier. Enfin, :active correspond au moment où le contrôle est activé, comme pendant l’appui sur un bouton de souris.

Dans les exemples, le lien de contact possède la classe contact-link et le bouton d’inscription la classe inscription-button. Ces classes servent à viser précisément les deux contrôles. Les règles ci-dessous peuvent être ajoutées à votre feuille externe style.css.

:root {
    --vert-atelier: #276749;
    --vert-sombre: #1f5139;
    --blanc: #ffffff;
}

.contact-link {
    color: var(--vert-atelier);
    text-decoration: underline;
    transition: color 160ms ease, text-decoration-thickness 160ms ease;
}

.contact-link:hover {
    color: var(--vert-sombre);
    text-decoration-thickness: 2px;
}

.inscription-button {
    padding: 0.75rem 1rem;
    border: 2px solid var(--vert-atelier);
    border-radius: 0.35rem;
    background-color: var(--vert-atelier);
    color: var(--blanc);
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.inscription-button:hover {
    background-color: var(--vert-sombre);
}

.contact-link:focus-visible,
.inscription-button:focus-visible {
    outline: 3px solid var(--vert-sombre);
    outline-offset: 3px;
}

.inscription-button:active {
    transform: translateY(1px);
}

Au survol, le lien fonce et son soulignement s’épaissit ; le bouton fonce également. Pendant l’activation, le bouton descend d’un pixel, ce qui donne un retour visuel bref. Les propriétés indiquées dans transition évoluent progressivement pendant 160 millisecondes : sans transition, le changement se ferait immédiatement.

Garder un focus visible

La pseudo-classe :focus-visible permet d’afficher un repère quand le navigateur estime qu’il est nécessaire, notamment lors d’une navigation au clavier. La propriété outline dessine ce contour autour du contrôle ; outline-offset l’écarte légèrement de sa bordure. Ne supprimez pas le contour natif sans fournir un indicateur de remplacement visible.

Vous pouvez aussi écrire une règle avec :focus si vous souhaitez appliquer le même repère chaque fois que l’élément reçoit le focus, y compris après une interaction à la souris. Pour cette page, :focus-visible évite généralement d’ajouter un contour systématique après un clic, tout en gardant un repère adapté à la navigation au clavier. Testez le comportement avec la touche Tab et vérifiez que le contour reste visible.

À retenir

• :hover distingue un élément survolé ; :active marque son activation.
• :focus-visible permet de repérer visuellement un contrôle sélectionné, notamment au clavier.
• Une transition rend progressif le changement des propriétés indiquées, sans remplacer les styles d’état.
• Conservez un contour de focus visible et testez les contrôles avec la touche Tab.

Dans la suite du parcours, vous vérifierez la lisibilité et le contraste des styles appliqués aux différents éléments de la page.