SSF-U – Einheitlicher Standard für Vollbildmodus

Definitionen

Der SSF-U-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Vollbildmodus fest.

Struktur und Semantik

Vorbereitung der Umgebung

Für eine korrekte Darstellung in einer HTML-Datei ist der Meta-Tag viewport mit den Werten width=device-width, initial-scale=1.0, viewport-fit=cover erforderlich.

Der Inhalt nutzt die gesamte physische Bildschirmfläche aus, einschließlich der Bereiche unter dem „Pony“ und der Systemanzeige Home; Container und Leisten müssen korrekt auf den gesamten Bildschirm skaliert werden, ohne dass wichtige Inhalte abgeschnitten werden.

Dynamische Höhe

Die Hauptmaßeinheit dvb hilft dabei, den verfügbaren Platz beim Ein-und Ausblenden von Browser-Leisten neu zu berechnen:

.fullscreen {
  min-block-size: 100dvb; /* dynamische Höhe */
}

Barrierefreiheit

Bei modernen Smartphones ist der untere Teil des Bildschirms für die Systemleiste für Gesten reserviert (env(safe-area-inset-bottom)), wodurch ein versehentliches Schließen der App beim Antippen der unteren Schaltflächen verhindert wird:

.bottom-action-panel {
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
}

„Nach unten“-Symbol

Informiert den Nutzer über das Vorhandensein von Inhalten unterhalb der Faltlinie; die Variable wird verwendet, damit das Symbol immer über der Leiste angezeigt wird:

.scroll-indicator {
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

Interaktivität und Visuelle Rückmeldung

Scroll- und Tastatursteuerung

Um ein „Gummiband-Scrollen“ zu verhindern, kann der folgende Code verwendet werden:

.main-screen {
  overscroll-behavior-block: none;
}

Beispiel für eine vollständige Implementierung

:root {
  --safe-offset: 16px; /* Grundabstand für Schaltflächen und Symbole */
}

.fullscreen {
  min-block-size: 100dvb;
  display: flex;
  flex-direction: column;
  overscroll-behavior-block: none;
}

.bottom-action-panel {
  position: fixed;
  inset-block-end: 0;
  inline-size: 100%;
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.scroll-indicator {
  position: absolute;
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}