Sélection de la langue

Contenu visible et invisible

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

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.

Limites

Les classes de convivialité réactives ne sont actuellement disponibles que pour le basculement de blocs et de tableaux. Leur utilisation avec des éléments incorporés et de tableaux n'est pas actuellement prise en charge.

Classes disponibles

Utilisez une seule ou une combinaison des classes CSS disponibles pour faire basculer du contenu entre des points d'arrêt de l'espace d'affichage (l'aire d'affichage à l'écran) (les points où l'utilisateur doit faire un défilement).

Montrer et cacher du contenu dans des espaces d'affichage différents à l'aide de styles CSS
Très petits appareils Téléphones (<768 px) Petits appareils Tablettes (≥768 px) Moyens appareils Ordinateurs de bureau (≥992 px) Grands appareils Ordinateurs de bureau (≥1200 px)
.visible-xs Visible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible
Apparence

Redimensionnez votre navigateur ou chargez la page sur des appareils différents pour vérifier les classes réactives de convivialité.

Visible sur ces résolutions....

La présence d'un crochet vert et du texte « Visible si » indique que l'élément est visible dans votre espace d'affichage actuel.

✔ Visible si la résolution est très petite
visible-xs
✔ Visible si la résolution est petite
visible-sm
Moyenne
hidden-md
✔ Visible si la résolution est moyenne
visible-md
✔ Visible si la résolution est grande
visible-lg
✔ Visible si la résolution est très petite ou petite
visible-xs visible-sm
✔ Visible si la résolution est moyenne ou grande
visible-md visible-lg
✔ Visible si la résolution est très petite ou moyenne
visible-xs visible-md
✔ Visible si la résolution est petite ou grande
visible-sm visible-lg
✔ Visible si la résolution est très petite ou grande
visible-xs visible-lg
✔ Visible si la résolution est petite ou moyenne
visible-sm visible-md
Apparence

Redimensionnez votre navigateur ou chargez la page sur des appareils différents pour vérifier les classes réactives de convivialité.

Caché sur ces résolutions...

La présence d'un crochet vert et du texte « Visible si » indique que l'élément est caché dans votre espace d'affichage actuel.

✔ Caché si la résolution est très petite
visible-xs
✔ Caché si la résolution est petite
visible-sm
Moyenne
hidden-md
✔ Caché si la résolution est moyenne
visible-md
✔ Caché si la résolution est grande
visible-lg
✔ Caché si la résolution est très petite ou petite
visible-xs visible-sm
✔ Caché si la résolution est moyenne ou grande
visible-md visible-lg
✔ Caché si la résolution est très petite ou moyenne
visible-xs visible-md
✔ Caché si la résolution est petite ou large
visible-sm visible-lg
✔ Caché si la résolution est très petite ou grande
visible-xs visible-lg
✔ Caché si la résolution est petite ou moyenne
visible-sm visible-md

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.

Apparence

1: Page 1 des résultats de recherche

(Texte du lien réel : 1: Page 1 des résultats de recherche)

Bonne utilisation

Points de conformité :

  • Utilisez .wb-inv pour cacher des éléments de contenu des utilisateurs visuels et pour créer des liens descriptifs destinés aux utilisateurs des technologies adaptées
  • Assurez-vous que le texte invisible est concis, descriptif et unique
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<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.

Bonne utilisation

Point d'observation :

  • L'utiliser avec du JavaScript personnalisé pour modifier la visibilité du contenu sur une page. Ces deux classes peuvent être utilisées dans les solutions de scripts
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<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.

Bonne utilisation

Points de conformité :

  • Utilisez la classe .visible-print ou .hidden-print pour inclure ou exclure du contenu lorsqu'un utilisateur imprime une page
  • Empêcher l'impression du contenu inutile, comme les menus et les graphiques décoratifs
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Montrer et cacher le contenu à imprimer à l'aide de styles CSS
Classe Navigateur Impression
.visible-print Visible
.hidden-print Visible

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

Date de modification: