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.