Last Friday I attended a CSS3 Wizardry Workshop run by local front-end web development company Clearleft. The workshop aimed to "blow our minds" with a day long set of lectures and exercises teaching myself and a few other front-end web developers the powerful new additions to the latest iteration of CSS.

CSS, or Cascading Style Sheets, is the language used to determine the presentation of a HTML page. If you've ever viewed a website with CSS disabled then you'll know just how integral this language has become in laying out modern webpages. Browsers today support CSS2 across the board (though ask a developer about IE6's CSS support and you'll be met with a groan and a grimace), but it's the very latest browser releases that support CSS3 that are pushing the limits of how we can design and display webpages. To put this in context, have a look at Chris's personal website with CSS enabled, and then without it, below:

We started off with a look at the new selectors that can be used to grab any section of the HTML markup. Previously restricted to relatively simple selectors forcing us to target elements by their IDs and class names, we can now use these new selectors to attach styles to (naming but a few here) siblings, children and adjacent elements. These additions will allow developers to produce cleaner HTML without as many classes and ID names cluttering up every div, p and span declaration.

Once we had got our heads around some tricky exercises based on these selectors (it was quite the wake up) we got stuck into how CSS3 can visually improve our webpages. Pleasingly, issues such as rounder corners on borders and drop shadows on containers, which previously required the use of images and nested divs, are now included in the CSS3 spec and can be achieved very simply with the border-radius and box-shadow properties. Along with these new features, gradients, image borders, text shadows, image reflections and image translations have all been included making my life as a developer much easier!

To illustrate this point, I have made the Cogapp logo entirely out of CSS3 and HTML without the use of any images. This uses the new drop-shadow, border-radius and transform properties to rotate it. The first screenshot shows how it looks in a CSS3 compatible browser. The second screenshot is how it looks in Internet Explorer 7 - a browser that does not support CSS3. For those using a modern browser (such as Firefox 3.5+, Safari 4 or Chrome) you can view the logo here.

This idea of "progressive enrichment" was an important one to take away from the workshop. CSS3 gives us the ability to use these new features on modern browsers, but we must make sure that our websites continue to function and display properly on older browsers. If, for example, we used the drop-shadow property on a webpage then it still wouldn't be a problem that it does not display on older browsers - the shadow is not vital to the webpage layout. However, certain new CSS3 ideas such as the exciting new box and column layouts are integral to the structure of the page and would therefore cause huge problems with how the webpage is displayed in older, non-CSS3-supporting browsers.

The final (and in my opinion most interesting) part of the workshop was the improved font and typography support that CSS3 offers. Using the new @font-face property, developers can now load in fonts in a number of different formats that will work across all browsers - provided the font is commercially available. This led to discussion about services such as Typekit and Clearleft's upcoming Fontdeck that will allow subscription payers the opportunity to use the huge range of fonts available from these services on their own websites. An example of @font-face property in use can be viewed here (NB you'll need the latest Safari, Chrome or Firefox to view this properly). Here's a comparison screenshot displaying the difference between browsers that do and do not support CSS3.

Overall it was a great insight into the kind of things that are going to be possible in the future for front-end web development. Of course it also highlighted minor frustrations due to CSS3 being so sporadically supported that it will probably be a good couple of years before these features will be a standard. However, with devices such as the iPhone (and presumably the iPad) restricting the user to browsing the web in the latest Safari (which supports CSS3) and growing dissent in supporting old browsers such as Internet Explorer 6 it may be possible to utilise these great new features in the not too distant future.