CSS3: Why wait?

So I got the opportunity to go to An Event Apart in Boston, which they coin as “Not your father’s web design conference”. This is true, it was a top-notch experience in “The Walking City” and proved to be very educational. The two-day event took place in one room, on one track and had some of the most brilliant designers, writers and developers on the web.

Every presenter was incredible to listen to and there was a general theme going on with all the presenters that spoke. CSS3, HTML5, web standards and user experience resounded loudly in almost every presentation, proving the web is evolving and changing rapidly. One mind-blowing stat by Luke Wroblewski was that there was a 4,932% increase, in AT&T mobile data traffic in the last 3 years, showing the compelling evidence that the web is moving towards mobile at an incredible pace.

Andy Clarke the “ambassador for CSS” gave a compelling presentation on CSS3 and how we can use it today with what he calls “progressive enrichment”, which is treating design elements as visual rewards for people whose browsers that can support them. He feels that web designs having to look the same in every browser is old school and we should design to the browsers capabilities based on when they are released and who made them.

I agree and think there is no need to make your websites pixel perfect in Internet Explorer anymore. Check out http://dowebsitesneedtolookexactlythesameineverybrowser.com in different browsers to see an example of “progressive enrichment” in action with the use of CSS3.

CSS3 Chart 1 CSS3 Chart 2 CSS3 Chart 3

Fortunately in the future, Microsoft has made promises to make their Explorer 9 browser more standard. Take a IE9 Test Drive – http://ie.microsoft.com/testdrive/.

Things we left on the moonFinally, my favorite speaker was Dan Cederholm, founder of SimpleBits a web designer and author based in Salem, Massachusetts. I liked his “The CSS3 Experience” presentation which was a themed by a Things Left on the Moon CSS3 showcase website, showing examples of real life uses of the CSS3 standard.  He emphasizes the use of CSS3 can be used to enhance websites in modern browsers that take advantage of it. From his showcase he went over many in depth examples of how to use CSS3 properties, transforms and animations.

A very simple example of using CSS3 today is using the RGBA property. It allows you to specify the color and the opacity but, you must have a back-up color specified when using RGBA, for non-standard browsers. As long as you put a preceding color element before the RGBA version for now, it will work in non-standard browsers and just show a solid color.  In the code below, you will notice the last value of .7, which represents the alpha level of the menu element.
Menu RGBA example

#nav li a {
   color: #ccc;
   color: rgba(255,255,255,.7);
}

Please check out the Things Left on the Moon showcase website, there are many great examples of CSS3 properties like border-radius, text-shadow, box-shadow, opacity, RGBA, and multiple backgrounds.

The key is to make use of CSS3 to enrich the users experience, in a subtle and functional manner.  CSS transforms, transitions, and animations will be supported in the next version of Firefox and hopefully Explorer 9 will come aboard, with full support.
Don’t wait, start using CSS3 now!