5 ms·

Oof. Unless I’m missing something, this is a convenience that doesn’t enable anything new and uses syntax/terms that don’t naturally generalize for future appli

Oof. Unless I’m missing something, this is a convenience that doesn’t enable anything new and uses syntax/terms that don’t naturally generalize for future applications. It just embeds one recent trend in very specific, very rigid terms. This is how standards get bloated.

incrudible 3y ago
God forbid someone adds practical features for common use cases to our beautiful turing tarpit.
- imachine1980_ 3y ago
  I agree with the previous comment that the current approach lacks flexibility in achieving high contrast. It might be beneficial to consider a more general and adaptable method that can accommodate different styles or even introduce primitives for different styles in the future
- swatcoder 3y ago
  You can have both. But good tool design looks at the horizon, not just at your feet. You could deliver the same convenience in a way that’s set up to be repurposable (fullcolor /rgcolorblind) or extensible (light / grey / dark / …n) with as little difference as choosing a more mindful name.
miragecraft 3y ago
I agree. You can already do this using the space toggle technique: :root { --dark: ; } @media (prefers-color-scheme: dark) { --light: ; --dark:initial; } .example { color: var(--light, #000) var(--dark, #fff); }
- zeroimpl 3y ago
  That looks awful, but presumably if you are using sass instead of css you could define a light-dark macro already which does exactly that. I wonder if custom functions might ever make their way to css.
- Kerrick 3y ago
  Ah yes, the CSS Space Toggle. The way this works internally is a seemingly-unintended but very useful aspect of the CSS specification.
- miragecraft 3y ago
  Correction, the media query should have been: @media (prefers-color-scheme: dark) { :root { --light: ; --dark:initial; } } Missed the selector.
bramus 3y ago
(Hi, author of the post/article here) Yes, `light-dark()` is very specific in what it can do … but it’s not the end goal. The end goal is to have a generic function – something like `schemed-value()` – that can respond to a plentitude of `color-scheme` values and return more than just `<color>` values. Reality is, though, that browsers don’t have support for custom `color-scheme` values (it’s explicitly forbidden in the spec, for now) [^1] and that CSS parsers need to know ahead of time what they are about to parse [^2]. By narrowing things down in feature scope, you can use this convenience method now, instead of needing to wait a few months/years until the rest is figured out. Once `schemed-value()` becomes a thing, `light-dark()` can become syntactic sugar for it: ``` light-dark(<color>, <color>); = schemed-value(light <color>, dark <color>); ``` [^1]: https://drafts.csswg.org/css-color-adjust/#color-scheme-prop:~:text=User%20agents%20must%20not%20interpret%20any%20%3Ccustom%2Dident%3E%20values%20as%20having%20a%20meaning https://drafts.csswg.org/css-color-adjust/#color-scheme-prop... [^2]: https://www.w3.org/TR/css-syntax-3/#parse-grammar https://www.w3.org/TR/css-syntax-3/#parse-grammar

incrudible 3y ago

God forbid someone adds practical features for common use cases to our beautiful turing tarpit.

imachine1980_ 3y ago
I agree with the previous comment that the current approach lacks flexibility in achieving high contrast. It might be beneficial to consider a more general and adaptable method that can accommodate different styles or even introduce primitives for different styles in the future
swatcoder 3y ago
You can have both. But good tool design looks at the horizon, not just at your feet. You could deliver the same convenience in a way that’s set up to be repurposable (fullcolor /rgcolorblind) or extensible (light / grey / dark / …n) with as little difference as choosing a more mindful name.

miragecraft 3y ago

I agree. You can already do this using the space toggle technique: :root { --dark: ; } @media (prefers-color-scheme: dark) { --light: ; --dark:initial; } .example { color: var(--light, #000) var(--dark, #fff); }

zeroimpl 3y ago
That looks awful, but presumably if you are using sass instead of css you could define a light-dark macro already which does exactly that. I wonder if custom functions might ever make their way to css.
Kerrick 3y ago
Ah yes, the CSS Space Toggle. The way this works internally is a seemingly-unintended but very useful aspect of the CSS specification.
miragecraft 3y ago
Correction, the media query should have been: @media (prefers-color-scheme: dark) { :root { --light: ; --dark:initial; } } Missed the selector.

bramus 3y ago

(Hi, author of the post/article here) Yes, `light-dark()` is very specific in what it can do … but it’s not the end goal. The end goal is to have a generic function – something like `schemed-value()` – that can respond to a plentitude of `color-scheme` values and return more than just `<color>` values. Reality is, though, that browsers don’t have support for custom `color-scheme` values (it’s explicitly forbidden in the spec, for now) [^1] and that CSS parsers need to know ahead of time what they are about to parse [^2]. By narrowing things down in feature scope, you can use this convenience method now, instead of needing to wait a few months/years until the rest is figured out. Once `schemed-value()` becomes a thing, `light-dark()` can become syntactic sugar for it: ``` light-dark(<color>, <color>); = schemed-value(light <color>, dark <color>); ``` [^1]: https://drafts.csswg.org/css-color-adjust/#color-scheme-prop:~:text=User%20agents%20must%20not%20interpret%20any%20%3Ccustom%2Dident%3E%20values%20as%20having%20a%20meaning https://drafts.csswg.org/css-color-adjust/#color-scheme-prop... [^2]: https://www.w3.org/TR/css-syntax-3/#parse-grammar https://www.w3.org/TR/css-syntax-3/#parse-grammar