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 .