Observation: color-mix and currentColor
- Published on:
- Categories:
- color-mix, currentColor, CSS 45, Observation 4
- Current drink:
- Karkade with raspberries
This post is sponsored by the second-to-last day of the month, and me not knowing what to write.
In frantic search for a topic, I remembered one thing I was keeping slightly under wraps — mostly because I wanted to do more experiments with it, probably fill more bugs, and, as usual, polish-polish-polish. But the whole idea of me trying to write more “observations” is to get away from it!
So, today I’ll share my observation: we can use the currentColor
inside color-mix()
! But only after I’ll share how we can modify the alpha channel of a color by using them.
Sounds simple enough and, maybe, obvious, but it works, look:
Right away, before I would explain what’s going on, I need to link to two things:
-
The “Emulate basic relative color syntax with
color-mix()
+ thenone
keyword” by Lea Verou — I did already mention it twice on this blog. This is the third time! -
This Mastodon post by Anne Sturdivant, in which she did, inadvertently, solved an issue I was trying to work around for some time.
Lea’s CodePen was about how we can use color-mix()
and mix colors that have none
for some color stops.
For a while, I was trying to do the same, but only for adjusting the alpha component of a color, like this:
But that doesn’t work anywhere, really (I’ve yet to fill a bug for one of the cases). Or this:
This works in Firefox, works in Safari, but doesn’t in Chrome.
I even went to write web platform tests for that one (it was before I found out about the above issue), and they were merged, but! That’s still an ongoing thing, I’ll probably write about it at some point later.
Regardless. Now we can do this!
It is the same example as the first one, and it should work everywhere.
The crucial parts:
-
We should use
srgb
. Other color spaces do not work the same for some reason (again — would probably need to investigate further — do you see how I’d want to spend more time on this instead of just writing about it?) -
We should use
transparent
, and instead of having the alpha component there, we use the percentage with the first color!
Now — we can use this method to adjust (srgb) colors, and get their versions with alpha channel modified! All thanks to Lea and Anne!
Wait About CurrentColor?
I think I did sidetrack a bit. The other thing I wanted to share: that we can do this not just with some color, even if it comes from a CSS variable, but with a currentColor
, even when used with color
property!
Long story short: this works the same way as font-size: 2em
. The em
mentioned inside font-size
is the inherited value of the font-size, and in the same way, currentColor
mentioned inside the color
is the inherited color.
I would really want to play with this a bit more, maybe involve @property
in some way to see how things would behave with it, but I did promise myself that I need to learn when to stop — and here I am, doing this.
The browser support for color-mix()
might seem pretty good, however, as you could see from all the issues around color spaces and mixing — it might not be as stable as we might think. I’ll be cautious before using this in production seriously, there will need to be a lot of testing, and a lot of cross-browser testing.
A quick test that I did with this shows that Safari, Firefox and Chrome all render something in it differently except for the srgb
with transparent
method, which, I think, we could cautiously start trying.
But even if this is still unstable — I really encourage you to experiment with this. Try other color modes, try other ways to mix things up — and give your feedback to browsers! color-mix()
is very powerful, and the sooner it will become stable, the better for everyone.