Tweet
Tweet

Slide 1

Slide 1 text

Graceful Degradation ... with Modernizr leanmachine.se ▪ [email protected] ▪ 2013-09-06

Slide 2

Slide 2 text

“Graceful degra... whaaa?”

Slide 3

Slide 3 text

CSS3

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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. }

Slide 6

Slide 6 text

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. }

Slide 7

Slide 7 text

Detect browser features, not browser version.” “

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Include modernizr.js

Slide 10

Slide 10 text

1 HTML5 Shiv – Makes new HTML5 sectioning tags work in old browsers 2 CSS classes on element based on available features 3 Modernizr. in JavaScript

Slide 11

Slide 11 text

.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; }

Slide 12

Slide 12 text

if (Modernizr.boxshadow) { // Do cool stuff... }

Slide 13

Slide 13 text

http://modernizr.com/

Slide 14

Slide 14 text

leanmachine.se ▪ [email protected] ▪ 2013-09-06