Progressive
Enhancement
with CSS
Or how I stopped worrying about IE6 and
started loving CSS3
Nick Cowie
Reformed web standards fascist
nickcowie.com
@ nickobec

Why
build beautiful websites for just a few?

Just a few browsers?
10% Safari and Chrome
10% Firefox 3.5
5% Opera, Firefox 3 and others
15% IE8
47% IE7
13% IE6

CSS3 support
10% Now
20% in 6 months
40% in 2 years
90% in 4 years
100% Who knows?

Trust
Stanford-Makovsy Web Credibility Study
http://captology.stanford.edu/pdf/Stanford-
MakovskyWebCredStudy2002-prelim.pdf

Validation
-webkit-border-radius: 24px;

hacking CSS3 for IE
filter:
progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#ffffe8d8',
EndColorStr='#ffce401c');

Example
http://nickcowie.com/eotw

@font-face
No longer restricted to web safe fonts
Supported: FF3.5, SAF3, OP10, IE4
Unsupported: Next font in font stack
IE: .eot format, loads all @font-face
Problems: FOUT, failover

opacity
Elements are translucent
Supported: FF1.5, SAF1.2, OP9, IE5
Unsupported: Fully opaque
IE: filter: alpha(opacity = 75);
Problems: inherited
WCAG2 colour contrast

RGBa
Alpha channel on colours
Supported: FF3, SAF3, OP10
Unsupported: ignores RGBa colour
so set RGB colour before RGBa colour
IE: only in special cases

RGBa backgrounds in IE
hack
Use conditional comments
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#aaRRGGBB',
EndColorStr='#aaRRGGBB') ;

border-radius
Rounded corners on block elements
Supported: FF3, SAF3
Unsupported: ignores
IE: JavaScript or images
Problems: max size in some webkit
-moz-border-radius: 24px 0 24px 0;
-webkit-border-radius: 24px 0 24px 0;

text-shadow
Drop shadow for text
Supported: FF3.5, SAF3, OP9.5
Unsupported: ignores
IE: AVOID AT ALL COSTS filter: Shadow

box-shadow
Drop shadow block elements
Supported: FF3.5, SAF3, IE5
Unsupported: ignores
IE: filter: progid:DXImageTransform.Microsoft.dropshadow
(OffX=5, OffY=5, Color='#aaRRGGBB', Positive='true')";
Problems: inheritance in IE

transform
Alter the appearance of elements:
rotate, skew, flip ...
Supported: FF3.5, SAF4
Unsupported: ignores
IE: no
Problems: getting too smart

transition
Control the transition between two
states
Supported: FF3.7, SAF4
Unsupported: ignores
IE: has it own transition, but ...
Problems: getting too smart

gradients
Gradients as block elements background
Supported: SAF4, IE5
Unsupported: ignores
Provide alternatives first.
IE: filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#aaRRGGBB',
EndColorStr='#aaRRGGBB') ;

box-reflect
Reflects a box element and contents
Supported: SAF4
Unsupported: ignores
Tricks: Add a css mask with a gradient

css-mask
masks a box element and contents
Supported: SAF4
Unsupported: ignores

Wait there are more
I only chose a few to demonstrate a few, so get
a copy of Safari or Chrome and go explore
Surfin’ Safari or css3.info

Thank you
Now go make the web a more beautiful
place one website & one browser at a time
Slides: http://www.slideshare.net/nickobec/progressive-
enhancement-with-css3
Demo: http://nickcowie.com/eotw
References: http://delicious.com/nickobec/eotwpres
licensed under a Creative Commons Attribution 2.5 Australia Licence.
except Canny Bill screenshots © Andy Clarke
State Library of WA screenshots © State Library of WA
used with permission