Re: [csswg-drafts] [selectors][mediaqueries] :media() pseudo-class as a shortcut for one-off media queries (#6247)

If this comes out, please make sure it intuitively works with the `color-scheme:` property.

This currently does not work as intuitively expected based on CSS nesting:

```css
foo {
  color-scheme: only light;
}

bar {
  color: black

  @media (prefers-color-scheme: dark) {
    color: white;
  }
}
```
```html
This text is white in dark mode, or black in light mode.

<foo>
  <bar>
    I expected this text to always be black (light mode) because of the color-scheme override in foo (only light) forcing light mode for the subtree in foo
  </bar>
</foo>
```

This does not work: although `foo` has `color-scheme` set to `only light`, the media query nested inside of `bar` will still be triggered by the OS-level setting, instead of the nearest ancestor's `color-scheme` mode.

Here is a CodePen example showing the issue:

https://codepen.io/trusktr/pen/wBKJZRz

It makes intuitive sense for `color-scheme` to override the OS-level mode anywhere in the tree, especially for nested `@media`.

This already works fine for the `light-dark()` function, so a workaround for code that is made with `@media` that wishes to introduce app-specific light/dark settings is to port from media queries to `light-dark()` for all values. An alternative is to use JavaScript to place a `data-theme="dark"` attribute on `html` and use `[data-theme='dark']` or `:host-context([data-theme='dark'])` selectors (including nesting) instead of `@media`.

-- 
GitHub Notification of comment by trusktr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6247#issuecomment-3152269280 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 4 August 2025 20:25:22 UTC