Home > Designing, Others > ColorMe / CSS Color Level 4

ColorMe / CSS Color Level 4

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.


ColorMe / CSS Color Level 4 is a post from CSS-Tricks

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.