CSS Function - env()

The env() function in CSS is useful in adding a value to a user-defined environment variable in your CSS, just like var() function and other custom properties. Environment variables are typically provided by the user agent (e.g., the web browser) and can be used in CSS to adapt styles based on various factors, such as device characteristics or user preferences.

Environment variables can be used in place of any part of a property value or any part of the descriptor, such as in media query rules.

Possible values

The env() function can have following values:

  • safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left: variables define a rectangle by its top, right, bottom and left insets from the viewport's edge.

    • These insets are safe to place the content, without getting being cut by the shape of a non-rectangular display.

    • The value remains zero, for rectangular viewports, such as laptop monitor.

    • For a non-rectangular display, such as a watch face, the four values are set such that they create a rectangle, so that content is clearly visible inside the rectangle.

  • titlebar-area-x, titlebar-area-y, titlebar-area-width, titlebar-area-height: used for PWA installed on desktop devices. The variables does not allow overlapping of the content with window control buttons (minimize, maximize and close).

  • keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width, keyboard-inset-height: states the details about the appearance of on-screen virtual keyboard. variables define a rectangle by its top, right, bottom and left insets from the viewport's edge. Width and height insets are measured based on other inset values.

The user-defined property names are case-sensitive, unlike other CSS properties.

Syntax

property: env(variable-name, [fallback]);

  • variable-name: The name of the environment variable.

  • [fallback]: (Optional). A fallback value to be used if the environment variable is not defined.

The syntax of the fallback permits use of commas, like the other custom properties. But, in case the property value doesn't support commas, the value is considered as invalid.

The user-defined properties are not reset by all property.

CSS env() - Combination of Values

Following example demonstrates the use of env() function with values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left:

<html>
<head>
<style>
   .text-style {
      background-color: darkblue;
      width: max-content;
      color: white;
      font-size: 25px;
      border: env(SAFE-AREA-INSET-TOP, 10px) inset lightblue;
      padding: 10px;
      padding: env(SAFE-AREA-INSET-TOP, 2.5em)
               env(SAFE-AREA-INSET-RIGHT, 2.5em) 
               env(SAFE-AREA-INSET-BOTTOM, 2.5em) 
               env(SAFE-AREA-INSET-LEFT, 2.5em)
   }
</style>
</head> 
<body>
    <h2>env() function example</h2>
    <p class="text-style">padding added through environment variables</p>
</body>
</html>
Advertisements