Embracing and Using CSS3 Pragmatically

Mar 21 2011 by John Macpherson | 18 Comments

Embracing and Using CSS3 Pragmatically

Web design is an industry where things change very fast. Over the last year or two, CSS3 has taken web design potential to a new level. It’s not that many more features are available in this latest iteration of the CSS specifications, it’s that CSS3 makes it easier to work with things that typically involved more work, more technologies, and more software. For example, basic animation and dynamic image capabilities such as color gradients were previously only possible with JavaScript, Flash, and image editing software like Photoshop. Not anymore.

There’s a lot to learn about CSS3, and it can be overwhelming if you’re just catching yourself up with what’s going on around you. Let’s look at how CSS3 — even though it’s not supported by all browsers (like IE6) — can be pragmatically implemented into your website production process.

Progressive Enhancement

Progressive enhancement is a key concept to apply while we are in this transitional period where not quite all of our users use browsers that have CSS3 capabilities.

Progressive enhancement simply means we can provide an enhanced experience to users whose browser has more features than those that use non-modern browsers.

You create sites focused on universal design and accessibility: Make sure that users with older browsers can use the site, but also take advantage of browser features found in modern browsers like Chrome and Opera.

Websites no longer need to be pixel-perfectly identical on different browsers. Here’s an example that uses progressive enhancement: Github’s Plans & Pricing page.

Below is the page viewed in Google Chrome. Notice that buttons and other page elements use CSS3 (text-shadow, gradient image values, box-shadow, border-radius, etc.):

On IE7 — a browser that doesn’t have support for these CSS3 properties and values — the page looks like this:

The difference is subtle to most Internet users. What’s important is that the page functions as intended and is accessible to everyone.

The page just takes advantage of features that Chrome has that IE7 doesn’t. The web designer took advantage of IE’s proprietary filter CSS property to render the color gradients, but didn’t try to render the rounded corners using CSS background images and CSS/HTML markup tricks to mimic text-shadow.

Progressive enhancement is a key enabler to using CSS3 in your web designs today.

Use Site Data to Make Decisions

Web designers should use data to make sound judgments. When working on a client’s site, it’s always useful to get some kind of data set about their current users.

Google Analytics (for example) is a completely free website analytics tool. Even running it for a week on the client’s website can help you gain vital information. Website analytics can show you what browsers are being used to access the web property, and from there, you can then see what percentage of browsers can handle CSS3.

If you are seeing high percentages of Chrome and Safari (both use the WebKit layout engine) then you should rejoice because they can handle a lot of what CSS3 has to offer. A very rough approximation of a general demographic suggests that Safari and Chrome have about 7% and 10% (respectively) of the browser market. Those numbers can be a lot higher or a lot lower depending on the site and the audience it draws in. Going on those numbers, though, means that about 1 in 5 people have the ability to experience CSS3.

Add to that the popular open source browser, Mozilla Firefox (and browsers like SeaMonkey and Flock that use the Mozilla layout engine), and the return of investment starts to look better.

Then, with IE9 being released this month, it just makes sense to use more CSS3 than not. IE9 isn’t perfect — and it isn’t as feature-rich as Chrome and Firefox when it comes to CSS3 and HTML5 (and thus, we would still need progressive enhancement even if we disregard older versions of this browser line) — but it’s a step in the right direction.

Learn and Practice CSS3 on Your Own Site

As a web designer, there’s a very big chance that you run your own portfolio website. Redesigning your site with CSS3 and progressive enhancement let’s you learn through real world, practical experience.

Using CSS3 on your own website also gives you the opportunity to show off your newly acquired skills to prospective clients.

Many pioneering CSS3 techniques and experiments began on the portfolio websites of web designers and web developers. It’s a fertile environment for innovation.

Summary

By looking at website statistics and data, you can make decisions on what CSS3 specifications you can implement on a site-to-site basis. Leveraging progressive enhancement makes pragmatic implementation of CSS3 something you can do today, even when many Internet users are still using browsers that can’t render CSS3.

We are at a stage in web design where different designs between browsers is accepted — and even expected. If you’re still hesitant about using CSS3 in your project work, don’t be. Embrace CSS3.

