Your SlideShare is downloading. ×
0
Progressive
Enhancement
Eric Lightbody
(and how you will LOVE CSS3)
Thursday, November 4, 2010
Enhancing and Degrading
Thursday, November 4, 2010
1. Support all browsers with perfect fidelity
2. Support all browsers to some degree
3. Support newer, forget older
Thursd...
Enough theory already!
Thursday, November 4, 2010
Thursday, November 4, 2010
Thursday, November 4, 2010
What does it look like?
Thursday, November 4, 2010
Example time
Thursday, November 4, 2010
Modernizr
Thursday, November 4, 2010
<html lang="en" class=" js canvas canvastext
geolocation crosswindowmessaging websqldatabase
no-indexeddb hashchange histo...
<html lang="en" class="js no-canvas no-canvastext no-
geolocation crosswindowmessaging no-websqldatabase
no-indexeddb no-h...
#br {
background-color: #111f;
color: #fff;
width: 450px;
padding: 10px;
loat: left;
}
.borderradius #br {
border-radiu...
#br {
background-color: #111f;
color: #fff;
width: 450px;
padding: 10px;
loat: left;
}
.borderradius #br {
border-radiu...
IE
Chrome
Thursday, November 4, 2010
#shadow {
width: 450px;
padding: 10px;
loat: left;
border-bottom: 1px solid #666;
border-right: 1px solid #777;
}
.boxsha...
#shadow {
width: 450px;
padding: 10px;
loat: left;
border-bottom: 1px solid #666;
border-right: 1px solid #777;
}
.boxsha...
IE
Chrome
Thursday, November 4, 2010
#alpha {
loat: left;
background: transparent url(images/iro.jpg) no-repeat 0 0;
position:relative;
}
#alpha div {
backgro...
#alpha {
loat: left;
background: transparent url(images/iro.jpg) no-repeat 0 0;
position:relative;
}
#alpha div {
backgro...
IE Chrome
Thursday, November 4, 2010
Thursday, November 4, 2010
Thursday, November 4, 2010
Thursday, November 4, 2010
Thursday, November 4, 2010
Thursday, November 4, 2010
Thursday, November 4, 2010
Thank You
References:
alistapart.com/articles/understandingprogressiveenhancement/
perishablepress.com/press/2010/01/11/cs...
Upcoming SlideShare
Loading in...5
×

Progressive enhancement

520

Published on

This was a presentation I did for our local CWCW group (http://www.uwec.edu/cwcw/) where I explained and the idea of progressive enhancement. I then went on to explain how to turn it from a concept to reality.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
520
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Progressive enhancement"

  1. 1. Progressive Enhancement Eric Lightbody (and how you will LOVE CSS3) Thursday, November 4, 2010
  2. 2. Enhancing and Degrading Thursday, November 4, 2010
  3. 3. 1. Support all browsers with perfect fidelity 2. Support all browsers to some degree 3. Support newer, forget older Thursday, November 4, 2010
  4. 4. Enough theory already! Thursday, November 4, 2010
  5. 5. Thursday, November 4, 2010
  6. 6. Thursday, November 4, 2010
  7. 7. What does it look like? Thursday, November 4, 2010
  8. 8. Example time Thursday, November 4, 2010
  9. 9. Modernizr Thursday, November 4, 2010
  10. 10. <html lang="en" class=" js canvas canvastext geolocation crosswindowmessaging websqldatabase no-indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssrelections csstransforms no- csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface"> Chrome Thursday, November 4, 2010
  11. 11. <html lang="en" class="js no-canvas no-canvastext no- geolocation crosswindowmessaging no-websqldatabase no-indexeddb no-hashchange no-historymanagement draganddrop no-websockets no-rgba no-hsla no- multiplebgs no-backgroundsize no-borderimage no- borderradius no-boxshadow no-opacity no- cssanimations no-csscolumns no-cssgradients no- cssrelections no-csstransforms no-csstransforms3d no- csstransitions fontface no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no- svg no-smil no-svgclippaths”> IE8 Thursday, November 4, 2010
  12. 12. #br { background-color: #111f; color: #fff; width: 450px; padding: 10px; loat: left; } .borderradius #br { border-radius: 20px 20px 0 0; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; } Thursday, November 4, 2010
  13. 13. #br { background-color: #111f; color: #fff; width: 450px; padding: 10px; loat: left; } .borderradius #br { border-radius: 20px 20px 0 0; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; } Thursday, November 4, 2010
  14. 14. IE Chrome Thursday, November 4, 2010
  15. 15. #shadow { width: 450px; padding: 10px; loat: left; border-bottom: 1px solid #666; border-right: 1px solid #777; } .boxshadow #shadow { border: none; box-shadow: #666 3px 3px 6px; -moz-box-shadow: #666 3px 3px 6px; -webkit-box-shadow: #666 3px 3px 6px; } Thursday, November 4, 2010
  16. 16. #shadow { width: 450px; padding: 10px; loat: left; border-bottom: 1px solid #666; border-right: 1px solid #777; } .boxshadow #shadow { border: none; box-shadow: #666 3px 3px 6px; -moz-box-shadow: #666 3px 3px 6px; -webkit-box-shadow: #666 3px 3px 6px; } Thursday, November 4, 2010
  17. 17. IE Chrome Thursday, November 4, 2010
  18. 18. #alpha { loat: left; background: transparent url(images/iro.jpg) no-repeat 0 0; position:relative; } #alpha div { background-color:#FFF; position:absolute; } .rgba #alpha div { background-color: rgba(255,255,255, .7); } Thursday, November 4, 2010
  19. 19. #alpha { loat: left; background: transparent url(images/iro.jpg) no-repeat 0 0; position:relative; } #alpha div { background-color:#FFF; position:absolute; } .rgba #alpha div { background-color: rgba(255,255,255, .7); } Thursday, November 4, 2010
  20. 20. IE Chrome Thursday, November 4, 2010
  21. 21. Thursday, November 4, 2010
  22. 22. Thursday, November 4, 2010
  23. 23. Thursday, November 4, 2010
  24. 24. Thursday, November 4, 2010
  25. 25. Thursday, November 4, 2010
  26. 26. Thursday, November 4, 2010
  27. 27. Thank You References: alistapart.com/articles/understandingprogressiveenhancement/ perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/ alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/ http://stuffandnonsense.co.uk/blog/about/what_does_browser_testing_mean_today Thursday, November 4, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×