Fondation - Classes de visibilité
La description
Foundation utilise des classes de visibilité pour afficher ou masquer des éléments en fonction de l'orientation de l'appareil (portrait et paysage) ou de la taille de l'écran (petit, moyen, grand ou très grand écran).
Il permet à un utilisateur d'utiliser des éléments basés sur l'environnement de navigation.
Le tableau suivant répertorie les classes de visibilité de Foundation, qui contrôlent les éléments en fonction de leur environnement de navigation -
| N ° Sr. | Classe de visibilité et description |
|---|---|
| 1 | Afficher par taille d'écran Il montre les éléments basés sur l'appareil en utilisant la classe .show . |
| 2 | Masquer par taille d'écran Il masque les éléments basés sur l'appareil à l'aide de la classe .hide . |
Foundation prend en charge certaines classes dans lesquelles vous pouvez masquer le contenu à l'aide des classes .hide et .invisible et n'affiche rien sur la page.
Détection d'orientation
Les appareils peuvent déterminer différentes orientations en utilisant les fonctionnalités paysage et portrait . Les appareils portables tels que les téléphones portables spécifient les différentes orientations lorsque vous les faites pivoter. Pour le bureau, l'orientation sera toujours paysage.
Accessibilité
Le tableau suivant répertorie les techniques d'accessibilité pour les lecteurs d'écran qui masquent le contenu tout en le rendant lisible par les lecteurs d'écran -
| N ° Sr. | Classe d'accessibilité et description |
|---|---|
| 1 | Afficher pour les lecteurs d'écran Il utilise la classe show-for-sr pour masquer le contenu tout en empêchant les lecteurs d'écran de le lire. |
| 2 | Masquer pour les lecteurs d'écran Il utilise l' attribut masqué aria qui rend le texte visible mais ne peut pas être lu par un lecteur d'écran. |
| 3 | Création de liens de saut Le lecteur d'écran créera un lien de saut pour accéder au contenu de votre site. |
Référence Sass
Foundation utilise les mixins suivants pour afficher la sortie CSS, ce qui permet de créer sa propre structure de classe pour vos composants -
| N ° Sr. | Mixin et description | Paramètre | Type |
|---|---|---|---|
| 1 | show-for Par défaut, il masque un élément et l'affiche au-dessus d'une certaine taille d'écran. |
$ taille | Mot-clé |
| 2 | show-for-only Par défaut, il masque un élément et l'affiche dans le point d'arrêt. |
$ taille | Mot-clé |
| 3 | hide-for Par défaut, il affiche un élément et le cache au-dessus d'une certaine taille d'écran. |
$ taille | Mot-clé |
| 4 | hide-for-only Par défaut, il affiche un élément et le cache au-dessus d'une certaine taille d'écran. |
$ taille | Mot-clé |
La valeur par défaut de tous ces mixins sera définie sur aucun .