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. Es ist sicher, Inhalte in diese Bereiche zu platzieren, ohne zu riskieren, dass sie durch die Form eines nicht-rechteckigen Displays abgeschnitten werden. Für rechteckige Ansichtsfenster, wie Ihr durchschnittlicher Laptop-Monitor, beträgt ihr Wert null. Für nicht-rechteckige Displays — wie ein rundes Uhrendisplay — bilden die vier vom Benutzeragenten gesetzten Werte ein Rechteck, so dass alle Inhalte innerhalb des 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 Desktopgeräten installiert sind. Wenn eine Desktop-PWA den window-controls-overlay display_override Wert verwendet, kann sie die titlebar-area-* Variablen nutzen, um sicherzustellen, dass Inhalte nicht mit den Fenstersteuerungsschaltflächen (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 liefern Informationen über das Erscheinen der virtuellen Bildschirmtastatur. Sie definieren ein Rechteck durch seine oberen, rechten, unteren und linken Einzüge vom Rand des Ansichtsfensters (die Breiten- und Höheneinzüge werden von 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 verwenden und uns so zu ermöglichen, die env()-Variablen zu nutzen, 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-Werkzeugleistenschaltflächen nicht von Gerätebenachrichtigungen verdeckt werden, die am unteren Rand des Bildschirms erscheinen. Auf dem Desktop ist safe-area-inset-bottom 0. Bei 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 im Wert von padding-bottom verwendet werden, um eine Lücke zu schaffen, die auf diesem Gerät natürlich erscheint.

<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 unten stehende Beispiel nutzt den optionalen zweiten Parameter von env(), der es ermöglicht, einen Ersatzwert 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, ähnlich wie bei benutzerdefinierten Eigenschaften, erlaubt 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 Fenstersteuerungsschaltflächen 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 Mobilgeräte, werden die Fallback-Werte verwendet.

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

Mit dem Window Controls Overlay-Feature decken die Webinhalte die gesamte Anwendungsfensterfläche ab, wobei die Fenstersteuerungsschaltflächen und PWA-Schaltflächen 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 benutzerdefinierte Eigenschaften für kaskadierende Variablen Modul
• Benutzerdefinierte Eigenschaften (--*): CSS-Variablen
• Verwendung von CSS-Benutzerdefinierten Eigenschaften (Variablen)
• Passen Sie die Fenstersteuerungs-Überlagerung der Titelleiste Ihrer PWA an
• Inhalte in der Titelleiste anzeigen
• [Raus aus der Box]((https://alistapart.com/article/breaking-out-of-the-box/)