IT:AD:JScript:Libs:Modernizr

(UP)

Basics

Good summary
Download
Documentation
Add script in head, before page loads:

`<script src="modernizr-1.7.js type="text/javascript"></script>`

Add class="no-js" to html tag.
It will add class values to the HTML tag:

<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">`

If a feature is missing, the class name will have no- prepended.
List of classes can be found at modernizr docs

<html class="js

Will also create a JS object called Modernizr that has same values, as booleans, but more in depth:

Modernizr.video.h264

Does not provide emulation of these features.
What's interesting about the above classes is that one can now develop style sheets that only come into effect if the above styles are available.

By CSS:

    //original
    #content { border:2px outset #666;}

    //when border radius is supported:
    .borderadius #content {
      border: 1px solid #141414;
      -webkit-border-radius:12px;
      -mox-border-radius:12px;
      border-radius:12px;
    }

    //target browsers supporting boxshadow:
    .boxshadow #content {
      border:none;
      -webkit-box-shadow:rgba(0,0,0.5) 3px 3px 6px;
      -moz-box-shadow:rgba(0,0,0.5) 3px 3px 6px;
      box-shadow:rgba(0,0,0.5) 3px 3px 6px;
    }

Again by CSS:

    //Original
    h1 {font:27px/27px Baskervill, Palatino, "Palatino Linotype" } 

    @font-face {
      src:url(Beautiful-ES.ttf);
      font-family:"Beautiful";
      text-shadow: #aaa 5px 5px 5px;
    }
    //Targeting browsers that understand fontface
    .fontface h1 {
      font:42px/50px Beautiful;
      text-shadow:nonw;
    }

By code:

    // check for canvas
    if (Modernizr.canvas) {
        // We have canvas so add a rectangle
        var demospace = document.getElementById('demo-space');
        var context = demospace.getContext('2d');
        context.fillStyle = "rgb(255,0,0)";
        context.fillRect(10, 10, 10, 10)            
    } else {
        // No canvas. Remove the layout space to preserve the layout.
        var ul = document.getElementById('content');
        var li = document.getElementById('demo-space-wrapper');
        ul.removeChild(li);
    };