Variables in media queries

[theetrain]

Specification

• https://drafts.csswg.org/css-env-1/

Description

The ability to use environment variables with env() in media queries for centrally-managed breakpoints and other parameters.

• Relates to Custom media queries developer-signals#445

Documentation

• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Environment_variables/Using
• [css-env] Adding custom env() variables w3c/csswg-drafts#2627

<style env-nav-width="400px">
  @media (width < env(--nav-width)) {
    /* */
  }
</style>

Browser support

No support yet as it's an early draft.

[jakearchibald]

It isn't quite the same, but there is @custom-media to de-dupe media queries https://www.w3.org/TR/mediaqueries-5/#custom-mq