RGBA — IE Fallback

I’ve been using RGBA color values, border-radius, and box-shadow CSS3 features all over in my current projects. Since Internet Explorer (6, 7, & 8) does not support any CSS3 features I wanted to find some suitable fallbacks. RGBA color values are the most important (of the three CSS3 features I’m using) to find an IE-alternative; without one, IE will inherit the last non-RGBA color value (which maybe no color value, i.e. transparent).

A great article, Working With RGBA Colour, recently appeared on the collaborative web development blog: 24 Ways. The ‘Supporting All Browsers’ section of the article fell short of describing a robust way to “support” IE without punishing the other browsers.

Falling back to a PNG

In cases where you’re using transparency on a background-color (although not on borders or text) it’s possible to fall back to using a PNG with alpha channel to get the same effect. This is less flexible than using CSS as you’ll need to create a new PNG for each level of transparency required, but it can be a useful solution.

Using the same principal as before, we can specify the background in a style that all browsers will understand, and then overwrite it in a way that browsers without RGBA support will ignore.

h1 {
	background: transparent url(black50.png);
	background: rgba(0, 0, 0, 0.5) none;
}

Drew McLellan, 24 Ways: Working With RGBA Colour

I had a feeling, as did Martin Klepsch, that this code would result in downloading black50.png in browsers which wouldn’t even use/need it (i.e. non-IE browsers). Running tests and investigating alternate fallback techniques for RGBA color values in IE shined some light on this issue.

The Tests

I started with the fallback technique of using a PNG, as described in the 24 Ways post, as my baseline. I wanted to test the theory I had (and Martin Klepsch commented on): Browsers will download the PNG even if they do not use it.

I mocked up a quick-and-dirty example to test. I used a textured background for the page with a short paragraph of text centered on a semi-transparent green background (25% opacity); upon hovering over the paragraph, the background becomes more opaque (50% opacity).

Test 1: Baseline

I started with the following CSS, using the PNG technique:

body {
	background: url(pattern.png);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
	color: rgb(225, 225, 225);
	background: transparent url(green-25.png);
	background: rgba(156, 217, 107, 0.25) none;
	width: 400px;
	margin: 48px auto;
	padding: 32px 40px;
}
p:hover {
	background: transparent url(green-50.png);
	background: rgba(156, 217, 107, 0.50) none;
}

View Test 1

Safari 4 and Chrome 4 (Mac/PC) did download the unused PNG; while Firefox 3.x did not download the PNG. This method does work for IE 7 and IE 8; but it’s important to note: I noticed a FOUC while IE downloaded the PNG for the :hover state.

Test 2: Using !important

I wanted to test if setting !important on a rule would force the browser to ignore other rules with the same CSS property.

p {
	/* … */
	background: transparent url(green-25.png);
	background: rgba(156, 217, 107, 0.25) none !important;
	/* … */
}
p:hover {
	background: transparent url(green-50.png);
	background: rgba(156, 217, 107, 0.50) none !important;
}

View Test 2

No change from the baseline test. Bummer.

Test 3: !important with Reverse Order

For completeness I wanted to test if order made a difference when using !important

p {
	/* … */
	background: rgba(156, 217, 107, 0.25) none !important;
	background: transparent url(green-25.png);
	/* … */
}
p:hover {
	background: rgba(156, 217, 107, 0.50) none !important;
	background: transparent url(green-50.png);
}

View Test 3

No change from the baseline test. Webkit browsers are so eager to download these unused images.

Test 4: IE Conditional Comments

I use IE Conditional Comments on most projects, sending IE a set of “fixes” without resorting to using hacks in my CSS. I was confident this approach would work flawlessly.

