Progressive enhancement with CSS3

Progressive Enhancement with CSSOr how I stopped worrying about IE6 and started loving CSS3Nick CowieReformed web standards fascistnickcowie.com@ nickobec

Whybuild 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?

TrustStanford-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-faceNo 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

opacityElements are translucent

Supported: FF1.5, SAF1.2, OP9, IE5

Unsupported: Fully opaque

IE: filter: alpha(opacity = 75);

Problems: inheritedWCAG2 colour contrast

RGBaAlpha channel on colours

Supported: FF3, SAF3, OP10

Unsupported: ignores RGBa colourso set RGB colour before RGBa colour

IE: only in special cases

RGBa backgrounds in IE hackUse conditional comments

background-color: transparent;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#aaRRGGBB', EndColorStr='#aaRRGGBB') ;

border-radiusRounded 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-shadowDrop shadow for text

Supported: FF3.5, SAF3, OP9.5

Unsupported: ignores

IE: AVOID AT ALL COSTS filter: Shadow

box-shadowDrop 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

transformAlter the appearance of elements:rotate, skew, flip ...

Supported: FF3.5, SAF4

Unsupported: ignores

IE: no

Problems: getting too smart

transitionControl the transition between twostates

Supported: FF3.7, SAF4

Unsupported: ignores

IE: has it own transition, but ...

Problems: getting too smart

gradientsGradients as block elements background

Supported: SAF4, IE5

Unsupported: ignoresProvide alternatives first.

IE: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#aaRRGGBB', EndColorStr='#aaRRGGBB') ;

box-reflectReflects a box element and contents

Supported: SAF4

Unsupported: ignores

Tricks: Add a css mask with a gradient

css-maskmasks a box element and contents

Supported: SAF4

Unsupported: ignores

Wait there are moreI 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 timeSlides: http://www.slideshare.net/nickobec/progressive-enhancement-with-css3Demo: 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 ClarkeState Library of WA screenshots © State Library of WAused with permission