Adloun

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

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →