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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Progressive enhancement with CSS3

  • 5,722 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,722
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
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