026 Modernizr

21 Dec 2012

Modernizr is a library for detecting whether the user’s browsers have certain features and based on the availability, we developers will trigger certain functions or styles. In this episode, we will take a simple slideshow and use both javascript and css3 to make the transitions based on features available with libraries such as yepnope and html5shiv. Most importantly, we will scratch the surface of what is graceful degradation and progressive enhancement.

Download video: mp4

Sample code: Github

Version: 2.6.2

Similar episodes: 021 GruntJS, 025 VirtualBox, 010 SASS

##Background on Modernizr and Tools

  1. Modernizr and documentation
  2. Understand Progressive Enhancement and wikipedia page
  3. Graceful degradation
  4. meanings of shim (or shiv) and polyfill - use with html5shiv
  5. Lynkx - text-only www browser: Can we visit top websites with Lynx?
  6. deCSS3 bookmarklet
  7. html5 shim
  8. yepnope.js
  9. haz.io - quick overview of your browser’s support for various features

##Resources on building the episode project

  1. Responsive slides jQuery plugin
  2. Pure CSS3 Cycling Slideshow
  3. Single Board Computers: Arduino, RasberryPI, Beagle Board, Panda Board

##Things to learn with Modernizr

####1. installing modernizr

  1. download the entire library from modernizr or cdnjs and put a <script> tag in the <head> of index.html. Open up the browser dev console to see some classes added to the <head> tag:


  2. you can also choose which features you want to detect and put the generate code inside the <head> tag as well

####2. feature detection

  1. CSS:
    • if a css property is not available:

      .box{ box-shadow: 0 0 10px 1px #666; } .no-boxshadow .box{ border: 3px solid grey; }

    • if a css property is available:

      .box{ border: 3px solid grey; } .boxshadow .box{ box-shadow: 0 0 10px 1px #666; }

    Use deCSS3 bookmarklet to easily test for with or without css3 - open up web dev console and copy the desired class needed from the <html>

  2. html5 tags:
    • include the option for html5shiv when generating the modernizr
    • now semantic html5 tags are easily seen in older browser as well
    • if the entire html5shiv library is not needed, then create the html5 element indivudally and put the javascript in the <head> tags
  3. javascript fallback:

    <script> yepnope({ test : Modernizr.cssanimations, yep : 'slides.css', nope : 'slides.js' }); </script>

##More Resources on Modernizr & Feature detection 1. Beginner and Designers Guide to using Modernize to solve cross browser challenges 2. Start your project right with Modernizr 3. create the html5 element indivudally

##Build Link of this Episode

The Big Web Show hosted by Jeffrey Zeldman.