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

Might be more interesting to leverage `@scope` as mentioned n the examples.
https://drafts.csswg.org/css-cascade-6/#scoped-styles

```css
@scope (.light-scheme) {
  a { color: darkmagenta; }
}

@scope (.dark-scheme) {
  a { color: plum; }
}
```

With `when` it could become :

```css
@when media(prefers-color-scheme: dark) or scope(.dark) {
  /* styles */
}
```

------

I do think it will have some weird side-effects to mix conditional at-rules and selectors:

```css
@when media(prefers-color-scheme: dark) {
  @layer foo {
    /* this is fine */
  }
}
```

```css
.dark {
  @layer foo {
    /* this is not fine */
  }
}
```

```css
@when media(prefers-color-scheme: dark) or scope(.dark) {
  @layer foo {
    /* ?? */
  }
}
```

Same is true for other syntax proposals.

```css
:root {
  @media (prefers-color-scheme: dark),
  &.dark {
    @layer foo {
      /* ?? */
    }
  }
}
```

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


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

Received on Thursday, 22 September 2022 17:00:13 UTC