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 Ober-, Rechts-, Unter- und Linkseinsätze vom Rand des Ansichtsfensters definieren, das sicher ist, um Inhalte ohne Risiko, dass diese von der Form eines nicht-rechteckigen Displays abgeschnitten werden, einzufügen. Für rechteckige Ansichtsfenster, wie der durchschnittliche Laptop-Monitor, ist ihr Wert gleich null. Bei nicht-rechteckigen Displays — wie ein rundes Uhrenzifferblatt — bilden die vier vom Benutzer-Agent festgelegten 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 Einsatzzonen der sicheren Bereiche Umgebungsvariablen repräsentieren den statischen Maximalwert ihres dynamischen safe-area-inset-* Variablenpendants.

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

Die titlebar-area-* Variablen sind nützlich für PWA auf Desktop-Geräten. Wenn eine Desktop-PWA den window-controls-overlay display_override Wert verwendet, kann sie die titlebar-area-* Variablen verwenden, um sicherzustellen, dass 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 liefern Informationen über das Erscheinen der Bildschirmtastatur. Sie definieren ein Rechteck durch ihre Ober-, Rechts-, Unter- und Linkseinsätze vom Rand des Ansichtsfensters (die Breiten- und Höheneinsätze werden aus den anderen Einsätzen berechnet). Weitere Informationen finden Sie in der VirtualKeyboard API.

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

Um dem Browser zu sagen, dass er den gesamten verfügbaren Platz auf dem Bildschirm nutzen soll, und somit die Verwendung der env()-Variablen zu ermöglichen, müssen wir einen neuen Ansichtsfenster-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-Schaltflächen nicht durch Gerätemitteilungen am unteren Bildschirmrand verdeckt werden. Auf dem Desktop ist safe-area-inset-bottom 0. In Geräten jedoch, die Mitteilungen am unteren Bildschirmrand anzeigen, wie iOS, enthält es einen Wert, der Platz für die Mitteilung lässt. Dieser kann dann im Wert für padding-bottom verwendet werden, um auf dem Gerät einen Spalt zu schaffen, der 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 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, wie die von benutzerdefinierten Eigenschaften, Kommata. Wenn jedoch 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 verwendet, nicht durch die Fenstertasten des Betriebssystems verdeckt werden. Die titlebar-area-* Werte definieren ein Rechteck, wo normalerweise die Titelleiste 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 in der Regel eine auf einem Desktop-Gerät installierte PWA aus:

Mit dem Window Controls Overlay-Feature decken die Webinhalte die gesamte Anwendungsfensteroberfläche ab, mit den Fenstertasten und PWA-Schaltflächen als Überlagerungen angezeigt:

<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 der Fenstertastenüberlagerung der Titelleiste Ihrer PWA
• Inhalt in der Titelleiste anzeigen
• Aus der Box ausbrechen