Start learning about CSS 2.1 and CSS3 now

I just fin­ished explor­ing the lim­its of a few CSS3 prop­er­ties for another art­icle I wrote for web mixed grill. I quickly real­ised how lim­ited my know­ledge of CSS3 and even CSS2.1 is. The prob­lem has been that in the past few years I have been ignor­ing any CSS prop­er­ties not sup­por­ted by IE6. I was not will­ing to learn about prop­er­ties I could not put to imme­di­ate use, because the dom­in­ant browser did not sup­port it.

Well IE6 is no longer the dom­in­ant browser. For most sites the dom­in­ant browser is now IE7, which is 3 to 4 times more pop­u­lar than IE6. While there is no CSS3 sup­port in IE7 and even CSS2.1 sup­port is lim­ited. It is a sign of the times and with the release of IE8 with full CSS2.1 sup­port round the corner and hope­fully IE9 with CSS3 sup­port on the draw­ing board.

For this blog and other sites for people who have an interest in how the web works. IE7 is not the dom­in­ant browser. Fire­fox reigns supreme. OK supreme is little over the top, but more than 50% of the vis­it­ors here use Fire­fox, the great major­ity using Firefox3. While IE7 is still the 2nd most pop­u­lar browser, IE6 is 4th most pop­u­lar browser, below Safari3 and just above FireFox2, Chrome and Opera9.

So what have the stats got to do with it? You still have to sup­port IE6? Yes, but that does not mean I can not use the fea­tures of more advanced browsers to give their users a bet­ter exper­i­ence. As I had pre­vi­ously stated I will not use CSS tables for lay­out. Because the options are provide no altern­at­ive and deliver a poorly struc­tured site and a bad exper­i­ence to users of browsers (IE6 & IE7) that do not sup­port CSS tables. Or develop two sep­ar­ate lay­outs for browsers that do and do not sup­port CSS tables. How­ever, I will use CCS3 prop­er­ties like border-radius, text-shadow and box-shadow as well RGBA col­our to deliver a bet­ter user exper­i­ence through a bet­ter design and more usable inter­face to browsers that sup­port those properties.

While I have a good under­stand­ing of some CSS2.1 & CSS3 prop­er­ties, there are more that I need to know about, how they work, their lim­it­a­tions and can they be applied now. I will be look­ing at @font-face and select­ors in the next couple of weeks. And when the much talked about (by me) redesign finally hits this blog, expect a dif­fer­ence in your exper­i­ence depend­ing on what browser you turn up in.

So why should you start learn­ing about CSS2.1 and CSS3 now? Because you need to know what prop­er­ties you can use for pro­gress­ive enhance­ment and what prop­er­ties will have to remain in your tool­box until the great major­ity of user’s browsers sup­port CSS2.1 or CSS3. Because if you wait till until the great major­ity of user’s browsers sup­port CSS3, you will have a steep learn­ing curve and will be behind your col­leagues and com­pet­it­ors in what that can deliver.

This entry was posted on Monday, December 8th, 2008 at 7:57 am and is filed under css and html . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.