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 oberen, rechten, unteren und linken Abstände vom Rand des Viewports definieren, die sicher für Inhalte genutzt werden können, ohne Gefahr zu laufen, durch die Form eines nicht-rechteckigen Displays abgeschnitten zu werden. Bei rechteckigen Viewports, wie bei einem durchschnittlichen Laptop-Monitor, ist ihr Wert gleich null. Bei nicht-rechteckigen Displays – wie einem runden Uhrendisplay – bilden die vom User-Agent gesetzten vier Werte ein Rechteck, sodass alle Inhalte innerhalb des Rechtecks sichtbar sind.

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

Die maximalen Einfügungsumgebungsvariablen des sicheren Bereichs repräsentieren den statischen Maximalwert ihres dynamischen Gegenstücks safe-area-inset-*.

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 Wert window-controls-overlay im display_override verwendet, können die titlebar-area-* Variablen genutzt werden, um sicherzustellen, dass Inhalte nicht mit den Fenstersteuerungsknöpfen (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 Bildschirmtastatur an. Sie definieren ein Rechteck durch seine oberen, rechten, unteren und linken Abstände vom Rand des Viewports (die Breiten- und Höhenabstände werden aus den anderen Einfügungen berechnet). Um mehr zu erfahren, siehe die VirtualKeyboard API.

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

Um dem Browser mitzuteilen, den gesamten verfügbaren Raum auf dem Bildschirm zu nutzen und uns so die Verwendung von 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-Buttons nicht von Gerätbehinweisungen am unteren Bildschirmrand verdeckt werden. Auf dem Desktop beträgt safe-area-inset-bottom 0. Auf Geräten jedoch, die Benachrichtigungen am unteren Bildschirmrand anzeigen, wie z. B. iOS, enthält es einen Wert, der Platz für die Anzeige der Benachrichtigung lässt. Dieser kann dann in den Wert für padding-bottom eingefügt werden, um eine Lücke zu erzeugen, die auf diesem Gerät natürlich wirkt.

<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 folgende Beispiel nutzt den optionalen zweiten Parameter von env(), der es Ihnen ermöglicht, einen Fallback-Wert bereitzustellen, 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, genauso wie die der benutzerdefinierten Eigenschaften, Kommata. Wenn der Eigenschaftswert jedoch 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 verwendet, nicht von den Fenstersteuerungsknöpfen des Betriebssystems verdeckt werden. Die titlebar-area-* Werte definieren ein Rechteck, in dem die Titelleiste normalerweise angezeigt worden wäre. Auf Geräten, die das Fenstersteuerungs-Overlay-Feature nicht unterstützen, wie z. B. Mobilgeräte, werden die Fallback-Werte verwendet.

So sieht eine auf einem Desktopgerät installierte PWA normalerweise aus:

Mit dem Fenstersteuerungs-Overlay-Feature decken die Webinhalte die gesamte Fensterfläche der App ab, während die Fenstersteuerungs- und PWA-Knöpfe als Overlays 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-benutzerdefinierten Eigenschaften (Variablen)
• Passen Sie das Fenstersteuerungs-Overlay der Titelleiste Ihrer PWA an
• Zeige Inhalte in der Titelleiste an
• Ausbrechen aus dem Kasten