Contenu visible et invisible

• Modifier cette page
• Historique des révisions
• Questions ou commentaires?

Usage

Utilisez-le pour montrer ou cacher du contenu – tout dépend de ce que vous voulez accomplir. Il y a des styles propres aux technologies adaptées (aide aux utilisateurs de lecteur d'écran), à la conception réactive (vue à partir d'appareils petits ou grands), à l'usage général (utilisation d'onglets de basculement) et à l'impression (impression de l'information nécessaire seulement).

Conception et codage

Utilisation de base

Réactif – montrer et cacher

L'utiliser pour agrémenter la présentation du contenu sur chaque appareil. Pour le développement propice aux appareils mobiles, utilisez ces classes de convivialité pour montrer et cacher du contenu par appareil à l'aide d'une requête de média. Il y a aussi des classes de convivialité qui servent à faire basculer du contenu lorsque celui-ci est imprimé.

Tentez de limiter son utilisation et d'éviter de créer des versions entièrement différentes du même site.

Les lecteurs d'écran et le contenu invisible

Servez-vous-en pour découper du contenu dans un carré d'un pixel. Cela crée des liens qui sont descriptifs (et conformes), sans toutefois encombrer visuellement la page. Il arrive couramment que l'on emploie cette technique pour cibler les utilisateurs de technologies adaptées. Par exemple, les utilisateurs de lecteur d'écran entendent l'information, mais les utilisateurs visuels ni ne l'entendent ni ne la lisent. L'attribut CSS display: none; ne donne pas le même résultat, puisque les lecteurs d'écran l'ignorent entièrement.

<a class="button button-small" href="#">1<span class="wb-inv">: Page 1 des résultats de recherche</span></a>

Généralités – montrer et cacher

Les utiliser pour forcer un élément à se montrer ou se cacher à l'aide de la classe .show ou .hidden. Ces classes utilisent !important.

Utilisez .invisible pour faire basculer seulement la visibilité d'un élément; l'affichage display n'est pas modifié, et l'élément a toujours une incidence sur le flux du document.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

Impression – montrer et cacher

Utilisez ces classes pour basculer vers le contenu à imprimer.

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification:

2019-04-11