env() CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the
var() function and custom properties. The difference is that, as well as being user-agent defined rather than user-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared.
In addition, unlike custom properties, which cannot be used outside of declarations, the
env() function can be used in place of any part of a property value, or any part of a descriptor (e.g. in Media query rules). As the spec evolves, it may also be usable in other places such as selectors.
Originally provided by the iOS browser to allow developers to place their content in a safe area of the viewport, the
safe-area-inset-* values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.
For example, a common issue solved by
env() is that of device notifications covering up some of the app user interface. By positioning fixed elements using
env() you can ensure that they display in a safe area of the viewport.
Another use case for
env() variables is for desktop Progressive web apps (PWAs) that use the Window Controls Overlay feature to take advantage of the full application window surface area. Using the
titlebar-area-* values, they can position elements where the title bar would have been and ensure that content stays clear of the window control buttons.