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.

Ver todos los episodios