Browser support for rgba
colors is very wide, basically working in everything but IE8- and really old browsers. In the name of progressive enhancement, it’s still good to give those browsers a fallback, the simplest being the solid version of the same color. This can be done by putting the property twice, once with a solid value and once with an rgba
value. The non-supporting browsers will take the solid color and ignore the rgba
, while the supporting browsers will take both, with the rgba
overriding. As an example: color: #fff; color: rgba(1, 1, 1, 0.6);
.
To that end, I created a mixin to do this automatically, similar to my remFallback
mixin: