Start learning about CSS 2.1 and CSS3 now

I just finished exploring the limits of a few CSS3 properties for another article I wrote for web mixed grill. I quickly realised how limited my knowledge of CSS3 and even CSS2.1 is. The problem has been that in the past few years I have been ignoring any CSS properties not supported by IE6. I was not willing to learn about properties I could not put to immediate use, because the dominant browser did not support it.

Well IE6 is no longer the dominant browser. For most sites the dominant browser is now IE7, which is 3 to 4 times more popular than IE6. While there is no CSS3 support in IE7 and even CSS2.1 support is limited. It is a sign of the times and with the release of IE8 with full CSS2.1 support round the corner and hopefully IE9 with CSS3 support on the drawing board.

For this blog and other sites for people who have an interest in how the web works. IE7 is not the dominant browser. Firefox reigns supreme. OK supreme is little over the top, but more than 50% of the visitors here use Firefox, the great majority using Firefox3. While IE7 is still the 2nd most popular browser, IE6 is 4th most popular browser, below Safari3 and just above FireFox2, Chrome and Opera9.

So what have the stats got to do with it? You still have to support IE6? Yes, but that does not mean I can not use the features of more advanced browsers to give their users a better experience. As I had previously stated I will not use CSS tables for layout. Because the options are provide no alternative and deliver a poorly structured site and a bad experience to users of browsers (IE6 & IE7) that do not support CSS tables. Or develop two separate layouts for browsers that do and do not support CSS tables. However, I will use CCS3 properties like border-radius, text-shadow and box-shadow as well RGBA colour to deliver a better user experience through a better design and more usable interface to browsers that support those properties.

While I have a good understanding of some CSS2.1 & CSS3 properties, there are more that I need to know about, how they work, their limitations and can they be applied now. I will be looking at @font-face and selectors in the next couple of weeks. And when the much talked about (by me) redesign finally hits this blog, expect a difference in your experience depending on what browser you turn up in.

So why should you start learning about CSS2.1 and CSS3 now? Because you need to know what properties you can use for progressive enhancement and what properties will have to remain in your toolbox until the great majority of user’s browsers support CSS2.1 or CSS3. Because if you wait till until the great majority of user’s browsers support CSS3, you will have a steep learning curve and will be behind your colleagues and competitors in what that can deliver.

5 Responses to “Start learning about CSS 2.1 and CSS3 now”

  1. Ben Buchanan Says:

    I agree – the time has come to start using these features. We can’t stop supporting IE yet, but we can put it on the secondary support list.

    I am on the long road of convincing clients that IE should no longer dictate everything we do. People still aren’t comfortable with the idea that things might look better in browsers other than IE… but the longer we wait, the longer it will be before we can really ignore IE6.

  2. Nick Says:

    It is hard to convince clients particularly when they are using IE6 themselves (required for their intranet) to give extra features to people using other browsers.

    It is a long hard road, but it is possible.

  3. John Faulds Says:

    Via 24Ways I just discovered today that Dean Edwards’ IE7 script enables support in IE6 for a lot of cool CSS2 features like attribute selectors which can be used to provide a lot of nice enhancements to a site (being careful to only use them for non-critical stuff in case js is turned off).

  4. Alan Hogan Says:

    Related link – http://pushuptheweb.com

  5. Nick Cowie » Lessons in Progressive Enhancement with CSS2 and CSS3 Says:

    […] I have said before, I have not changed how I code HTML and CSS for more than five years. I have made minor refinements […]

Google