Selective Degradation of Modern CSS for Internet Explorer

Progressive enhancement. Graceful degradation. Progressive enrichment.

There are a lot of terms out there for “making sure things work nicely in every browser, even if it doesn’t work or look exactly the same in all of them”. I was thinking about the approach I took on a recent project, the Criminal Justice School Guide. I suppose it is kind of like progressive enrichment… but with a bit of graceful degradation thrown in.

What does that mean? Well, first of all the case for this approach was an easy one to make when working with a client (Avenue100, and directly with an old friend and colleague Tracy Shaw) who gets web standards. What I did was take a mockup and build the design in CSS using the very latest CSS techniques. Only then did I take a look at the design in other browsers.

The difference between what I did on this project and some others is that I only fixed major design elements. If it wasn’t a big deal, I shrugged it off. LET ME TELL YOU it was a great feeling. “Does that corner really need to be rounded? Nope!” This way the browser hacks are kept to a minimum (and quarantined in separate style sheets) and the site is ready to play ball when Internet Explorer finally is.

Let’s call it… “selective degradation”. :)

Today I want to look at four areas of the design, see how they look in Internet Explorer vs. a real browser, and show the markup and style examples.

cj-examples

1. Search field

The first task was to create a search form that sits over a partially transparent rounded box that also sits on top of some other geometric shapes. It’s easy enough to cram all of that in a background image and let the form sit on top of it, but why do that when you can produce a more bulletproof approach that allows the rounded box to grow with the form (if need be). Here’s how I styled the form:

form#search {
  float: right;
  background-color: rgba(183,180,170,.4);
  padding: 10px 20px;
  margin: 16px 12px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

The floating, padding, and margins are all standard stuff. The background-color and border-radius, however, are not. border-radius, of course, will round the corners of the box. Only it doesn’t work in Internet Explorer (even IE8!). How about the background-color? That’s RGBa, which allows you to define a background color WITH a transparency level. Of course, IE8 can’t figure that out either.

So, what should we do? Well, just like I said right away. Cram it all in a background image. So, here’s the fix:

div#header { background: url(../images/ie/header.png) no-repeat right top; }

All versions of IE are served a header that has the rounded, semi-transparent box as part of the background image. It’s not as bulletproof, but do users of Internet Explorer really care about that? Nope. Problem solved.

2. Rounded content window

See that rounded top of the content box? That’s a pretty important design element, so let’s keep it rounded for everyone. Easy enough to do in Firefox:

div#content {
  clear: left;
  background-color: #FFF;
  border: 2px solid #EAEAEA;
  margin: 0 12px;
  padding: 12px;
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
}

The part that rounds the corners, again, is the border-radius. Notice that -webkit-border-radius doesn’t adhere to the nice shorthand that -moz-border-radius and border-radius do. That’s why you get nice long attribute names like -webkit-border-top-right-radius. That’s a mouthful!

So, what has to happen to get these corners in IE? It’s actually a little bit complex, to be honest. Here’s what I did:

div#content {
  padding: 0 12px 12px;
  border-width: 0 2px;
}

So, here we removed the padding and border from the top of the content box. Then:

ul#navigation {
  overflow: hidden;
  background: url(../images/ie/content-rounded-top.png) no-repeat left bottom;
  margin: 0 12px;
  padding: 10px 0 0 14px;
}

We instead added the rounded corners as a background-image on the bottom of the navigation menu above the content box. We added some extra padding to make up for it.

ul#navigation li {
  padding-bottom: 12px;
}

Finally we added some padding to the bottom of the list items themselves. And that did the trick!

3. Rounding of inner content boxes

You see how some boxes inside of the content box have rounded corners, too? You know what I decided to do about these? Nothing. Not an important design element. NEXT!

4. Partially transparent stripe

The stripe that goes over the photograph is a pretty major design element as well. Once again, RGBa comes to the rescue:

div#home-banner div#title {
  float: left;
  margin-top: 172px;
  padding: 8px;
  width: 625px;
  color: #FFF;
  background-color: rgba(0,54,99,.6);
}

RGBawesome, indeed.

Et tu, IE? You guessed it. Just put the blue stripe in the image itself and serve that one to IE.

div#home-banner { background-image: url(../images/ie/law-and-justice-ie.jpg);

Note that this approach doesn’t make sense if the image changes often. This one, luckily for me, does not.

There you have it. It was a great feeling to build the site with only modern browsers in mind. This allows you to structure the markup and style in the best, most semantic way possible. Then, you can fill in only the necessary gaps, improving the user experience in lesser browsers.

One Comment

  1. On February 4th, 2011 at 8:57 am Progressive enrichment and Graceful degradation | Cross-Browser optimization said:

    [...] http://www.darowski.com/tracesofinspiration/2009/11/30/selective-degradation-of-modern-css-for-inter… [...]