Progressive enhancement with CSS3


Published on

Or how I stopped worrying about IE6 and started loving CSS3

Presentation given at Edge of the Web, November 4, 2009

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Progressive enhancement with CSS3

  1. Progressive Enhancement with CSS Or how I stopped worrying about IE6 and started loving CSS3 Nick Cowie Reformed web standards fascist @ nickobec
  2. Why build beautiful websites for just a few?
  3. Just a few browsers? 10% Safari and Chrome 10% Firefox 3.5 5% Opera, Firefox 3 and others 15% IE8 47% IE7 13% IE6
  4. CSS3 support 10% Now 20% in 6 months 40% in 2 years 90% in 4 years 100% Who knows?
  5. Trust Stanford-Makovsy Web Credibility Study MakovskyWebCredStudy2002-prelim.pdf
  6. Validation -webkit-border-radius: 24px;
  7. hacking CSS3 for IE filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ffffe8d8', EndColorStr='#ffce401c');
  8. Example
  9. @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
  10. opacity Elements are translucent Supported: FF1.5, SAF1.2, OP9, IE5 Unsupported: Fully opaque IE: filter: alpha(opacity = 75); Problems: inherited WCAG2 colour contrast
  11. 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
  12. RGBa backgrounds in IE hack Use conditional comments background-color: transparent; filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#aaRRGGBB', EndColorStr='#aaRRGGBB') ;
  13. 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;
  14. text-shadow Drop shadow for text Supported: FF3.5, SAF3, OP9.5 Unsupported: ignores IE: AVOID AT ALL COSTS filter: Shadow
  15. 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
  16. transform Alter the appearance of elements: rotate, skew, flip ... Supported: FF3.5, SAF4 Unsupported: ignores IE: no Problems: getting too smart
  17. transition Control the transition between two states Supported: FF3.7, SAF4 Unsupported: ignores IE: has it own transition, but ... Problems: getting too smart
  18. 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') ;
  19. box-reflect Reflects a box element and contents Supported: SAF4 Unsupported: ignores Tricks: Add a css mask with a gradient
  20. css-mask masks a box element and contents Supported: SAF4 Unsupported: ignores
  21. 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
  22. Thank you Now go make the web a more beautiful place one website & one browser at a time Slides: enhancement-with-css3 Demo: References: 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