Jake Ludington's Digital Lifestyle

I'm a big proponent of using data URLs in place of standard http links to images in your stylesheet. Website load time is faster when you have one file delivering all the design elements of a page instead of the 20-30 elements common to many HTML layouts. The one potential downside to this approach is IE compatibility. Native IE7 (not the IE7 compatibility mode in IE8) and IE6 do not support data URLs. JakeLudington.com gets very few visitors with IE6 or IE7, so I didn't implement backward compatibility on my own site, but if you get a significant percentage of visitors (10%+) using an older browser, you will want to implement an alternative IE stylesheet. I have heard from some people who are opting to just leave the images for everyone and not use data URLs, but I think this approach is a slight to every with a modern browser because they shouldn't get a slower experience just because the minority of web visitors are living in the past.

Once you've made the decision to provide an IE-specific stylesheet, you need to implement it. In the context of using data URLs in place of image links, this means maintaining a second stylesheet where those image links are used instead of data URLs. In other words, the styles you were using before you converted images to data URLs will go in the IE-only stylesheet. After you save that stylesheet and put it on your CDN, you can reference it in the document head of your HTML pages.

Here's an example of how you should reference your IE-only stylesheet:

<link rel="stylesheet" href="http://css.yourcdn.com/styles.css" type="text/css" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="http://css.yourcdn.com/ie7.css" type="text/css" />
<![endif]-->

You are using the [if lt IE 8] designation so that if the browser is a version of IE older than IE8, like IE7 or IE6, the second stylesheet is used. It is placed after your standard stylesheet so that the IE styles overwrite the styles in your main stylesheet causing the images to display properly.

An alternative way to do this is to create a specific stylesheet for IE7 and another one for IE6. If you use this second approach, it would look something like:

<link rel="stylesheet" href="http://css.yourcdn.com/styles.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="http://css.yourcdn.com/ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="http://css.yourcdn.com/ie7.css" type="text/css" />
<![endif]-->

Notice that now instead of using 'lt' for less than you detecting specific versions of the browser and displaying a stylesheet based on which version is returned.

In either of the above cases, by using a browser specific stylesheet, you can get the performance benefit of using data URLs for any browser that supports them, while creating a visually comparable user experience for anyone browser that doesn't support data URLs. While this is a little extra work, it benefits your customers which likely benefits your bottom line.