Fondazione - Corsi di visibilità
Descrizione
Foundation utilizza classi di visibilità per mostrare o nascondere elementi in base all'orientamento del dispositivo (verticale e orizzontale) o alle dimensioni dello schermo (schermo piccolo, medio, grande o xlarge).
Consente a un utente di utilizzare elementi basati sull'ambiente di navigazione.
La tabella seguente elenca le classi di visibilità di Foundation, che controllano gli elementi in base al loro ambiente di navigazione:
| Sr.No. | Classe e descrizione di visibilità |
|---|---|
| 1 | Mostra per dimensione dello schermo Mostra gli elementi in base al dispositivo utilizzando la classe .show . |
| 2 | Nascondi per dimensione dello schermo Nasconde gli elementi in base al dispositivo utilizzando la classe .hide . |
Foundation supporta alcune classi in cui è possibile nascondere il contenuto utilizzando le classi .hide e .invisible e non visualizza nulla sulla pagina.
Rilevamento dell'orientamento
I dispositivi possono determinare diversi orientamenti utilizzando la funzionalità orizzontale e verticale . I dispositivi portatili come i telefoni cellulari specificano i diversi orientamenti quando vengono ruotati. Per il desktop, l'orientamento sarà sempre orizzontale.
Accessibilità
La tabella seguente elenca le tecniche di accessibilità per gli screen reader che nascondono il contenuto rendendolo leggibile dagli screen reader -
| Sr.No. | Classe e descrizione di accessibilità |
|---|---|
| 1 | Mostra per lettori di schermo Utilizza la classe show-for-sr per nascondere il contenuto impedendo ai lettori di schermo di leggerlo. |
| 2 | Nascondi per lettori di schermo Utilizza l' attributo aria-hidden che rende il testo visibile ma non può essere letto da uno screen reader. |
| 3 | Creazione di collegamenti di salto L'utilità per la lettura dello schermo creerà un collegamento di salto per ottenere la navigazione al contenuto del tuo sito. |
Riferimento Sass
Foundation utilizza i seguenti mixin per visualizzare l'output CSS, che consente di creare la propria struttura di classi per i componenti:
| Sr.No. | Mixin e descrizione | Parametro | genere |
|---|---|---|---|
| 1 | show-for Per impostazione predefinita, nasconde un elemento e lo visualizza al di sopra di determinate dimensioni dello schermo. |
$ size | Parola chiave |
| 2 | show-for-only Per impostazione predefinita, nasconde un elemento e lo visualizza all'interno del punto di interruzione. |
$ size | Parola chiave |
| 3 | hide-for Per impostazione predefinita, mostra un elemento e lo nasconde sopra una certa dimensione dello schermo. |
$ size | Parola chiave |
| 4 | hide-for-only Per impostazione predefinita, mostra un elemento e lo nasconde sopra una certa dimensione dello schermo. |
$ size | Parola chiave |
Il valore predefinito di tutti questi mixin sarà impostato su nessuno .