<style type="text/css">

	body {
		background: url(pattern.png);
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	p {
		color: rgb(225, 225, 225);
		background: rgba(156, 217, 107, 0.25) none;
		width: 400px;
		margin: 48px auto;
		padding: 32px 40px;
	}
	p:hover {
		background: rgba(156, 217, 107, 0.50) none;
	}

</style>

<!--[if lte IE 8]>
	<style type="text/css">

		p {
			background: transparent url(green-25.png);
		}
		p:hover {
			background: transparent url(green-50.png);
		}

	</style>
<![endif]-->

View Test 4

It works! This technique is a great RGBA fallback for IE 7 and IE 8; Safari 4, Chrome 4, and Firefox 3.x did not download the unused PNGs. This outcome was expected since only IE is going to receive the style rules which set the background PNGs.

Test 5: Conditional Comments with CSS Filter

Searching for the Holy Grail in this one…

A major advantage of using RGBA color values is not needing to create and serve an alpha-transparent PNG. The RGBA IE fallback techniques looked at so far relied on a PNG. I wanted to test an approach which would not require a PNG. After doing some searching, I came across a post, RGBa Browser Support, using Microsoft’s IE-only Gradient Filter.

The tricky part in using Microsoft Gradient Filter is getting the Color Property set right.

Color is expressed in #AARRGGBB format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque.

Color Property, Microsoft Developer Network

Determining The Alpha Hexadecimal Value

We need the figure out the AA part of #AARRGGBB. For CSS3 RGBA color values, A is a decimal/percentage of opacity; where 0.0 is completely transparent and 1.0 is completely opaque. Another way to look at it is like masking: where 0.0 is black or absence, and 1.0 is white or presence.

There are 256 values (0 — 255) for each color (red, green, and blue) in RGB values. We can multiply the alpha-opacity value by 256, round the result, and convert to hexadecimal to get our value.

e.g. For this example I have two alpha-opacity values: 0.25, and 0.50 on hover.
256 × 0.25 = 64
256 × 0.50 = 128
We can convert to hexadecimal values: 40, and 80 for hover.

<!--[if lte IE 8]>
	<style type="text/css">

		p {
			background: transparent;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#408ED557,endColorstr=#408ED557);
		}
		p:hover {
			background: transparent;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808ED557,endColorstr=#808ED557);
		}

	</style>
<![endif]-->

View Test 5

This technique “worked” insofar that it used no PNGs and rendered in all the browsers tested. The nature of my test case using a :hover style revealed an IE rendering anomaly (surprise, surprise); in both IE 7 and 8 the :hover CSS filter was only applied when hovering the actual text of the paragraph instead of the region of space the paragraph takes up. In all the previous test cases this was never an issue; the problem is directly related to Microsoft’s IE-only Gradient Filter.

Microsoft’s CSS filter properties are generally seen as something to avoid using. I’m extremely curious about the performance trade-offs of an extra HTTP request vs. using the Microsoft Gradient filter property.

Results & Recommendations

My goal was to find a robust fallback for Internet Explorer’s lack of support for RGBA color values; a technique that wouldn’t punish the browsers which do support RGBA, and second, wouldn’t punish the developer.

	Test 1	Test 2	Test 3	Test 4	Test 5
Safari 4	PNGs	PNGs	PNGs	no PNGs	no PNGs
Chrome 4	PNGs	PNGs	PNGs	no PNGs	no PNGs
Firefox 3.x	no PNGs	no PNGs	no PNGs	no PNGs	no PNGs
IE 8	PNGs	PNGs	PNGs	PNGs	no PNGs
IE 7	PNGs	PNGs	PNGs	PNGs	no PNGs

Test 4: IE Conditional Comments proved to be the most robust; an excellent RGBA fallback solution for IE 7 and IE 8 that won’t download PNGs in Safari, Chrome, or Firefox.

Test 5: Conditional Comments with CSS Filter is a very compelling solution; it does not require PNGs in any browser, making it appealing to designers and developers. I caution the use of this technique: beware of rendering anomalies and/or unknown performance implications. This technique needs further testing an experimentation; that said, I still plan to give it a whirl in my current projects.