Graceful Degradation with Modernizr

1. Graceful Degradation ... with Modernizr leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06
2. “Graceful degra... whaaa?”
3. CSS3
5. if (browser == 'IE8') { // Add some css classes, etc. } if (browser == 'IE9') { // Add some css classes, etc. } if (browser == 'IE10') { // Add some css classes, etc. } if (browser == 'IE11') { // Add some css classes, etc. } if (browser == 'Chrome') { // Add some css classes, etc. } if (browser == 'Firefox') { // Add some css classes, etc. }
6. if (browser == 'IE8') { // Add some css classes, etc. } if (browser == 'IE9') { // Add some css classes, etc. } if (browser == 'IE10') { // Add some css classes, etc. } if (browser == 'IE11') { // Add some css classes, etc. } if (browser == 'Chrome') { // Add some css classes, etc. } if (browser == 'Firefox') { // Add some css classes, etc. }
7. Detect browser features, not browser version.” “
9. <head> <!-- CSS stylesheets above --> <script type="text/javascript" src="modernizr.js"></script> </head> Include modernizr.js
10. 1 HTML5 Shiv – Makes new HTML5 sectioning tags work in old browsers 2 CSS classes on <html> element based on available features 3 Modernizr.<feature> in JavaScript
11. .our-div { -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; box-shadow: #666 1px 1px 1px; } .no-boxshadow .our-div { border-bottom: 1px solid #666; border-right: 1px solid #777; }
12. if (Modernizr.boxshadow) { // Do cool stuff... }
13. http://modernizr.com/
14. leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06