Mootools CSS3 feature detection

MooModernizr is a Mootools 1.2 port of Modernizr 0.9. It includes tests for a variety of CSS 3 features. Therefore it extends the Browser.Features object.
Modernizr supports some extra functionality, like add a class to the body element (so you can do if-else in your css file), some html5 stuff for IE etc. I, however, decided to not include this to MooModernizr. This is because this 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 - VERY rudimentary
• rgba
• hsla
• multiplebgs
• borderimage
• borderradius
• boxshadow
• textshadow
• opacity
• cssanimations
• csscolumns - VERY rudimentary
• cssgradients
• cssreflections
• csstransforms
• csstransitions
• video tag
• audio tag
• query - use native selector engine document.querySelecotorAll()
• json - use native JSON

Basic functionallity

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

Javascript:

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

What does it return?

Most of the tests return true or false. Some tests however return a string. For example borderradius. As you can see here, Firefox does not 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 following tests return a string. All the other tests do return true/false.

• borderimage
• borderradius
• boxshadow
• textshadow
• cssanimations
• csscolumns
• cssreflections
• csstransforms
• csstransitions

if-else in my CSS file, just like Modernizr

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

CSS:

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

Javascript:
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);
		}
	});
	
});

Create HTML5 for styling in IE

Javascript:
window.addEvent('domready',function(){

	'abbr article aside audio bb canvas '+
	'datagrid datalist details dialog figure '+
	'footer header mark menu meter nav output '+
	'progress section time video'+
	''.split(' ').each(function(tag){
		new Element(tag);
	});	
	
});

Dependencies

• Mootools 1.2.x
  • Core
  • Browser
  • Element

Download & links

• Full, uncompressed version mooModernizr.js (9.1 kb) (if you want to add/delete/edit tests)
• Minified version mooModernizr-min.js (4.8 kb)
• Look at the source at Github.com
• Follow the discussion at mooforum.net
• Download at eSteak

Created by

• First of all: Modernizr
• Author of the Mootools version: Arian Stolwijk: Aryweb webdevelopment