[csswg-drafts] [css-nesting?] Allow nesting `@media` inside `@font-face` (#11940)

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

== [css-nesting?] Allow nesting `@media` inside `@font-face` ==
Spec: https://drafts.csswg.org/css-nesting/#conditionals (?)

Could we allow nesting `@media` at-rules inside `@font-face`?

My use case would be conditionally loading an hinted or unhinted font:

```css
@font-face {
  font-family: 'The Font';
  src: url(the-font-hinted.woff2);

  @media (resolution >= 2x) {
    src: url(the-font-unhinted.woff2);
  }
}
```

Without nesting support (or `if()` support), we have to needlessly repeat the unchanged descriptors:

```css
@media (resolution < 2x) {
  font-family: 'The Font';
  src: url(the-font-hinted.woff2);
}

@media (resolution >= 2x) {
  font-family: 'The Font';
  src: url(the-font-unhinted.woff2);
}
```

This isn’t DRY and is annoying when there are lot of `@font-face` rules.

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


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

Received on Friday, 14 March 2025 20:04:06 UTC