MooModernizr 1.0

Mootools CSS3 feature detection

MooModernizr 1.0 tests the browser's CSS3 and HTML5 capabilities. This by extending MooTools' Browser.Features object with a variety of CSS3 and HTML5 features. It is a MooTools 1.2 port of Modernizr 1.0. However some functionallity of Modernizr does not fit into the Browser.Features object. But I will explain how you can add this functionallity yourself whith some examples below.

List of CSS3/HTML5 feature tests

• canvas
• canvastext
• geolocation
• rgba
• hsla
• multiplebgs
• borderimage
• borderradius
• boxshadow
• textshadow
• opacity
• cssanimations
• csscolumns
• cssgradients
• cssreflections
• csstransforms
• csstransforms3d
• csstransitions
• video tag
• audio tag
• query - use native selector engine document.querySelecotorAll()
• json - use native JSON
• inputtypes - does the user agent support any html5 inputtype(s)
• inputplaceholder
• inputautofocus
• localstorage
• webworkers
• applicationcache
• fontface

List of HTML5 input type tests

The inputtypes is an object Browser.Features.inputtypes. So the types can be accessed by Browser.Features.inputtypes.search

• search
• tel
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

Basic usage

You can use the new test just like Browser.Features.xpath and Browser.Features.xhr (link).

// Does the browser support textshadow
alert(Browser.Features.textshadow);

// Does the browser support cssclumns
alert(Browser.Features.csscolumns);

if(!Browser.Features.borderradius){
	// Do something... (http://www.phatfusion.net/roundedcorners/)
	var box = new RoundedCorners('.roundedContent', {radius: 49});
}

Docs

Most of the tests return true or false. But some tests return a string. For example borderradius. As you can see here, Firefox uses another attribute for border-top-left-radius: -moz-border-radius-topleft. To detect this, Browser.Features.borderradius returns MozBorderRadiusTopright in Firefox. With this you can create another if-else. The browser prefixes which are used are Moz, moz, webkit, o and ms.

Note: You also might be interested in the Modernizr docs

if-else in my CSS file, just like Modernizr

This can be very handy. For example, you can put this in your css file.

body.boxshadow #contentbox {
	box-shadow: 10px 10px 5px #888;
}

body.no-boxshadow #contentbox {
	/* extra fat border, as alternative */
	border: 10px black solid;
}

And this in your javascript file / document head

window.addEvent('domready',function(){
	$each(Browser.Features, function(item,index){
		if(item){
			$(document.body).addClass(index);
		}else{
			$(document.body).addClass('no-'+index);
		}
	});
	
	// Or if you only want to check for some features you can do this
	['textshadow','borderradius'].each(function(item){
		if(Browser.Features[item]){
			$(document.body).addClass(item);
		}else{
			$(document.body).addClass('no-'+item);
		}
	});
	
});

Enable HTML5 elements for styling in IE

Add this code before the domready event

$extend(mooModernizr,{
	
	enableHTML5: function(){
		elems = 'abbr article aside audio bb canvas datagrid datalist details dialog figure ';
		elems += 'footer header mark menu meter nav output progress section time video';
		elems.split(' ').each(function(tag){
			new Element(tag);
		})
		mooModernizr.enableHTML5 = $lambda(true);
		return true;
	}
		
});

mooModernizr.enableHTML5();

Dependencies

• Mootools 1.2.x
  • Core
  • Browser
  • Element

Download & links

• Full, uncompressed version mooModernizr.js (14,6 kb) (if you want to add/delete/edit tests)
• Minified version mooModernizr-min.js (8.3 kb)
• Look at the source at Google Code
• Follow the discussion at mooforum.net
• Download at eSteak

Created by

• First of all: Modernizr
• Thanks to Dive Into HTML5 for some additional tests
• Author of the Mootools version: Arian Stolwijk: Aryweb webdevelopment