CSS3 Web Wizardry

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.

Read more