Preview & Files

Before we get started, check out a preview of what we are trying to accomplish, and grab the files to follow along. Ideally enough, the previous sentence was a preview in its own right.

Overview

Lately, I’ve been getting more and more into designing with progressive enhancements in mind. I think it’s a combination of forward wishful thinking, and a spiteful attitude towards IE. It’s also encouraging that over 67% of this blog’s readership browses through on Firefox, and only 13.5% do so in IE. No doubt that’s shifted my thinking and gives me the confidence to play around with some of the cool new features of CSS3.

In the steps that follow I’ll show you how to add descriptive icons to your links using a CSS pseudo selector element. Pseudo selectors were introduced back in CSS 2.1, but the fine folks at IE still haven’t adopted them. This small progressive enhancement greatly improves a site’s usability by helping the user understand what type of link they would be clicking. In the end I’ll reluctantly show you how to make things work in IE using a background image.

How It’s Done

In the demo, I styled PDFs, Word docs, and external links, but conceivably you could assign an icon to any file extension that you can think of. First, you’ll need an icon. There are lots of places to find cool icons, but my overwhelming favorite has become Iconfinder.

After grabbing the icon that you need, you can assign it to a file type in the CSS. Let’s take a look at the styling for PDF’s…

1
2
3
4

a[href$='.pdf']:after {
	content: url(../images/pdf.png);
	margin-left: 3px;
}

Awesomely enough, this syntax will work in just the way you might imagine. We tell the css to look for any files that end in .pdf and assign an image with a 3px margin on the left.

It’s beautifully simple, and in an ideal world that would be all you’d have to code. I suppose if you consider the very nature of progressive enhancements we could stop there. Afterall, the site will look just fine in IE, and those users will never know the icons should be there at all. But considering the somewhat depressing general browser statistics for June 2009 we should probably push further.

Getting IE to Behave

So how do we get things working in IE? Well, first we have to offer up a new stylesheet if the browser is determined to be IE. To do so, we can drop this handy little if statement in the head of our document.

1
2
3

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

The CSS is also pretty simple; we just use a background image instead of a pseudo selector. Take a look…

1
2
3
4

a[href$='.pdf'] {
	background: transparent url(../images/icons/pdf.png) no-repeat center right;
	padding: 0 20px 0 0;
}

The IE Issue

The main drawback with using a background image with a position ‘right’ attribute is how the styling breaks down if the link extends to more than one line. Despite this setback, the icons look good most of the time in IE and will only really be an issue on skinny columns. Perhaps this is best described with an illustration.

Showing A Little Class

With the way the selectors are set up for external links, the css will drop an icon in for any outgoing link. Which looks great on image links, but looks ugly on image links. To fix this issue you can make a no-icon class for your images to override the selectors, or you can make a class for external links and assign that class to the links that you’d like to display an icon for. Although this option is less dynamic, I like the added control.

Final Thoughts

Are you starting to use progressive enhancements on your site? What CSS3 changes are you most excited about?