by Kyle Weems 17.June 2008 08:14
I'm going to be honest here. Despite this post's title, I'm not a huge Metallica fan. Mind you, I respect the fact that they didn't get obsessed with codpieces in the 80's like everyone else with long hair and guitars did. I'm just going to go on record here: some fashions are worth resurrecting every now and again. Codpieces are not on that list, along with capris pants.
Now that I've dictated fashion, let's get down to business. Mozilla is releasing version 3 of their flagship product: Firefox. If you don't know what that is and you're reading this blog, then go download it, and throw away the little blue "E" icon that's sitting on your desktop. Future generations of web developers will thank you for contributing to a standards-compliant world. Coming out a couple weeks after Opera 9.5 and within the same general timeframe as Safari's last major upgrade, it is helping the implementation of web standards in browsers move forward.
Unfortunately, Internet Explorer 8 is still an indeterminate time away from release, with its beta 2 not scheduled until sometime in August. So don't throw away your conditional comments yet, boys and girls.
That said, this brings up some interesting CSS3 features that I think web designers will be using a great deal. Among them is rgba colors.
No, rgba is not an abbreviation of rutabaga. Rather, it refers to setting an element's color via red, green, blue, and alpha values. The first three values help determine the element's color, obviously (with each color getting a value of 0 to 255). The last one, alpha, refers to how transparent the element is, and can range from 0 (completely invisible) to 1 (completely opaque).
The format for this would be:
e { color: rgba(255, 0, 0, 1); }
That would result in the text of element e being red. What's nice about using rgba colors is that color and alpha of an object can be set seperately for the text and the background. This is great for having a faded/semi-transparent element with crisply visible text over it. Here's an example page showing this property at work... but only in Firefox and Safari. Sadly, neither Internet Explorer nor Opera have this property yet. (I parody Opera's deficiency in this regard in a CSSquirrel comic here).
Before the wailing and gnashing of teeth set in, though, let me tell you that not all is lost. (Quick aside: what is gnashing of teeth? Is that grinding your teeth? Or is it finding some teeth to chew on? Because that sounds like a bad way to handle disappointment.) There's another CSS property out there that can be used to determine opacity. The W3C decided to get really wild and crazy, and named it opacity. Here's how it looks:
e { opacity: 1; }
The above style would make element e completely opaque (which is default). The property takes a value between 0 and 1, with 0 being completely transparent. Here's our example page modified to make use of opacity. Sweet, right?
Well... maybe like Nutrasweet. Remember Nutrasweet? It was like the Splenda of the eighties. I'm shocked that it's still around. I think we're hitting a point where we should just realize that if it's a powdery additive that isn't bad for you, it's going to have a nasty aftertaste. It also may causes brain cancer. Which isn't sweet at all.
Ok, back on track. There's three major issues with using opacity that need to be mentioned. 1. It's not supported by Internet Explorer. 2. Both the foreground and background of an element is affected by the property, so the text will be faded too. And lastly, 3. It's automatically inherited by all of an element's children, and this can't be overwritten by setting a different opacity to them.
This really limits the application of opacity. #2 is less problematic if your design has faded text, but it's a real issue if that's not what you want. #3 is a doozy, and we'll get to that in a bit. #1 is actually the easiest to solve, despite IE's well deserved reputation as the rebellious punk of the browser world.
Microsoft, despite it's often questionable support of existing standards, decided to make some of it's own proprietary features for it's browser. I know, this isn't shocking in any way shape or form. What is helpful in this particular case is that we can make use of one of these properties to help the limping blue E keep up with the crowd. In particular, we're making use of their filter property. It can be seen in this example:
e { filter: alpha(opacity=50); }
This example results in element e having an opacity of 50%, mimicking what you'd get on a good browser with the style opacity: 0.5. This particular filter takes any value between 0 (completely transparent) and 100 (completely opaque). Like the opacity property, it affects both the foreground and background of the element. Of course this filter only works for IE, so to make opacity work for all browsers you'll want to use both the opacity property and the filter: alpha property in any CSS (I prefer to put the MS properties in an IE specific stylesheet, but you can keep them together if that's how you like to style).Here's our example page with it now including the filter. You'll find that it works now in all the major browsers.
Well, mostly. Once again, we've still got an issue with the text being transparent. Initially when testing this, I'd hoped to offset this by putting the text in spans, and then giving those spans opacity: 1. It seemed like an intuitive, reasonable solution. However, apparently the W3C's specification isn't so intuitive. As it turns out, once you've set an element's opacity, all of its children inherit the opacity. And it cannot be overridden. Who thought this was a good idea? Is there a browser limitation that I'm not noticing? I'd hardly think so, as the rgba colors don't have this problem.
Oi.
Ultimately, there's only one workaround to this issue. You need to keep whatever text that you want opaque in a seperate element that isn't a child of whatever element has the opacity set. This means we'll see extra markup for presentation (which is a bad thing, but often unavoidable in our non-perfect, IE-filled world), and it can also be challenging on some designs due to the need to use absolute positioning or other related tricks to get elements to stack on top of each other.
Unwieldy or not, though, here is an example of non-transparent text over semi-transparent backgrounds that work in all browsers. As you can see by looking at it's page source, it isn't the prettiest example of clean markup and minimal CSS. In fact, I question whether it'd be worth taking this approach when PNGs might be simpler. Then, with PNGs you introduce a host of IE6 issues (which are fixable by Dean Edward's IE7 script, although that can introduce a number of image positioning issues and some strange anchor bugs when PNGs are involved).
So if I were you, I'd get a greeting card with a sad puppy on it, write a tearful demand for rbga color support in it, and then mail it to either Dean Hachamovitch (of the IE Dev Team) or Håkon Wium Lie (of Opera). If anything, the sheer magnitude of dog tears will melt their frozen hearts so that they'll have pity on us.
Oh, and seriously, download Firefox 3 sometime today when the release finally goes out. It's fast, feature-filled, and just generally rocks.