Garrett Winder

Graceful degrading w/ CSS3 selectors

01-10-2010

I hate when I finish templating a web project, open up an older browser and an easy CSS layout is broken. In a strange little way, CSS3 fixes that issue (without IE specific stylesheets). Basically, If the browser can’t read it, the styling doesn’t exist.

After reading Andy Clark’s Ignorance Is Bliss post over at 24 Ways I’ve been putting way too much thought into how I can implement CSS3 functions & features into my everyday work.

We’re currently realigning our single page website design service and I figured this would be a good time to put the thoughts to the test. This example is with CSS3 Selectors. Looks great in Safari & Firefox, looks good in Internet Explorer.

The HTML

For this example we are going to use a definition list. It fits perfectly for the task at hand. Below is the HTML:

Benefits of 1 Pagers

Full cms integration
We integrate an easy to use cms into your website allowing you to easily make changes.
Search engine friendly
We write really clean code, meaning our sites are more likely to pop up in search engines.
Trackable results
Track who your visitors are, where they are coming from and what they are doing.
Award-winning design
Our website design work has been featured in showcases all over the web.

Basic CSS

Now we’re going to style it up a bit. Basic code for the not-so-smart web browsers:

dt {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.05em;
	margin-bottom: 4px;
	text-transform: capitalize;
}
dd {
	margin-bottom: 10px;
	line-height: 1.2em;
}

With that basic HTML & CSS we get a result that should look something like this:

Simple, clean & usable. Looks good, works good. But lets make use of advanced CSS3 selectors to give people using modern web browsers a little more eye candy.

CSS with CSS3 Selector Magic

dt:first-of-type, dd:first-of-type,
    dt:nth-of-type(2), dd:nth-of-type(2),
    dt:nth-of-type(3), dd:nth-of-type(3),
    dt:last-of-type, dd:last-of-type {
        display: inline;
        float: left;
        position: relative;
        margin: 0 10px;
        padding-left: 60px;
        width: 160px;
    }
    dt:nth-of-type(odd), dd:nth-of-type(odd) {
        margin-left: 0;
        padding-right: 60px;
    }
    dt:nth-of-type(even), dd:nth-of-type(even) { margin-right: 0; }
    dt:first-of-type {
        background: url(image1.png) no-repeat 0 0;
        height: 40px;
    }
    dd:first-of-type  { margin-top: -20px; }
    dt:nth-of-type(2) {
        background: url(image2.png) no-repeat 0 0;
        height: 75px;
        margin-top: -40px;
    }
    dd:nth-of-type(2) { margin-top: -55px; }
    dt:nth-of-type(3) {
        background: url(image3.png) no-repeat 0 0;
        height: 41px;
        margin-top: 30px;
    }
    dd:nth-of-type(3) { margin-top: -21px; }
    dt:last-of-type {
        background: url(image4.png) no-repeat 0 0;
        height: 64px;
        margin-top: -41px;
    }
    dd:last-of-type { margin-top: -44px; }

Okay, that’s a lot of code. I gave individual styles to every line of the HTML via CSS3 Selectors and voilà – It looks like this:

So, there it is – How to gracefully degrade your websites with CSS3 Selectors. I understand that code isn’t perfect and I went a little over the top but that’s what this post was for. Hope you enjoyed it.