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

The typical use-case here is that there are multiple resources available, each based on different font technologies, and the author wants to use the single "best" one that is supported by the UA. The alternatives should be "hidden" so that the UA doesn't waste time (and bandwidth) on them.

Doing this entirely with `@supports` becomes increasingly cumbersome as more technologies are considered, as each `@supports` block is independently defined; to ensure that exactly one of the alternatives is chosen by any given UA, the conditions have to be carefully constructed to not only check for support of a given technology, but also for non-support of any "better" technology.

It would be more natural and ergonomic for authors if this could be done by chaining the `@supports` blocks in an "if-elseif-elseif-else" way. Inventing some syntax here, we might have:

```
@supports font-technology(color-COLRv1) {
    @font-face { font-family: my-icons; src: url(my-icons-gradient-colors.woff2); }
}
@else-supports font-technology(color-SVG) {
    @font-face { font-family: my-icons; src: url(my-icons-svg.woff2); }
}
@else-supports font-technology(color-COLRv0) {
    @font-face { font-family: my-icons; src: url(my-icons-flat-colors.woff2); }
}
@else {
    @font-face { font-family: my-icons; src: url(my-icons-bw-fallback.woff2); }
}
```

I think a similar `@else-`extension to conditional rules would also be useful for `@media`. Is this something we could explore further?

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


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

Received on Tuesday, 14 September 2021 13:04:55 UTC