ColorMe / CSS Color Level 4

Avatar of Chris Coyier
Chris Coyier on

Does this look weird?

.element {
  background: color(#eb8fa9 alpha(75%) blackness(20%));

That’s the “color function” from a draft spec from the CSS working group. I think it’s all about making colors a little easier and more intuitive to work with. Looks awesome to me, as someone who uses Sass color manipulation functions quite a bit.

Tyler Gaw made a cool tool to play with it:

I notice in the spec that this seems to actually be color-mod() though, not color(). It probably changed, as I see there are some articles and plugins that talk about it as color().

That’s the danger of trying to polyfill future CSS with the exact names you think it will use. If you’re right, hopefully, one day you can remove it and all will be well. If you’re wrong, you can never stop using it, because the code that’s left won’t work (unless you rewrite it). You’re also hoping that the polyfill is written in a way that takes advantage of the new syntax instead when it can instead of only processing it down to an older syntax. I think I prefer on-purpose differently-named abstractions.