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).
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 | Caché | Caché | Caché |
.visible-sm |
Caché | Visible | Caché | Caché |
.visible-md |
Caché | Caché | Visible | Caché |
.visible-lg |
Caché | Caché | Caché | Visible |
.hidden-xs |
Caché | Visible | Visible | Visible |
.hidden-sm |
Visible | Caché | Visible | Visible |
.hidden-md |
Visible | Visible | Caché | Visible |
.hidden-lg |
Visible | Visible | Visible | Caché |
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.
hidden-xs
✔ Visible si la résolution est très petitevisible-xs
hidden-sm
✔ Visible si la résolution est petitevisible-sm
hidden-md
✔ Visible si la résolution est moyennevisible-md
hidden-lg
✔ Visible si la résolution est grandevisible-lg
visible-xs visible-sm
visible-md visible-lg
visible-xs visible-md
visible-sm visible-lg
visible-xs visible-lg
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.
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
Classe | Navigateur | Impression |
---|---|---|
.visible-print |
Caché | Visible |
.hidden-print |
Visible | Caché |
Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).
- Date de modification: