CSS3 vs. CSS

I believe in the power, speed and “update-ability” of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). At our company, we’ve happily been using CSS3 on client websites for over a year now, and I find that implementing many of these properties right now is the most sensible way to build websites.

Until today, all of that was based on an assumption: that I can produce a pixel-perfect Web page with CSS3 quicker than I can with older image-based CSS methods, and that the CSS3 page will load faster, with a smaller overall file size and fewer HTTP requests. As a single use case experiment, I decided to design and code a Web page and add visual enhancements twice: once with CSS3, and a second time using background images sliced directly from the PSD. I timed myself each round that I added the enhancements, and when finished, I usedPingdom to measure the loading times.

Here’s a fictitious Web page for Mercury Automobiles that might have been online had the Interweb existed back in the 1950s. The page was designed to showcase specific widely compliant CSS3 properties that in the past would have had to be achieved using background images.

Above is a diagram that breaks down where I applied visual enhancements first with CSS3, and then with
CSS background images (i.e. the image-based approach):

1. linear-gradient
2. border-radius
3. radial-gradient
4. text-shadow
5. box-shadow with RGBa

The Experiment Process

Day 1
I coded the HTML and CSS from a structural standpoint. That means no rounded corners, no shadows, no gradients and no images aside from logos and car photographs. I decided to include Web fonts at this phase because I wanted to focus on stuff that could also be done with the Web-safe font of your choice (Helvetica, Georgia, etc.). Furthermore, @font-face was around long before CSS3.

This gave me a blank canvas to add visual enhancements. The index pageshows the end of my day 1 work, as well as what unsupported browsers will display, the appearance of which is structurally intact and visually pleasing. More on this later, but the way I see it, older browsers aren’t penalized with a broken layout, and modern browsers are rewarded with a few visual bonuses. Part of implementing CSS3 is about planning ahead and designing websites that look fine as a fallback.

Day 2
Starting with the base index page. It took 49 minutes to complete. Here is the CSS code (css3.css):