Related Content

About the Author

John Macpherson works for Media Surgery, providers of ExpressionEngine development services. He runs a podcast and video series about web development at Web Payload.

18 Comments

Dennis Stevenson

March 21st, 2011

Good post, some great information. Thank you.

James

March 21st, 2011

John, are you suggesting that rounded corners represent more than a simple design element and that because they’re available via css3 people should use them because they’re there?

I understand the sentiment and the progressive nature of using the css3 elements but I feel your article perhaps suggests rounded corners are an “enhancement” when they’re not. They’re simply a design element.

It’s not going to be long before everyone thinks rounded corners should exist on every element and this is patently wrong from a design perspective. Squared edges and text without drop-shadow is still perfectly acceptable!

Koewn

March 21st, 2011

Good article. Re-designing my own portfolio at the moment in CSS3. So this article comes at the right time. The power of CSS3 is endless and the more people get into modern browsers the better.

David Nemes

March 21st, 2011

Great,interesting post!

abiser

March 21st, 2011

A great example of how CSS3 can be implemented today.

bob marteal

March 21st, 2011

Good suggestions. Working things out on your personal site, or even a ‘labs’ section of your site is a great idea. The comparison images from GitHub are very useful. Thanks.

Derrick Koon

March 21st, 2011

I have seen designers use modern day methods to achieve the same effect as CSS3 and then go ahead and use CSS3 as well. In instances like that is it not just creating more work to have such redundancy? It seems that if you are using progressive enhancement you are shortchanging or discriminating against people who may not be technically savvy enough to stay upgraded to the latest browser just so you can use the “latest thing”.

Derrick Koon

March 21st, 2011

By the way that is just a statement NOT a personal accusation…… Have to remember not to use the term “YOU”

Andy Griffin

March 21st, 2011

This sentence really irks me:
“even though it’s not supported by all browsers (like IE6)”

Duh. IE9 is now the standard. IE6 is a decade old. Microsoft itself has declared IE6 is dead and they are recruiting us to help them kill it. By reminding people to even consider it is perpetuating the problem.
It’s time to drop support for IE6 for good!

Spicer Matthews

March 21st, 2011

Great post. We at Skyclerk just made the tough decision to kill IE7 support. http://skyclerk.com/blog/attention-internet-explorer-7-users We want to focus our design and programing energies on the future and not get hung up on the past.

It was a big decision. We are more or less discontinuing support for a chunk of our supportive users. We feel by doing this we can dive deeper into css3, html5, and cool javascript stuff.

I love reading postings like this because it is one more step towards wide acceptance of new technologies and funeral of old tech.

Hds

March 21st, 2011

That was a very informational article, thank you.

Fabiana Simões

March 21st, 2011

Well pointed, we have to keep in mind who is our audience.

I guess, if most of your audience is using browsers that support CSS3 properties, you should go with graceful degradation over progressive enhancement, so that you can really take advantage of latest features instead of just adding some rounded corners here and there.

Troy Peterson

March 22nd, 2011

The biggest issue I’ve had is educating clients on CSS3.

We’ll typically present a design with the intention of using CSS 3 for different elements (rounded corners, gradients, etc) and have to educate them that older browsers will see something a little different.

It can be difficult for them to grasp that more advanced browsers will see this, but not all.

Normally, when I give them the explanation that we CAN make it look like this in all browsers, but it will load slower and be more expensive because we need to use images… they accept it.

Sony

March 22nd, 2011

For using the CSS3 options in IE browser, we could add the javascript in document.

Jacob Gube

March 22nd, 2011

@James: I’m not sure where you got that from; I had to re-read the article to see where your assumption came from.

Andy Griffin

March 22nd, 2011

@Spicer: Where’s the “like” button?

Gleenk

March 24th, 2011

Nice post but I’ll have gone deep into the “progressive” analysis. It could be more interesting ;)

Michael Tuck

March 26th, 2011

The New Riders book “Designing with Progressive Enhancement,” by Parker, Toland, Jehl, and Wachs, is tremendously useful for this area of inquiry.

Leave a Comment

Subscribe to the comments on this article.