Re: [csswg-drafts] [css-fonts-4][css-nesting] Nesting of @supports inside @font-face and font technology feature queries (#6520)

One note of caution - we have to consider how authors will achieve progressive enhancement on new browsers, while continuing to make their page work on old browsers. So, if we do something like this, it's more likely authors will be saying something like

```
@font-face {
    font-family: jewel;
    font-weight: 400;
    src: url(jewel-fallback.woff2) format("woff2");
}
@supports  font-technology(color-COLRv1) {
    @font-face {
        font-family: jewel;
        font-weight: 400;
        src: url(jewel-v1.woff2) format("woff2");
    }
}
```

(I added the `font-weight` descriptor, because it's not unreasonable to do so, and it helps inform the below point.)

This behaves differently than the existing progressive enhancement behavior of the `src` descriptor:

```
@font-face {
    font-family: jewel;
    src: url(jewel-fallback.woff2) format("woff2");
    src: url(jewel-v1.woff2) format("woff2" supports(COLRv1));
}
```

In the second example, if the browser doesn't understand the new syntax, or "COLRv1", the entire `src` line falls back wholesale. However, in the first example, the browser would see both `@font-face` declarations together.

If the second `@font-face` declaration has exactly the same descriptors, it will shadow the first one, and all is good. But, if the second one has a typo, the author has suddenly made a family with 2 fonts, and it's possible of half or even all of their text erroneously gets rendered with the wrong font.


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


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

Received on Wednesday, 25 August 2021 16:33:10 UTC