Your SlideShare is downloading. ×
Progressive enhancement with CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Progressive enhancement with CSS3

5,768

Published on

Or how I stopped worrying about IE6 and started loving CSS3 …

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
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,768
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
99
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Progressive Enhancement with CSS Or how I stopped worrying about IE6 and started loving CSS3 Nick Cowie Reformed web standards fascist nickcowie.com @ 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 http://captology.stanford.edu/pdf/Stanford- 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 http://nickcowie.com/eotw
  • 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 css3.info
  • 22. 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

×