CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 6 · Exercice de TD
Lien d'évitement
Positionnement et empilement · niveau 2
Énoncé
Écrire le CSS d'un lien d'évitement invisible tant qu'il n'a pas le focus, et qui apparaît à 1 rem du haut et de la gauche de la page quand on presse Tab. Pourquoi ne pas simplement utiliser display: none puis display: block au focus ?
Corrigé
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 16px;
font-family: system-ui, sans-serif;
}
.evitement {
position: absolute;
top: -3rem;
left: 1rem;
padding: 0.5rem 1rem;
background: #fff;
border: 2px solid #1f3a68;
}
.evitement:focus {
top: 1rem;
}
Le lien est en position: absolute, poussé au-dessus de la page (top: -3rem) ; au focus, il redescend en top: 1rem. Chromium, après focus() : lien en . Un élément en display: none ne peut pas recevoir le focus : la touche Tab passerait par-dessus, et le lien n'apparaîtrait jamais.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.