/*-----CSS3 Started on 2/26/11 at 7:28 AM CST-----*/
h1 {
 text-shadow: -3px 2px 0px #514d46; }

#nav {
 -moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
 -webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
 box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
 background-image: -moz-linear-gradient(top, #5c5850, #48473e);
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5c5850),color-stop(1, #48473e));
 background-image: -webkit-linear-gradient(#5c5850, #48473e); 
 background-image: linear-gradient(top, #5c5850, #48473e); }

nav a {
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px; }

nav a:hover {
 background-color: #3a3e38;
 background-color: rgba(47, 54, 48, .7); }
 
nav a.active {
 background-color: #070807;
 background-color: rgba(7, 8, 7, .7); }

body {
 background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(#FBF8E3), to(#E6E3D0));
 background-image: -moz-radial-gradient(50% 10%, farthest-side, #FBF8E3, #E6E3D0); }

#learn_more, #details img {
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2);
 -moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2);
 box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); }

#learn_more a {
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 background-color: #cc3b23;
 background-image: -moz-linear-gradient(top, #cc3b23, #c00b00);
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cc3b23),color-stop(1, #c00b00));
 background-image: -webkit-linear-gradient(#cc3b23, #c00b00);
 background-image: linear-gradient(top, #cc3b23, #c00b00); }

a {
 -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
 -webkit-transition: all 0.3s ease-in;
 transition: all 0.3s ease-in; }
 
/*-----CSS3 Finished on 2/26/11 at 8:17 AM CST (49 minutes) -----*/

Day 3
I added visual enhancements by slicing and CSS’ing background images directly from the PSD. Even though there is less code, all of the extra app-switching and image-slicing added up to a total of 73 minutes to complete. Check out the page for the CSS image-based approach. Here’s the code (css.css):

/*-----CSS (the image-based approach) Started on 2/27/11 at 12:42 PM CST-----*/

#header {
 background: url(../img/navbg.png) left top repeat-x; }

body {
 background: #e6e3d0 url(../img/radial_gradient.jpg) no-repeat center top; }

#nav {
 background-color: transparent; }

h1 {
 background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent: -9999px; }

#learn_more {
 background-image: url(../img/learn_morebg.jpg);}

#details img {
 background-image: url(../img/detailsbg.jpg);}

#learn_more a {
 background: url(../img/learn_more_abg.jpg) no-repeat;}

.css3 {
 background: url(../img/css3_hover.png) no-repeat center top; }

.smashing {
 background: url(../img/smashing_hover.png) no-repeat center top; }

.trent {
 background: url(../img/trentwalton_hover.png) no-repeat center top;}

.css3:hover {
 background: url(../img/css3_hover.png) no-repeat center -20px;}

.css:hover {
 background: url(../img/css_hover.png) no-repeat center -20px;}

.smashing:hover {
 background: url(../img/smashing_hover.png) no-repeat center -20px;}

.trent:hover {
 background: url(../img/trentwalton_hover.png) no-repeat center -20px; }

.css {
 background: url(../img/css_hover.png) no-repeat center -50px; }

/*-----CSS (the image-based approach) Finished on 2/27/11 at 1:55 AM CST (1 hour and 13 minutes)-----*/

Production Time Results

So, we’re looking at a 24-minute difference: 49 minutes to add visual enhancements with CSS3, and 73 minutes to do it with images. For me, CSS3 was not only quicker but far more enjoyable, because I was focused on only one window (my CSS editor), unless I opted to pull some of the code from CSS3 Please. On the other hand, slicing images and switching from Photoshop to FTP to the CSS editor and back again was a hassle, and it did take longer.

It’s also worth noting that I did my best to stack the deck against CSS3. I coded it first so that any initial hashing out would be done before heading into day 3. Also, the images I did slice are as optimized as I could reasonably make them: one-pixel repeating slivers, and medium-resolution image exports. Overall, 24 minutes may not seem like a lot of time, but this is a fairly simple page. Imagine how much time (and money) could be saved over the course of a year.

What? Still not convinced?…

Thinking About The Future

WEBSITE UPDATES: THE EASY WAY AND THE HARD WAY

CSS3 really pays off when it comes to making updates and future-proofing Web pages from a maintenance perspective. Looking at the Mercury Automobiles website, think about what would have to go into changing the height of the three-column car images or the width of the bubble hover states for the navigation. For the sake of a quick production, I sliced these images to match precisely. One option would be to open Photoshop, rebuild and resize the images, update the appropriate CSS properties, and upload. Another would be to plan ahead and slice “telescoping” images, making one end a short rounded corner cap and another longer image on the opposite end that slides to fill the interior space. You’ve probably seen and done this before:

<div class="border_box_top"></div>
<div class="border_box_bottom">
 <img src="your_content_here.jpg" />
</div>

This isn’t ideal. While the technique comes in handy in a variety of instances, adding extra HTML just to achieve a rounded corner doesn’t seem efficient or sensible.

WHAT IF YOU WANT TO GO RESPONSIVE?

Serving different-sized images and changing the font size to suit a particular screen resolution simply couldn’t happen without CSS3. It’s wonderful how all of these new properties work together and complement each other. Imagine how time-consuming it would be to res-lice background images to accommodate varying image and font sizes that display at different screen resolutions. Yuk.

The Take-Away

For me, this simply proves what I’ve known all along: CSS3 pays off when it comes to production, maintenance and load times. Let’s revisit the numbers once more…

	CSS	CSS3	Results
Production time	73 minutes	49 minutes	CSS3 33% faster
Size	849.2 KB	767.9 KB	CSS3 9.5% smaller
Requests	22	12	CSS3 45% fewer

Yes, this is just one experiment, and the outcome was influenced by my own abilities. This isn’t meant to finally prove that implementing CSS3 no matter what will always be the right way to go. It’s just food for thought. I encourage you to track development and loading times on the websites you work on and make the best decision for you and, of course, your client.

We’re all concerned about browser compatibility, and opinions will differ. For me and most of my clients, this would be a perfectly acceptable fallback. Perhaps with more experiments like this that yield similar results, these statistics could be cited to both employers and clients. If a website could be produced 49% faster (or even half of that) with CSS3, imagine the benefits: money saved, earlier launch times, more time spent on adding “extras” that push the product over the top, not to mention a better browsing experience for everyone.