env()

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left

Die safe-area-inset-* Variablen sind vier Umgebungsvariablen, die ein Rechteck durch seine Einzüge oben, rechts, unten und links vom Rand des Viewports definieren, in das Inhalte eingefügt werden können, ohne dass diese durch die Form eines nicht-rechteckigen Displays abgeschnitten werden. Für rechteckige Viewports, wie bei einem durchschnittlichen Laptop-Monitor, ist ihr Wert gleich null. Bei nicht-rechteckigen Displays — wie einem runden Uhrenzifferblatt — bilden die vom Benutzeragenten festgelegten vier Werte ein Rechteck, sodass alle Inhalte innerhalb dieses Rechtecks sichtbar sind.

titlebar-area-x, titlebar-area-y, titlebar-area-width, titlebar-area-height

Die titlebar-area-* Variablen sind nützlich für PWAs, die auf Desktop-Geräten installiert sind. Wenn eine Desktop-PWA den window-controls-overlay display_override Wert verwendet, kann sie die titlebar-area-* Variablen verwenden, um sicherzustellen, dass die Inhalte nicht mit den Fenstertasten (d.h. Minimieren, Maximieren und Schließen) überlappen.

keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width, keyboard-inset-height

Die keyboard-inset-* Variablen geben Informationen über das Erscheinen der virtuellen Bildschirmtastatur. Sie definieren ein Rechteck durch seine Einzüge oben, rechts, unten und links vom Rand des Viewports (die Breiten- und Höhen-Einzüge werden aus den anderen Einzügen berechnet). Weitere Informationen finden Sie in der VirtualKeyboard API.

<env()> = 
  env( <custom-ident> <integer [0,∞]>* , <declaration-value>? )  

Um dem Browser mitzuteilen, den gesamten verfügbaren Platz auf dem Bildschirm zu nutzen, und damit die Verwendung der env() Variablen zu ermöglichen, müssen wir einen neuen Viewport-Meta-Wert hinzufügen:

<meta name="viewport" content="viewport-fit=cover" />

Sie können dann env() in Ihrem CSS verwenden:

body {
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}

Im folgenden Beispiel wird env() verwendet, um sicherzustellen, dass feste App-Toolbar-Tasten nicht durch Gerätemitteilungen, die am unteren Rand des Bildschirms erscheinen, verdeckt werden. Auf dem Desktop ist safe-area-inset-bottom 0. Bei Geräten, die Mitteilungen am unteren Bildschirmrand anzeigen, wie iOS, enthält es einen Wert, der Platz für die Anzeige der Mitteilung lässt. Dieser kann dann im Wert für padding-bottom verwendet werden, um auf diesem Gerät einen natürlich erscheinenden Abstand zu schaffen.

<main>Main content of app here</main>
<footer>
  <button>Go here</button>
  <button>Or here</button>
</footer>

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 1em system-ui;
}

main {
  flex: 1;
  background-color: #eee;
  padding: 1em;
}

footer {
  flex: none;
  display: flex;
  gap: 1em;
  justify-content: space-evenly;
  background: black;
  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
  /* adds the safe-area-inset-bottom value to the initial 1em of padding.
  a larger black area will display for a device that has a positive value for this variable. */
  position: sticky;
  bottom: 0;
}

button {
  padding: 1em;
  background: white;
  color: black;
  margin: 0;
  width: 100%;
  border: none;
  font: 1em system-ui;
}

Das untenstehende Beispiel nutzt den optionalen zweiten Parameter von env(), der es ermöglicht, einen Fallback-Wert anzugeben, falls die Umgebungsvariable nicht verfügbar ist.

<p>
  If the <code>env()</code> function is supported in your browser, this
  paragraph's text will have 50px of padding between it and the left border —
  but not the top, right and bottom. This is because the accompanying CSS is the
  equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other CSS
  properties, user agent property names are case-sensitive.
</p>

p {
  width: 300px;
  border: 2px solid red;
  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
    env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
}

/* zero for all rectangular user agents */
padding: env(safe-area-inset-bottom, 50px);

/* 50px because UA properties are case sensitive */
padding: env(Safe-area-inset-bottom, 50px);

/* as if padding: '50px 20px' were set because x is not a valid environment variable */
padding: env(x, 50px 20px);

/* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
padding: env(x, 50px, 20px);

Die Syntax des Fallbacks erlaubt, wie auch bei benutzerdefinierten Eigenschaften, Kommata. Aber, wenn der Eigenschaftswert keine Kommata unterstützt, ist der Wert ungültig.

Im folgenden Beispiel stellt env() sicher, dass Inhalte, die in einer Desktop-Progressive Web App angezeigt werden, die die Window Controls Overlay API nutzt, nicht durch die Fenstertasten des Betriebssystems verdeckt werden. Die titlebar-area-* Werte definieren ein Rechteck, wo die Titelleiste normalerweise angezeigt worden wäre. Auf Geräten, die das Window Controls Overlay Feature nicht unterstützen, wie mobile Geräte, werden die Fallback-Werte verwendet.

So sieht eine PWA, die auf einem Desktop-Gerät installiert ist, normalerweise aus:

Mit dem Window Controls Overlay Feature bedecken die Webinhalte die gesamte Anwendungsfensterfläche, wobei die Fenstertasten und PWA-Tasten als Überlagerungen angezeigt werden:

<header>Title of the app here</header>
<main>Main content of app here</main>

header {
  position: fixed;
  left: env(titlebar-area-x);
  top: env(titlebar-area-y);
  width: env(titlebar-area-width);
  height: env(titlebar-area-height);
}

main {
  margin-top: env(titlebar-area-height);
}

• var(…)
• CSS Custom Properties für kaskadierende Variablen Modul
• Benutzerdefinierte Eigenschaften (--*): CSS-Variablen
• Verwendung von CSS Custom Properties (Variablen)
• Anpassen der Fenstersteuerungsüberlagerung der Titelleiste Ihrer PWA
• Inhalte in der Titelleiste anzeigen
• Breaking Out of the Box