CSS-Umgebungsvariablen

Das Modul CSS environment variables definiert das Konzept von Umgebungsvariablen und die Funktion env(). Umgebungsvariablen funktionieren ähnlich wie benutzerdefinierte Eigenschaften und die Funktion var(), mit dem Unterschied, dass sie global definiert sind; sie sind globale Variablen mit Gültigkeitsbereich für das gesamte Dokument. Es handelt sich um Werte des User Agents, die vom Browser oder Betriebssystem bereitgestellt werden und auf die Sie mit der Funktion env() zugreifen können, sodass Sie Ihre Stile an das Gerät oder den Kontext des Benutzers anpassen können.

Umgebungsvariablen stellen Werte bereit, die auf der Seite basierend auf Informationen verwendet werden können, auf die der User Agent Zugriff hat, beispielsweise die Größe der Titelleiste, der dynamischen Tastatur und der Safe-Area-Einzüge. Safe-Area-Einzüge definieren ein Rechteck, das auf nicht rechteckigen Displays garantiert sichtbar ist, basierend auf seinem Abstand zu den Rändern des Viewports. Sie können die Größen des User Agents in Ihre Stile einbeziehen, sodass Sie das Layout wesentlicher Inhalte basierend auf dem verfügbaren Platz innerhalb des Safe-Area-Rechtecks, neben einer sichtbaren dynamischen Tastatur oder angrenzend an eine sichtbare Titelleiste ändern können.