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 ihre oberen, rechten, unteren und linken Einzüge vom Rand des Ansichtsfensters definieren, in das der Inhalt eingefügt werden kann, ohne dass er durch die Form eines nicht rechteckigen Displays abgeschnitten wird. Für rechteckige Ansichtsfenster, wie etwa ein durchschnittlicher Laptop-Bildschirm, ist ihr Wert gleich null. Bei nicht rechteckigen Displays - wie etwa einem runden Zifferblatt - bilden die vier vom Benutzeragenten festgelegten Werte ein Rechteck, sodass der gesamte Inhalt innerhalb des Rechtecks sichtbar ist.

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

Die maximalen Einzüge der sicheren Zone-Umgebungsvariablen stellen den statischen Maximalwert ihrer dynamischen safe-area-inset-* Variablenentsprechung dar.

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, können sie die titlebar-area-* Variablen nutzen, um sicherzustellen, dass der Inhalt nicht mit den Fenstersteuerungsschaltflächen überlappt (d.h. Minimieren, Maximieren und Schließen).

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

Die keyboard-inset-* Variablen liefern Informationen über das Erscheinen der Bildschirmtastatur. Sie definieren ein Rechteck durch seine oberen, rechten, unteren und linken Einzüge vom Rand des Ansichtsfensters (die Breiten- und Höhenansätze werden aus den anderen Einzügen berechnet). Um mehr zu erfahren, siehe die VirtualKeyboard API.

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

Um dem Browser mitzuteilen, dass der gesamte verfügbare Platz auf dem Bildschirm genutzt werden soll, und uns so die Verwendung der env() Variablen ermöglicht, müssen wir einen neuen Meta-Wert für das Ansichtsfenster 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-Schaltflächen nicht von Gerätebenachrichtigungen verdeckt werden, die unten auf dem Bildschirm erscheinen. Auf dem Desktop ist safe-area-inset-bottom 0. Auf Geräten, die Benachrichtigungen am unteren Bildschirmrand anzeigen, wie iOS, enthält es jedoch einen Wert, der Platz für die Anzeige der Benachrichtigung lässt. Dieser Wert kann dann in dem Wert für padding-bottom verwendet werden, um einen Abstand zu schaffen, der 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 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, ähnlich wie bei benutzerdefinierten Eigenschaften, Kommata. Aber wenn der Eigenschaftswert keine Kommata unterstützt, ist der Wert nicht gültig.

Im folgenden Beispiel stellt env() sicher, dass der in einer Desktop Progressive Web App angezeigte Inhalt, der die Window Controls Overlay API verwendet, nicht von den Fenstersteuerungsschaltflächen des Betriebssystems verdeckt wird. Die titlebar-area-* Werte definieren ein Rechteck, in dem die Titelleiste normalerweise angezeigt worden wäre. Auf Geräten, die das Fenstersteuerungsoverlay-Feature nicht unterstützen, wie mobile Geräte, werden die Fallback-Werte verwendet.

So sieht normalerweise eine auf einem Desktop-Gerät installierte PWA aus:

Mit dem Fenstersteuerungsoverlay-Feature deckt der Web-Inhalt die gesamte Anwendungsfensteroberfläche ab, mit den Fenstersteuerungen und PWA-Schaltflächen, die 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 benutzerdefinierte Eigenschaften für Kaskadierende Variablen Modul
• Benutzerdefinierte Eigenschaften (--*): CSS Variablen
• Verwendung von CSS benutzerdefinierten Eigenschaften (Variablen)
• Anpassen des Overlays der Fenstersteuerung in der Titelleiste Ihrer PWA
• Anzeige von Inhalten in der Titelleiste
• Ausbrechen aus der Box