Nathaniel Bagnell, Digiflare

Welcome to the final presentation of the day in the developer track, all about CSS3!

My name is Nathaniel Bagnell, and I’m an interactive developer at Digiflare, an interactive agency based in Toronto, Ontario

My hope is that this presentation will grow your knowledge in CSS and get you excited about CSS3

Quick CSS PrimerMilestones in CSSCSS3 In DepthQuick jQuery PrimerDemos and ExamplesClosing Statements

CSS stands for Cascading Style Sheets

CSS is used to apply styling to mark-up elements

With presentation separate from content, the pages become more flexible

The CSS1 specification became a W3C Recommendation in December 1996

In the year 2000, Internet Explorer 5.0 for Mac was the first browser to fully support the CSS1 specification

CSS1 brought fourth primitive design attributes such as controlling fonts, colouring, aligning of text and elements, margins, borders, and padding

The CSS2 specification became a W3C recommendation in May 1998

CSS2 brought fourth improved printing abilities, Aural CSS (to assist visually disabled users by applying style sheets to oral presentations), and position attributes

CSS 2.1 built upon CSS2; with its main goal being to correct a few errors found in CSS2

CSS 2.1 reflected and focused on features that were widely implemented for both HTML and XML.

CSS 2.1 is intended to replace CSS2

CSS3 brings forth a lot of exciting new features, in a different approach than previous iterations.

Let’s examine CSS3 in depth…

CSS3 contains vast array of new and improved capabilities, most which go beyond just simple aesthetics.

New changes have been implemented across almost every aspect of webpage styling, from fonts to media queries to animations and transitions

Instead of having one monolithic release, CSS3 features have been broken down into modules.

CSS3 is being released in modules, instead of one comprehensive release

W3C can bring modules up to the Recommendation Level (REC) at different times, based on their priority

Browser developers can implement CSS3 piece by piece, this helps speed up the overall implementation process

Some technologies and browsers do not need to support the full CSS3 specification.

Text-reader only browsers do not need to wait and support background and borders to be CSS3 compatible, just as a visual-only browser does not need to support aural properties.

Developers have the option of creating tailored subsets of CSS3 by selecting which modules they want to fully support.

CSS3’s module’s status varies significantly.

No module has yet to reach Recommendation (REC) Status

14% of modules are at Candidate Recommendation (CR) Status.

7% of modules are at the Last Call (LC) Status

63% of modules are still at Working Draft (WD) Status

16% of module’s specification track is not yet defined

I.E. (5) Firefox (3) Chrome (1) Opera (4) Safari (2)

V6.0: 4% V3.0: 29% V2.0: 79% V9.6: 34% V3.1: 50%

V7.0: 4% V3.5: 65% V3.0: 79% V10.1: 41% V3.2: 78%

V8.0: 10% V3.6: 71% V4.0: 87% V10.5: 71% V4.0: 87%

V9.0: 38%* V4.0: 81%* V5.0: 87% V10.x: 71%**

V4.x: 93%**

Average: 14.0%

Average: 61.5%

Average: 83.0%

Average: 54.3%

Average: 77%

*Current support, may change when development is complete** Potentially estimated support, may change when development is complete

So, how can we do CSS3 stuff now, and have all users experience it?...

We will use jQuery and several plug-ins to replicate CSS3 features that may not be supported in some of your target audience.

jQuery is a JavaScript library that allows you to quickly develop JavaScript based solutions

It has great cross browser support including IE6+, FF2+, Safari 3+, and Opera 9+. So, let’s get in to some demos!

Launch Examples

CSS3 will bring fourth a wealth of features that will make web development easier and more efficient

I estimate it will be three to four years until you can safely use CSS3 without extensive fall-backs.

Until then, use alternatives such as the jQuery examples shown here to have a consistent user experience, or have the site degrade gracefully

Don’t wait for CSS3 to become a full recommendation, at the least, experiment with CSS3 today in subtle ways, i.e. text-shadows

Thank you for your attendance, I hope you’ve enjoyed this session and the Make Web Not War 2010 conference.

To view the demos shown here, and more info on specific plugins used, visit my Twitter: @nathaniel401 as I will be tweeting a URL soon!

Have a safe ride back home!