Ancestors

Toot

Written by Adam Stoddard on 2024-09-18 at 21:33

I've been exploring relative color syntax, and this was a bit of a surprise.

Unlike with color mix, you can't use a color defined with light-dark() as an input and expect to have a good time.

CodePen example: https://codepen.io/adamstoddard/pen/eYwwNbM

=> More informations about this toot | More toots from aaadaaam@mastodon.social

Descendants

Written by Mia (web luddite) on 2024-09-18 at 23:30

@aaadaaam I'm seeing two different issues:

In all browsers, you have to remove the deg units from the hue calculation. The h returns a number (no unit), and it seems numbers and lengths aren't compatible for +/- operations in general. This isn't specific to relative colors.

In Safari 18TP (the only browser with full RCS support), light-dark() works fine at that point. I expect light-dark() has similar difficulties to currentColor.

=> More informations about this toot | More toots from mia@front-end.social

Written by Adam Stoddard on 2024-09-19 at 00:28

@mia appreciate the detailed response, that's super helpful.

In retrospect, perhaps not the best idea to test in every browser except the one with full RCS support 🫠

=> More informations about this toot | More toots from aaadaaam@mastodon.social

Written by Mia (web luddite) on 2024-09-19 at 01:04

@aaadaaam Thanks for the nerd snipe. I didn't know any of this (including which browsers to check) before seeing your post and wondering if it was a bug or a spec limitation.

=> More informations about this toot | More toots from mia@front-end.social