Stunning CSS3: A project-based guide to the latest in CSS

CSS3 Case Study: The Highway Safety Research Center

Adapted from Stunning CSS3: A project-based guide to the latest in CSS (Peachpit Press)

By Zoe Mickley Gillenwater

Discuss this in the Web design forum
More Insight articles

To get a sense of many of the benefits of CSS3, let’s look at how a real site could be tangibly improved by using CSS3 in place of older web design techniques. Instead of picking on some stranger’s site, I thought I would critique one of my own.

I designed and developed the CSS and HTML for the UNC Highway Safety Research Center’s site back in 2006. The illustration below shows the HSRC home page. It hasn’t changed much since I originally built it, and isn’t nearly as complex as some of the inner pages, or certainly as many other web pages out there, but even so, it has a lot of images for such a simple page. You can see that it uses lots of rounded corners, subtle gradients, and shadows.

The home page for the Highway Safety Research Center.

I wanted to see how the current page would perform with all these images. So I downloaded it and tested it in Firefox 3.6, IE 8, and IE 6. The table below shows how many HTTP requests occurred and the average page loading time in each browser.

Performance in original page.

These loading times aren’t horrible, I suppose, but they could certainly be better. Especially in IE 6 — the poor thing is getting a pretty long wait. If I could get the number of HTTP requests down, that alone would make a big dent in loading times across the board.

A lot of these HTTP requests were coming from the tabbed navigation bar. Every tab is a separate image that contains three states: the inactive state, the rollover state, and the current page indicator, as shown below. When I originally made this page, I was using the background image technique called “CSS sprites” where you combine multiple images into one and move around the visible portion using the background-position property. But I wasn’t using sprites as aggressively as I could have.

Each tab image is made up of three states of the link.

I didn’t want to compare the new CSS3 version I was going to make against this poorly optimized version, so I combined all the tabs into one big image, modified the CSS to use this new image, and tested this revised version of the page. The illustration below shows the results.

Performance in revised page.

Taking a chunk out of the HTTP requests definitely improved the page loading times, especially in the case of IE 6. But keep in mind that this one big sprite image with all the tabs in it is was more difficult to make and will be harder to maintain than individual images; it also made the CSS more complicated than before. That’s the tradeoff that you get any time you use sprites. But this page was a better comparison for a CSS3-enhanced version of the page.

After CSS3

To create the CSS3 version of the page, I removed nine images and replaced them with pure CSS equivalents. Despite the changes, the page looks almost identical to the “before” version when viewed in modern browsers.

CSS3 abilities overrode the need for nine images, previously used in the numbered spots shown. The overall page looks about the same as it did in the first illustration

I removed the sprite image used for the tabs, and remade the tabs without using a single image by using border-radius and CSS3-generated gradients (see below). With these changes to the tabs, they’re now using real text, instead of an image of text, making them more accessible.

The image tabs (left) look almost identical to the tabs made with CSS3 (right).

I used this same technique for the two tabs in the footer, and replaced the footer’s gradient background image with a CSS3 gradient. I also used a CSS3 gradient to replace the background image in the project areas box and behind the “Latest News” text. Then I replaced the small gradient at the bottom of the header with a box-shadow on the navigation bar.

I used border-radius to remove the rounded corner images from the top and bottom of the project areas box, the bottom of the list inside it, and the “Latest News” heading block. For both the “HSRC Project Areas” and “Latest News” heading text, I got rid of the images and instead used @font-face on real text. The font I chose isn’t identical to that used in the images, but the one used in the image doesn’t allow @font-face embedding in its license, and the new one is pretty close. For the three bottom borders under the “HSRC Project Areas” text, I used box-shadow, which can create the appearance of multiple borders without having to use an image.

This isn’t every single instance where CSS3 could be added on this page, but it does take care of the ones most easily and quickly fixed without causing much trouble to non-supporting browsers. The CSS file size has increased slightly due to all the new CSS3, but not by too much, because most of it replaces long background declarations. The HTML is identical, except for changes to what’s linked to in the head. The table below shows how this page performed. Even though using @font-face added two HTTP requests, the overall number still decreased significantly because I got rid of nine images. I also got rid of the JavaScript I was using in IE 6 to support alpha-transparent PNGs; it was no longer needed since there are no longer any alpha-transparent PNGs.

Performance in CSS3 page

The decrease in loading time that I measured was compared to the optimized “before” version that used the one big sprite image. On average, loading time went down by 15 percent in Firefox 3.6, 13 percent in IE 8, and 25 percent in IE 6. This is a limited example, of course; this decrease could be further magnified by replacing more images, and it could be much larger on larger or more complex sites, where it’s not uncommon to find several dozen or more “interface” images (as opposed to content images, like photos) on a single page. But the point is that CSS3 alone was able to make the page load significantly faster, as well as improve its usability and accessibility a bit. This can translate into happier site users, and happy users are always good for the people behind the site too.

Ironically, even though IE 6 can’t see a bit of the changes we’ve made, its users benefit most from the addition of CSS3 to the page. IE 6 users get to enjoy much faster loading pages, thanks to these CSS3 effects replacing images.

But how does it look in IE? Is it a horrible train wreck? See for yourself in the illustration below, showing IE 8, and take my word for it that IE 6 is practically identical. IE simply sees rectangular corners instead of round ones, and no subtle gradients. Does it look just as good? No, I don’t think so. Does it look horrible? Again, I don’t think so. Is there any reason IE users will know that they’re missing out on these visual effects? Not likely. And even if they did, do you think they would choose rounded corners over faster page loading speeds?

Note: The beta of IE 9 available at the time of this writing does show most of CSS3 effects I added. It may show even more by the time it’s actually released.

The page looks fine in IE 8 and earlier, even though these browsers don’t understand the CSS3 I added.

You could work around IE’s failure to see some of the visual effects by feeding it the rounded corner images and so forth, but is it really worth it? It’s a lot of extra work for you, and it takes away all the great gains we’ve made in page performance for IE users. It depends on the project; there are lots of times where it makes sense. I’m not saying you should never provide workarounds for IE or other browsers, but you have to consider the tradeoffs.

Don‘t miss the next Insight article on Get the free newsletter in your mailbox each week. Click here to subscribe.

Excerpted from Stunning CSS3: A project-based guide to the latest in CSS by Zoe Mickley Gillenwater. Copyright © 2011. Used with permission of Pearson Education, Inc. and Peachpit Press.