MooModernizr 1.1

Mootools HTML5/CSS3 feature detection

MooModernizr 1.1 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.1. 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

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

List of HTML5 input attributes tests

The inputattrubutes is an object Browser.Features.inputattrubutes. So the types can be accessed by Browser.Features.inputattrubutes.autocomplete

Yes: Your Browser supports this feature
No: To bad, your browser does not support this feature (yet)

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

Dependencies

Download & links

Previous versions

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

canvas

Syntax

Browser.Features.canvas

Returns

(boolean)

canvastext

Syntax

Browser.Features.canvastext

Returns

(boolean)

geolocation

Syntax

Browser.Features.geolocation

Returns

(boolean)

rgba

Syntax

Browser.Features.rgba

Returns

(boolean)

hsla

Syntax

Browser.Features.hsla

Returns

(boolean)

multiplebgs

Syntax

Browser.Features.multiplebgs

Returns

(boolean)

borderimage

Syntax

Browser.Features.borderimage

Returns

(string) - The element.style property name e.g. webkitBorderImage

borderradius

Syntax

Browser.Features.borderradius

Returns

textshadow

Syntax

Browser.Features.textshadow

Returns

opacity

Syntax

Browser.Features.opacity

Returns

(boolean) - true if supported, false if unsupported

cssanimations

Syntax

Browser.Features.cssanimations

Returns

csscolumns

Syntax

Browser.Features.csscolumns

Returns

cssgradients

Syntax

Browser.Features.cssgradients

Returns

(boolean)

cssreflections

Syntax

Browser.Features.cssreflections

Returns

csstransforms

Syntax

Browser.Features.csstransforms

Returns

csstransforms3d

Syntax

Browser.Features.csstransforms3d

Returns

csstransitions

Syntax

Browser.Features.csstransitions

Returns

video

Syntax

Browser.Features.video

Returns

audio

Syntax

Browser.Features.audio

Returns

localstorage

Test for Local Storage

Syntax

Browser.Features.localstorage

Returns

(boolean)

sessionstorage

Test for Session Storage

Syntax

Browser.Features.sessionstorage

Returns

(boolean)

webworkers

Test for Web Workers

Syntax

Browser.Features.webworkers

Returns

(boolean)

applicationcache

Test for Offline Web Applications

Syntax

Browser.Features.applicationcache

Returns

(boolean)

offlinedetection

Test for navigator.onLine. This test will return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail), and must return true otherwise.

Syntax

Browser.Features.offlinedetection

Returns

(boolean)

postmessage

Test if the browsers supports window.postMessage, is a method for safely enabling cross-origin communication.

Syntax

Browser.Features.postmessage

Returns

(boolean)

webdatabase

Test if the browsers supports Database storage

Syntax

Browser.Features.webdatabase

Returns

(boolean)

query

Test for the document.querySeletor

Syntax

Browser.Features.query

Returns

(boolean)

json

Test for the native JSON api

Syntax

Browser.Features.json

Returns

(boolean)

inputtypes

Syntax

Browser.Features.inputtypes

Returns

inputattributes

Syntax

Browser.Features.inputattributes

Returns

fontface

Deprecated: use $extend(Browser.Features,{fontface: function(){...}); instead. Check for the test function here
I did not include this test because it would make the file to heavy, since I try to keep it as small as posible.

Add more features and tests

If you want, you can add more featues and test using the $extend method of MooTools.

$extend(Browser.Features,{
	myTest: function(){
		return 1.0 === 1;
	}
});

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(Browser,{
	
	enableHTML5: function(){
		elems = 'abbr article aside audio canvas datalist details eventsource figure footer'
		+' header hgroup mark menu meter nav output progress section time video';
		elems.split(' ').each(function(tag){
			new Element(tag);
		})
		mooModernizr.enableHTML5 = $lambda(true);
		return true;
	}
		
});

Browser.enableHTML5();

Created by