Laptop mit HTML und CSS Code auf Schreibtisch
Tim, Kiya | 01.2.2024

Understanding the CSS env() Function

Web > Understanding the CSS env() Function

The use of the CSS function env() has paved its way into modern programming. This function allows the incorporation of user-agent-defined environment variables in CSS files.

What makes it different from custom properties are its global range for the document. The variables can hence be used in various parts of the code. The concept was originally put forward to ensure that content is displayed safely within the viewport. This feature is particularly useful on non-standard screen shapes such as those found on mobile devices.

Example

Let's have a look at these examples below:

1/* Using the four safe area inset values with no fallback values */
2env(safe-area-inset-top);
3env(safe-area-inset-right);
4env(safe-area-inset-bottom);
5env(safe-area-inset-left);
6
7/* Using them with fallback values */
8env(safe-area-inset-top, 20px);
9env(safe-area-inset-right, 1em);
10env(safe-area-inset-bottom, 0.5vh);
11env(safe-area-inset-left, 1.4rem);

Possible Values

Here are some possible values that the env() function can take.

1safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left, titlebar-area-x, titlebar-area-y, titlebar-area-width, titlebar-area-height, keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width, keyboard-inset-height

Check MDN Web Docs for detailed information.

Content
  • What is the CSS env() function?
  • How to use env() function with fallback values?
  • What are the possible values?
Tim Tilch
Tim (Softwareentwickler)

Als erfahrener Geodaten-Spezialist habe ich eine Leidenschaft für die Entwicklung und Visualisierung von Karten- und Geoinformationssystemen. Meine Expertise ermöglicht es mir, komplexe Geodaten verst... mehr anzeigen

GitlabGithub
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund