Hacker News Reader

Comment by detaro | Hacker News Reader

It's part of CSS Colors Level 4, which is still in draft stages, but some browsers (but not all) already support it. It's the same as #ffff99ff (same draft), which is the same as rgba(255,255,153,100%) or #ffff99

View on HN

Browser support isn’t really that relevant here. PostCSS has a plugin that adds a fallback during the build step. If you want to use the #RGBA and #RRGGBBAA syntax, you can do it today. (I use it.)

It's relevant information, because not everyone uses the same postprocessing pipeline as you do (or even any at all)

What advantage does this give when we have SASS and other systems that support variables?

This is a spec going through draft-review-deployment so we can type 3 less characters?

Until now, the variants where #rrggbb and #rgb, so the extension to alpha is parallel: #rrggbbaa, #rgba. I personally like that extension, so you can just add an alpha component to a color without transforming it to a different form first. It's also relevant to people using automated systems, since those automatically can choose the most compact representation of a color possible in their output.

> This is a spec going through draft-review-deployment so we can type 3 less characters?

The key phrase above is is part of, it's one of the smaller aspects of the spec.

This doesn't have anything to do with variables, it's simply adding an opacity value to hex-encoded colours. So `#ffff` (or `#ffffffff`) is the sames as `rgba(255, 255, 255, 1)`, and `#ffffff7f` would be `rgba(255, 255, 255, 0.5)`.

Until now, if you wanted to assign a colour with opacity, you had to use the `rgba()` format. Now you can just hex-encode it :)

Reply on news.ycombinator.com