Re: [csswg-drafts] [css-conditional] CSS.supports for media queries? (#5272)

On a similar note (let me know if you want this raised as a separate issue), how can this be detected in pure CSS?

For example with `prefers-reduced-data` support starting to come in Chrome I'd like to start using it to, for example, only load custom fonts when not in data saver mode. However, (at least for now) as this is new and not yet supported I still want to load the custom font by default (maybe in future when better supported can change this default, but this is what I'm thinking of now while support rolls out).

So ideally I'd be able to do something like this:

```
@supports not (prefers-reduced-data: no-preference) || @media(prefers-reduced-data: no-preference) {
   @font-face {
       font-family: Lato
       src: ...
   }

   @font-face {
       font-family: Poppins
       src: ...
   }
}

body {
  font-family: 'Lato', san-serif
}

h1 {
  font-family: 'Poppins', san-serif
}
```

That way I don't have to update every single instance of the font-family use across all my CSS but can just take care of it once, at the font-face definition. But this isn't possible AFAIK, firstly because @supports can't check media items, and secondly because you can't `||` @supports and @media even if it did.

Similarly, I preload my fonts so want to do that conditionally:

```
      <link rel="preload" href="/static/fonts/Lato-Regular.woff2" as="font" type="font/woff2" media="(prefers-reduced-data: no-preference)" crossorigin>
```

But can't because this will only work for those browsers that recognise `prefers-reduced-data` and there's no way to add a fallback for the other browsers AFAIK so above would basically turn off preload for all, and alternatives would keep preload where I don't want it (`prefers-reduced-data: reduce`).

Is my understanding correct or is there a way to handle this in pure CSS? If not should there be?


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


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

Received on Friday, 26 February 2021 17:29:32 UTC