modernizr: detect HTML5/CSS3 features not browsers, a simple quick start guide.
In a recent project, I used the new css3 property for 3d transforms to scale down an iframe preview window for websites. In testing compatibility, I realized that IE doesn't yet fully support 3d transforms for css3 - go figure. As this was part of a progressive feature set anyways I decided I could live without it on IE browsers (who uses this anymore anyways? ... ok I'm just kidding). My immediate thoughts was to detect browser type and disable the preview feature for all IE browsers and boy did this bring on bad flashbacks of my IE6-IE7 design days or what.
I decided to look a bit harder for alternatives and that's when I find out there has been a huge push to move away from browser detection to feature detection (Jquery for example plans to depreciate it's $.browser method and promotes use of it's $.support method instead). The rational is simple, find out what a browser can do rather than judging a book by it's cover.
- First configure your modernizr library to detect just the features you are looking for: http://modernizr.com/download/
- Download the library and stick this in your <head></head>: <script src="/js/modernizr.custom.76025.js"></script>
- Now place class="no-js" in your html tag like this: <html class="no-js">
Conceptually how it works:
- Upon page load, modernizr runs quickly to detect feature capabilities of the browser.
- modernizr then replaces the "no-js" class (in your html tag) with a set of classes that correspond to the browser's capability. In this case, it replaces "no-js" with "js csstransforms csstransforms3d" so that your html tag will look like this: <html class=" js csstransforms csstransforms3d"> In explorer, the tag looks like this: <html class=" js csstransforms no-csstransforms3d"> (Why does it do this? So you can easily use css classes to transform your css-based design according to feature capability.)
That's it. Hopefully this helps.