Fundación - Clases de visibilidad
Descripción
Foundation utiliza clases de visibilidad para mostrar u ocultar elementos según la orientación del dispositivo (vertical y horizontal) o el tamaño de la pantalla (pantalla pequeña, mediana, grande o xlarge).
Permite a un usuario utilizar elementos basados en el entorno de navegación.
La siguiente tabla enumera las clases de visibilidad de Foundation, que controlan los elementos según su entorno de navegación:
| No Señor. | Clase de visibilidad y descripción |
|---|---|
| 1 | Mostrar por tamaño de pantalla Muestra los elementos basados en el dispositivo usando la clase .show . |
| 2 | Ocultar por tamaño de pantalla Oculta los elementos basados en el dispositivo usando la clase .hide . |
Foundation admite algunas clases en las que puede ocultar el contenido utilizando las clases .hide y .invisible y no muestra nada en la página.
Detección de orientación
Los dispositivos pueden determinar diferentes orientaciones utilizando la funcionalidad horizontal y vertical . Los dispositivos portátiles, como los teléfonos móviles, especifican las diferentes orientaciones cuando los gira. Para el escritorio, la orientación será siempre horizontal.
Accesibilidad
La siguiente tabla enumera las técnicas de accesibilidad para lectores de pantalla que ocultan el contenido y lo hacen legible para los lectores de pantalla:
| No Señor. | Clase de accesibilidad y descripción |
|---|---|
| 1 | Mostrar para lectores de pantalla Utiliza la clase show-for-sr para ocultar el contenido y evitar que los lectores de pantalla lo lean. |
| 2 | Ocultar para lectores de pantalla Utiliza el atributo aria-hidden que hace que el texto sea visible pero que un lector de pantalla no puede leer. |
| 3 | Crear enlaces de omisión El lector de pantalla creará un enlace de salto para obtener la navegación al contenido de su sitio. |
Referencia de Sass
Foundation utiliza los siguientes mixins para mostrar la salida CSS, lo que permite crear una estructura de clase propia para sus componentes:
| No Señor. | Mixin y descripción | Parámetro | Tipo |
|---|---|---|---|
| 1 | show-for De forma predeterminada, oculta un elemento y lo muestra por encima de cierto tamaño de pantalla. |
$ tamaño | Palabra clave |
| 2 | show-for-only De forma predeterminada, oculta un elemento y lo muestra dentro del punto de interrupción. |
$ tamaño | Palabra clave |
| 3 | hide-for De forma predeterminada, muestra un elemento y lo oculta por encima de un determinado tamaño de pantalla. |
$ tamaño | Palabra clave |
| 4 | hide-for-only De forma predeterminada, muestra un elemento y lo oculta por encima de un determinado tamaño de pantalla. |
$ tamaño | Palabra clave |
El valor predeterminado de todos estos mixins se establecerá en ninguno .