Custom Media Feature Flags

A fun use case for @custom-media queries is to toggle styles based on a feature flag.

Imagine an edge worker that toggles true or false in a CSS file, and the rest of your styles can tap in and adapt.

• A/B testing
• Unique user features
• Reveal Debug elements
• v2 layouts

you name it.

Syntax #

Define an enabled feature like:

@custom-media --feature-flag true;

Or a disabled feature like:

@custom-media --debug-flag false;

Use them like:

@media (--feature-flag) {
  body {
    …
  }
}

.component {
  @media (--debug-flag) {
    …
  }
}

Use nesting, query from JavaScript, or both.

More custom media #

The spec, a CSS Tricks article, post by Stefan Judis, a polyfill, a premade set in Open Props (anticipating the feature), and there's been good browser implementation activity recently in Firefox (marked FIXED!) and Chrome, not webkit as much.

I'm excited, it's a great feature.