[css-media-queries-5] add clarification on applied order for multiple preferences

[MelSumner]

The spec: https://drafts.csswg.org/mediaqueries-5

While reading through it, I was looking for some indication or guidance as to the order in which preferences should be applied. Even if there is to be no preference, explicitly stating as such will likely be useful to authors.

Example:
If a user has prefer-contrast and prefer-color-theme with some setting, which should the browser apply first?

[tabatkins]

I'm not sure what you mean by that - can you clarify?

[gossi]

@tabatkins there were some question by me:

• I am interested in how @media (prefers-contrast) and @media (prefers-color-scheme) work together? Is there a preferred "hierarchy"? Does color-scheme come first and contrast second (if both are present)?

• I'm thinking from the opposite side (creation) now. A theme. I might give this theme a color scheme (light/dark) and inside a scheme can have high and low contrast. Thinking the other way around: Can I have a different high and low contrast but independent of a color scheme? Can I define contrast and color scheme independently, so the cascade can do its job? I can't think of a way to write css like that - maybe there is a really cool css feature I don't know to do so. Apart from that I would give my own question a no

[tabatkins]

There's no hierarchy; they're independent preferences that can be queried separately or together, as the page author desires.

(And notably, there's nothing about a light or dark color scheme that implies a particular level of contrast; you can do high and low contrast variations of either.)

Can I define contrast and color scheme independently, so the cascade can do its job?

Not really right now, because dealing with either preference involves assigning to the same properties (color, background-color, etc), and ideally you want to handle all combinations of those two preferences.

That said, Color 5 is working on a (still very early stages, don't look to its details as particularly informative of a final design yet) automatic contrast adjuster, where you can feed it two colors and a desired contrast ratio and it spits out one of the colors adjusted appropriately. This should, if we do it right, let you do a quick-and-dirty contrast adjuster automatically: set a --contrast-ratio property according to (prefers-contrast), and set --color-* properties according to (prefers-color-scheme), then actually write out your color properties by combining the two with contrast-adjust(). It's a bit of scaffolding, but it avoids needing to define a 3x2 (for now) set of colors for everything; instead you'd just define 2 sets of colors (light and dark) and let the function deal with contrast for you. The results won't be as good as hand-designing all the combinations, but it should be better than nothing, and you can still do hand-authoring when desired, either totally or piecemeal.

[svgeesus]

That said, Color 5 is working on a (still very early stages, don't look to its details as particularly informative of a final design yet) automatic contrast adjuster, where you can feed it two colors and a desired contrast ratio and it spits out one of the colors adjusted appropriately.

That isn't what it does (although there has been discussion about adding that functionality). You feed it a color, a list of colors (and optionally a contrast ratio) and it returns the first color in the list that meets or exceeds that ratio. If no ratio is given, it returns the one in the list with the highest contrast.

[MelSumner]

There's no hierarchy; they're independent preferences that can be queried separately or together, as the page author desires.

@tabatkins this is an answer- I am suggesting that it be added to the spec for clarification for anyone who is reading it.

[tabatkins]

The problem is that I'm not sure how I could word it as a clarification; all MQs have always been independent, so the mental space y'all approached it from to be able to ask the question isn't familiar enough to me to write guidance in avoiding it. ^_^

[gossi]

There's no hierarchy; they're independent preferences that can be queried separately or together, as the page author desires.

+

Can I define contrast and color scheme independently, so the cascade can do its job?

Not really right now, because dealing with either preference involves assigning to the same properties (color, background-color, etc), and ideally you want to handle all combinations of those two preferences.

= hierarchy, because to handle all combinations I need to setup my queries that way, e.g. color-scheme and then contrast and results in those matrices of query (+ selectors)

That said, Color 5 is working on a (still very early stages, don't look to its details as particularly informative of a final design yet) automatic contrast adjuster, where you can feed it two colors and a desired contrast ratio and it spits out one of the colors adjusted appropriately. This should, if we do it right, let you do a quick-and-dirty contrast adjuster automatically: set a --contrast-ratio property according to (prefers-contrast), and set --color-* properties according to (prefers-color-scheme), then actually write out your color properties by combining the two with contrast-adjust(). It's a bit of scaffolding, but it avoids needing to define a 3x2 (for now) set of colors for everything; instead you'd just define 2 sets of colors (light and dark) and let the function deal with contrast for you. The results won't be as good as hand-designing all the combinations, but it should be better than nothing, and you can still do hand-authoring when desired, either totally or piecemeal.

This seems like tackling the problem of spawning the matrices. Thanks for pointing out, will keep an eye on this one.

[tabatkins]

= hierarchy, because to handle all combinations I need to setup my queries that way, e.g. color-scheme and then contrast and results in those matrices of query (+ selectors)

Hm, not sure what you mean by that.

You do need to combine/nest the queries to cover all the combinations, yes. But the order you do them in makes no difference. All of the following are identical:

@media (prefers-color-scheme: dark) {
  @media (prefers-contrast: high) {
    :root { --fg: white; --bg: black; }
  }
}

@media (prefers-contrast: high) {
  @media (prefers-color-scheme: dark) {
    :root { --fg: white; --bg: black; }
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: high) {
  :root { --fg: white; --bg: black; }
}

[gossi]

Yep, I treated this nesting as hierarchy - from the perspective of a creator. I have to first think about contrast then color or the other way around.

I also don't know if there are more (accessibility enhancing) queries that would add to that stack as well. With that a 2x2 it will get into a 3x3 matrix or even more.

I think this is also the guidance @MelSumner is relating to - on what's the "usage preference".