Upload
nick-cowie
View
5.775
Download
1
Embed Size (px)
DESCRIPTION
Or how I stopped worrying about IE6 and started loving CSS3 Presentation given at Edge of the Web, November 4, 2009
Citation preview
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');
@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