IT:AD:JScript:Libs:Modernizr

`<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);
    };