/** * @author Arian Stolwijk * This is the mootools translation of Modernizr 0.9 * This version is also released under the MIT license. * */ // These are the original notes of the original author /* * Modernizr JavaScript library 0.9 * http://modernizr.com/ * * Copyright (c) 2009 Faruk Ates * Licensed under the MIT license. * http://modernizr.com/license/ * * Date: 2009-06-10 15:00:51 -0800 (Wed, 10 Jun 2009) */ /** * Modernizr is a script that will detect various native CSS3 features * available in the current UA and provide an object containing all * features with a true/false value, depending on whether the UA has * native support for it or not. * * In addition to that, Modernizr will add classes to the * element of the page, one for each cutting-edge feature. If the UA * supports it, a class like "cssgradients" will be added. If not, * the class name will be "no-cssgradients". This allows for simple * if-conditionals in CSS styling, making it easily to have fine * control over the look and feel of your website. * * @author Faruk Ates * @copyright (2009) Faruk Ates. */ (function(){ var m = new Element('mooModernizr'); var prop, i, tmp; // Private funtion // Loop through all possible properties and see if we get a valid response at all checkProperties = function(prop){ var i = 0; for (i in prop) { if ($defined(m.style[prop[i]])) { return prop[i]; } } return false; } $extend(Browser.Features,{ canvas: !!new Element('canvas').getContext, rgba: (function(){ // Set an rgba() color and check the returned value m.style.cssText = "background-color: rgba(150,255,150, .5)"; return !!(m.style.backgroundColor.indexOf('rgba') !== -1); })(), hsla: (function(){ // Same as rgba(), in fact, browsers re-map hsla() to rgba() internally m.style.cssText = "background-color: hsla(120,40%,100%, .5)"; return !!(m.style.backgroundColor.indexOf('rgba') !== -1); })(), multiplebgs: (function(){ // Setting multiple images and a color on the background shorthand property // and then querying the style.background property value for the number of // occurrences of "url(" is a reliable method for detecting ACTUAL support for this! m.style.cssText = "background: url(m.png), url(a.png), #f99 url(m.png);"; // If the UA supports multiple backgrounds, there should be three occurrences // of the string "url(" in the return value for elem.style.background tmp = m.style.background; i = 0; while (tmp.indexOf('url(') !== -1) { i++; tmp = tmp.substring(0, tmp.indexOf('url(')) + tmp.substring(tmp.indexOf('url(') + 4); } tmp = null; // If i==3 then the UA handled this correctly. return !!(i === 3); })(), borderimage: (function(){ // 'prop" is a list of DOM properties we want to check against. We specify // literally ALL possible (known and/or likely) properties on the element // including the non-vendor prefixed one, for forward compatibility. prop = ['borderImage', 'webkitBorderImage', 'MozBorderImage', 'mozBorderImage', 'oBorderImage', 'msBorderImage']; m.style.cssText = "border-image: url(m.png) 1 1 stretch; -webkit-border-image: url(m.png) 1 1 stretch; -moz-border-image: url(m.png) 1 1 stretch; -o-border-image: url(m.png) 1 1 stretch; -ms-border-image: url(m.png) 1 1 stretch;"; return checkProperties(prop); })(), borderradius: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = [ 'borderTopRightRadius', 'webkitBorderTopRightRadius', 'MozBorderTopRightRadius', 'mozBorderTopRightRadius', 'oBorderTopRightRadius', 'msBorderTopRightRadius', 'mozBorderRadiusTopright', 'MozBorderRadiusTopright' ]; m.style.cssText = "border-top-right-radius: 10px; "+ "-webkit-border-top-right-radius: 10px; "+ "-moz-border-top-right-radius: 10px; "+ "-o-border-top-right-radius: 10px; "+ "-ms-border-top-right-radius: 10px;"+ "-moz-border-radius-topright: 10px"; return checkProperties(prop); })(), boxshadow: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = ['boxShadow', 'webkitBoxShadow', 'MozBoxShadow', 'mozBoxShadow', 'oBoxShadow', 'msBoxShadow']; m.style.cssText = "box-shadow: #000 1px 1px 3px; -webkit-box-shadow: #000 1px 1px 3px; -moz-box-shadow: #000 1px 1px 3px; -obox-shadow: #000 1px 1px 3px; -ms-box-shadow: #000 1px 1px 3px;"; return checkProperties(prop); })(), textshadow: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = ['textShadow', 'webkitTextShadow', 'MozTextShadow', 'mozTextShadow', 'oTextShadow', 'msTextShadow']; m.style.cssText = "text-shadow: 1px 1px 3px #000; -webkit-text-shadow: 1px 1px 3px #000; -moz-text-shadow: 1px 1px 3px #000; -o-text-shadow: 1px 1px 3px #000; -ms-text-shadow: 1px 1px 3px #000;"; return checkProperties(prop); })(), opacity: (function(){ // Browsers that actually have CSS Opacity implemented have done so // according to spec, which means their return values are within the // range of [0.0,1.0] - including the leading zero. m.style.cssText = "opacity: .5;"; return !!(m.style.opacity.indexOf('0.5') !== -1); })(), cssanimations: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = ['animationName', 'webkitAnimationName', 'MozAnimationName', 'mozAnimationName', 'oAnimationName', 'msAnimationName']; m.style.cssText = "animation: 'animate' 2s ease 2; -webkit-animation: 'animate' 2s ease 2; -moz-animation: 'animate' 2s ease 2; -o-animation: 'animate' 2s ease 2; -ms-animation: 'animate' 2s ease 2; position:relative;"; return checkProperties(prop); })(), csscolumns: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = ['columnCount', 'webkitColumnCount', 'MozColumnCount', 'mozColumnCount', 'oColumnCount', 'msColumnCount']; m.style.cssText = "column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -ms-column-count: 3;"; return checkProperties(prop); })(), cssgradients: (function(){ /** * For CSS Gradients syntax, please see: * http://webkit.org/blog/175/introducing-css-gradients/ */ m.style.cssText = "background-image: gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -webkit-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -moz-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -o-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -ms-gradient(linear, left top, right bottom, from(#9f9), to(white));"; return !!(m.style.backgroundImage.indexOf('gradient') !== -1); })(), cssreflections: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = ['boxReflect', 'webkitBoxReflect', 'MozBoxReflect', 'mozBoxReflect', 'oBoxReflect', 'msBoxReflect']; m.style.cssText = "box-reflect: right 1px; -webkit-box-reflect: right 1px; -moz-box-reflect: right 1px; -o-box-reflect: right 1px; -ms-box-reflect: right 1px;"; return checkProperties(prop); })(), csstransforms: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = ['transformProperty', 'webkitTransform', 'MozTransform', 'mozTransform', 'oTransform', 'msTransform']; m.style.cssText = "transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg);"; return checkProperties(prop); })(), csstransitions: (function(){ /** * See border-image for the explanations on the prop variable and the for loop */ prop = ['transitionProperty', 'webkitTransitionProperty', 'MozTransitionProperty', 'mozTransitionProperty', 'oTransitionProperty', 'msTransitionProperty']; m.style.cssText = "transition: all .5s linear; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; -ms-transition: all .5s linear;"; return checkProperties(prop); })(), // The idea is taken from the Mediawiki OggHandler extension // http://svn.wikimedia.org/svnroot/mediawiki/trunk/extensions/OggHandler/OggPlayer.js // Media wiki extension page: http://www.mediawiki.org/wiki/Extension:OggHandler // actually, you should use the tag content as backup (

// Firefox, Safari Opera video: typeof HTMLVideoElement == 'object' || typeof HTMLVideoElement == 'function', // Firefox, Safari Opera audio: typeof HTMLAudioElement == 'object' || typeof HTMLAudioElement == 'function', query: !!(document.querySelector), json: !!(window.JSON) }); m.style.cssText = ""; tmp = i = prop = null; })();