Download - Progressive enhancement with CSS3
![Page 1: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/1.jpg)
Progressive Enhancement with CSSOr how I stopped worrying about IE6 and started loving CSS3Nick CowieReformed web standards fascistnickcowie.com@ nickobec
![Page 2: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/2.jpg)
![Page 3: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/3.jpg)
![Page 4: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/4.jpg)
![Page 5: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/5.jpg)
Whybuild beautiful websites for just a few?
![Page 6: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/6.jpg)
Just a few browsers? 10% Safari and Chrome
10% Firefox 3.5
5% Opera, Firefox 3 and others
15% IE8
47% IE7
13% IE6
![Page 7: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/7.jpg)
CSS3 support
10% Now
20% in 6 months
40% in 2 years
90% in 4 years
100% Who knows?
![Page 8: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/8.jpg)
![Page 9: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/9.jpg)
![Page 10: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/10.jpg)
TrustStanford-Makovsy Web Credibility Study
http://captology.stanford.edu/pdf/Stanford-MakovskyWebCredStudy2002-prelim.pdf
![Page 11: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/11.jpg)
![Page 12: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/12.jpg)
![Page 13: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/13.jpg)
![Page 14: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/14.jpg)
Validation
-webkit-border-radius: 24px;
![Page 15: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/15.jpg)
hacking CSS3 for IE
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffe8d8', EndColorStr='#ffce401c');
![Page 17: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/17.jpg)
@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
![Page 18: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/18.jpg)
opacityElements are translucent
Supported: FF1.5, SAF1.2, OP9, IE5
Unsupported: Fully opaque
IE: filter: alpha(opacity = 75);
Problems: inheritedWCAG2 colour contrast
![Page 19: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/19.jpg)
RGBaAlpha channel on colours
Supported: FF3, SAF3, OP10
Unsupported: ignores RGBa colourso set RGB colour before RGBa colour
IE: only in special cases
![Page 20: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/20.jpg)
![Page 21: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/21.jpg)
RGBa backgrounds in IE hackUse conditional comments
background-color: transparent;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#aaRRGGBB', EndColorStr='#aaRRGGBB') ;
![Page 22: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/22.jpg)
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;
![Page 23: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/23.jpg)
text-shadowDrop shadow for text
Supported: FF3.5, SAF3, OP9.5
Unsupported: ignores
IE: AVOID AT ALL COSTS filter: Shadow
![Page 24: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/24.jpg)
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
![Page 25: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/25.jpg)
transformAlter the appearance of elements:rotate, skew, flip ...
Supported: FF3.5, SAF4
Unsupported: ignores
IE: no
Problems: getting too smart
![Page 26: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/26.jpg)
transitionControl the transition between twostates
Supported: FF3.7, SAF4
Unsupported: ignores
IE: has it own transition, but ...
Problems: getting too smart
![Page 27: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/27.jpg)
gradientsGradients as block elements background
Supported: SAF4, IE5
Unsupported: ignoresProvide alternatives first.
IE: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#aaRRGGBB', EndColorStr='#aaRRGGBB') ;
![Page 28: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/28.jpg)
box-reflectReflects a box element and contents
Supported: SAF4
Unsupported: ignores
Tricks: Add a css mask with a gradient
![Page 29: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/29.jpg)
css-maskmasks a box element and contents
Supported: SAF4
Unsupported: ignores
![Page 30: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/30.jpg)
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
![Page 31: Progressive enhancement with CSS3](https://reader036.vdocuments.site/reader036/viewer/2022081403/55492c44b4c905a54c8bf22b/html5/thumbnails/31.jpg)
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