Design the Planet

CSS 3 is just around the corner! Many web developers are asking the question, when should I start using this cutting edge web technology? The good news is that you can start using several CSS 3 techniques now for progressive enhancement with modern browsers.  Users of older browsers will still be able to access all the same content, but the user experience will be slightly different. (Sometimes this is known as graceful degradation.)

The important thing to remember when implementing these new web technologies is this idea of progressive enhancement.  Wikipedia defines progressive enhancement as “using web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”

Simply put, if you’re using a modern browser (Firefox, Google Chrome, Safari, Opera, or the yet to be released IE 9) you’ll notice some subtle (and not so subtle) improvements that add to the user experience while still allowing those using an outdated browser *cough* Internet Explorer, to be able to access the content.

Ok, so let’s get right down to it.  How can I use CSS 3 today? First, how about some really basic CSS3 – rounded corners. CSS 3 allows you to quickly create rounded corner designs without the use of your favorite graphics editor. In the code below, I’ve created a class called “corners” that will draw a 10px rounded corner around a container in Firefox. Other browsers will simply render square corners, which by no means will prevent those using older browsers from accessing content.

.corner {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}

Next, lets take a look at gradients. Again, as with the rounded corner example above,  you can create a look that would otherwise be achieved only using a graphics editor.  In the code below I’m targeting both Firefox and Safari/Chrome and drawing a gradient that starts with a dark gray (#444444) and ends with a light gray (#999999). Once again, newer browsers will show a browser rendered gradient while Internet Explorer will show a solid color.

.gradient {
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4 , Chrome */
}

Ok, one more example. CSS 3 transitions! Now this is some cool stuff. In the past, these effects would have to be created using something like jQuery or Flash. There are several transition/ animation techniques in CSS 3 including scaling, skewing, rotating, fades, and keyframe animations. Here, I’ll show you how to achieve a clean animation on a link. Here’s what the code below says: Anchor tags are given a color green. When you place your cursor over the link, it will have a linear fade to red which will take .5 seconds. Older browsers will simply see the link go from green to red without a transition.

a {
color: green;
-webkit-transition: color 0.5s linear;
}

a:hover {
color: red;
}

I could go on and on about this stuff. I really am excited about the future of the web! Although the official CSS 3 spec is yet to be released, it looks very promising. Combined with the excited developments of HTML 5, you’ll see fewer and fewer Flash based sites with the ability to create similar effects with these emerging technologies. Up next, HTML 5. Stay tuned.