{
  "$type": "site.standard.document",
  "description": "Use true or false queries",
  "path": "/custom-media-feature-flags",
  "publishedAt": "2025-12-06T04:32:46.872Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "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.",
  "title": "Custom Media Feature Flags"
}