CSS's "transparent" may not be transparent, especially on diagonal borders
You might not realise it, but transparent is defined as rgba(0, 0, 0, 0)—transparent black. In WebKit browsers with no anti-aliasing (I believe they're finally in the process of rectifying this omission), this doesn't matter. However, in browsers with anti-aliasing of diagonal borders (IE9+ and Firefox), this can have serious implications.
IE9 does tricky stuff so that (unfortunately for the Mozilla-lover in me) it doesn't have a problem, but Firefox handles it the naive way, drawing what is effectively a gradient between the two border colours.
Take a look at what something like this does:
border-top: 100px solid transparent;
border-left: 100px solid #eee;<div style="border-left:100px solid #eee; border-top:100px solid transparent"></div>
Yep, if you're using Firefox, you'll see there a dark grey line between the light grey and the white, because it's rendering a gradient from #eee to transparent black (and so it hits semi-transparent darker grey in the middle of the gradient).
To get it working properly in Firefox, you would need transparent #eee rather than transparent #000. (Sorry, convert your hex to decimal, #rgba didn't make it into the CSS3 Colors module.)
border-top: 100px solid rgba(238, 238, 238, 0);
border-left: 100px solid #eee;<div style="border-left:100px solid #eee;border-top:100px solid rgba(238,238,238,0)"></div>
As it stands, many, many things use transparent black when they shouldn't. And very few people understand why.
Written by Chris Morgan
Related protips
2 Responses
Looking at the CSS3 Color module, I see this: http://www.w3.org/TR/css3-color/#rgba-color - why do you say that RGBA didn't make it into the module?
I believe he was referring to this:
// The extra two characters are the alpha channel:
background-color: #EEEEEE00;
// Or...
background-color: #eee0;Have a fresh tip? Share with Coderwall community!
