[v1.1] MooModernizr

updated version 1.1

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. Therefore it extends the Browser.Features object. MooModernizr is a Mootools 1.2 port of Modernizr 1.1.

• canvas
• canvastext
• geolocation
• rgba
• hsla
• multiplebgs
• borderimage
• borderradius
• boxshadow
• textshadow
• opacity
• cssanimations
• csscolumns
• cssgradients
• cssreflections
• csstransforms
• 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)
• input attributes
• localstorage
• sessionstorage
• webworkers
• applicationcache
• offlinedetection
• postmessage

MooModernizr is very easy to use. Just try:

You can find a full demo and download page here

Source code: Google Code (MIT license)

I think it's pretty cool, rather than testing for various browser versions to know when it's cool to use a feature or not, just go for the features themselves. No need to remember which browser supports what. Very handy tool, I think you should post it on the mootools user group if you have not already. Someone like Aaron might be interested in adding it to the "more", especially if you already extend the Browser object

Very nice!

I have tested this is in:
IE8, Safari 4, Firefox 3.0.12, Firefox 3.5 and opera 9

and would like to share my results:

Safari 4: work fine showed I could implement everything.
Firefox 3.0.12: showed I couldn't use 'border-radius', but I can if I use '-moz-border-radius'
Firefox 3.5: 'border-radius' again didn't show up although I could use '-moz-border-radius' and showed I could use 'box-shadow' although I still have to use 'moz-box-shadow'.
IE8: showed I couldn't use anything (transitions, gradients, reflections etc), but I could if I used Microsoft's CSS filter property to do this.
opera 9: showed I couldn't use anything.

I think this could the wrong impression if I used this alone to test for certain browser CSS features as they do implement some of these features with there own special CSS properties. This is why I test for Browser versions only and apply CSS accordingly.

Hope my insights are helpful and I look forward to seeing this script improve as I can see a lot of use for this.

bluff wrote:Very nice!

I have tested this is in:
IE8, Safari 4, Firefox 3.0.12, Firefox 3.5 and opera 9

and would like to share my results:

Safari 4: work fine showed I could implement everything.
Firefox 3.0.12: showed I couldn't use 'border-radius', but I can if I use '-moz-border-radius'
Firefox 3.5: 'border-radius' again didn't show up although I could use '-moz-border-radius' and showed I could use 'box-shadow' although I still have to use 'moz-box-shadow'.
IE8: showed I couldn't use anything (transitions, gradients, reflections etc), but I could if I used Microsoft's CSS filter property to do this.
opera 9: showed I couldn't use anything.

I think this could the wrong impression if I used this alone to test for certain browser CSS features as they do implement some of these features with there own special CSS properties. This is why I test for Browser versions only and apply CSS accordingly.

Hope my insights are helpful and I look forward to seeing this script improve as I can see a lot of use for this.

I know the firefox border-radius isn't working correctly yet. Modernizr borderradius test itself doesn't work either, so I have to find a solution for that. (Edit: read this tweet http://twitter.com/Modernizr/status/2580411370 according to the author of Modernizr, Firefox doesn't support border-radius according to the spec... I have no idea why.. I'll look at it )
I think this tool can help you decide whether you want to use the ms filter property. You can do something like this:


@ horseweapon: I'll post it at the user group, would be cool if it will be added to the "more"...

I 'fixed' the Firefox border-radius test. Like the author of Modernizr said on twitter, Firefox does implement border-radius differently than the specs or webkit.

That's cool! this makes it more appealing to use and more useful.

well done.

Neat!

I added video and audio tag tests too. I hope they're solid enough, since I don't have much experience with these tags

I created a github repository too, so you can fork the project and contribute.

Hi,

firefox gradient check need changed to:

-moz-linear-gradient(0,0)

cheers

atwork8 wrote:Hi,

firefox gradient check need changed to:

-moz-linear-gradient(0,0)

cheers

I dont think this would be appropriate. The CSS3 attribute name is "linear-gradient" not "-moz-linear-gradient". Firefox does this with a number of newer css3 attributes and should change them all to what the CSS3 specs say they should be called, not their own naming convention. Then it would be CSS3 compliant.