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

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors][mediaqueries] :media() pseudo-class as a shortcut for media queries ==
Authors often need to duplicate rules across media queries and selectors. For example, this kind of thing is common:

```css
@media (prefers-color-scheme: dark) {
 :root {
  /* dark mode rules */
 }
}

:root.dark {
 /* duplicated dark mode rules */
}
```

To my knowledge, there is no way to reduce this duplication currently, even if we take CSS nesting into account.

Also, often media queries only contain a single rule, and could benefit from a more concise syntax.

With this proposal, the code above would be written as:

```css
:root:is(.dark, :media(prefers-color-scheme: dark)) {
 /* dark mode rules */
}
```

Any `:media()` pseudos within a selector would desugar as media queries, joined with `and` and prepended with `not` accordingly (e.g. `:media(foo):not(:media(bar))` should desugar to `@media (foo) not (bar) {...}`).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6247 using your GitHub account


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

Received on Tuesday, 27 April 2021 11:26:39 UTC