CSS Features

First Public Working Draft · css-env

CSS Environment Variables Module

1 function defined by this specification, all known to at least one browser .

Modern CSS features in this module: Viewport segments.

Read the Editor's Draft ↗ W3C First Public Working Draft ↗

The feature in detail

env()

Function Baseline: widely availablesince July 2022 Modern CSS: Viewport segments

MDN The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS. Alternatively env() can be used to make dynamic values in external SVG files which updated using the link-parameters CSS property.

Live preview Example from MDN 
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 1em system-ui;
}

main {
  flex: 1;
  background-color: #eeeeee;
  padding: 1em;
}

footer {
  flex: none;
  display: flex;
  gap: 1em;
  justify-content: space-evenly;
  background: black;
}

button {
  padding: 1em;
  background: white;
  color: black;
  margin: 0;
  width: 100%;
  border: none;
  font: 1em system-ui;
}

footer {
  position: sticky;
  bottom: 0;

  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
}

Syntax

env( <custom-ident> <integer [0,∞]>*, <declaration-value>? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 69
Edge 79
Firefox 65
Safari 11.1
Chrome Android 69
Safari iOS 11.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