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.