Foundation - Sichtbarkeitsklassen
Beschreibung
Foundation verwendet Sichtbarkeitsklassen, um Elemente basierend auf der Geräteorientierung (Hoch- und Querformat) oder der Bildschirmgröße (kleiner, mittlerer, großer oder großer Bildschirm) anzuzeigen oder auszublenden.
Es ermöglicht einem Benutzer, Elemente basierend auf der Browserumgebung zu verwenden.
In der folgenden Tabelle sind die Sichtbarkeitsklassen von Foundation aufgeführt, die die Elemente basierend auf ihrer Browserumgebung steuern.
| Sr.Nr. | Sichtbarkeitsklasse & Beschreibung |
|---|---|
| 1 | Nach Bildschirmgröße anzeigen
Es zeigt die Elemente basierend auf dem Gerät mithilfe der .show- Klasse. |
| 2 | Nach Bildschirmgröße ausblenden
Es versteckt die Elemente basierend auf dem Gerät mithilfe der .hide- Klasse. |
Foundation unterstützt einige Klassen, in denen Sie den Inhalt mithilfe der Klassen .hide und .invisible ausblenden können , und zeigt nichts auf der Seite an.
Orientierungserkennung
Die Geräte können mithilfe der Quer- und Hochformatfunktionen unterschiedliche Ausrichtungen bestimmen . Die Handgeräte wie Mobiltelefone geben die unterschiedlichen Ausrichtungen an, wenn Sie sie drehen. Für den Desktop ist die Ausrichtung immer Querformat.
Barrierefreiheit
In der folgenden Tabelle sind die Eingabehilfen für Bildschirmleser aufgeführt, mit denen der Inhalt ausgeblendet und für Bildschirmleser lesbar gemacht wird.
| Sr.Nr. | Zugänglichkeitsklasse & Beschreibung |
|---|---|
| 1 | Für Bildschirmleser anzeigen
Es verwendet die show-for-sr- Klasse, um den Inhalt auszublenden und gleichzeitig zu verhindern, dass Bildschirmleser ihn lesen. |
| 2 | Für Bildschirmleser ausblenden
Es verwendet ein Aria-Hidden- Attribut, das Text sichtbar macht, aber von einem Bildschirmleser nicht gelesen werden konnte. |
| 3 | Überspringen von Links
Der Screenreader erstellt einen Sprunglink, um zur Navigation zum Inhalt Ihrer Website zu gelangen. |
Sass Referenz
Foundation verwendet die folgenden Mixins, um die CSS-Ausgabe anzuzeigen, mit der Sie eine eigene Klassenstruktur für Ihre Komponenten erstellen können:
| Sr.Nr. | Mixin & Beschreibung | Parameter | Art |
|---|---|---|---|
| 1 |
show-for Standardmäßig wird ein Element ausgeblendet und oberhalb einer bestimmten Bildschirmgröße angezeigt. |
$ Größe | Stichwort |
| 2 |
show-for-only Standardmäßig wird ein Element ausgeblendet und innerhalb des Haltepunkts angezeigt. |
$ Größe | Stichwort |
| 3 |
hide-for Standardmäßig wird ein Element angezeigt und über einer bestimmten Bildschirmgröße ausgeblendet. |
$ Größe | Stichwort |
| 4 |
hide-for-only Standardmäßig wird ein Element angezeigt und über einer bestimmten Bildschirmgröße ausgeblendet. |
$ Größe | Stichwort |
Der Standardwert aller dieser Mixins wird auf none gesetzt .