/*! * Modernizr v1.6 * http://www.modernizr.com * * Developed by: * - Faruk Ates http://farukat.es/ * - Paul Irish http://paulirish.com/ * * Copyright (c) 2009-2010 * Dual-licensed under the BSD or MIT licenses. * http://www.modernizr.com/license/ */ /* * Modernizr is a script that detects native CSS3 and HTML5 features * available in the current UA and provides an object containing all * features with a true/false value, depending on whether the UA has * native support for it or not. * * Modernizr will also add classes to the element of the page, * one for each feature it detects. 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 your * CSS, giving you fine control over the look & feel of your website. * * @author Faruk Ates * @author Paul Irish * @copyright (c) 2009-2010 Faruk Ates. * @contributor Ben Alman */ window.Modernizr = (function(window,document,undefined){ var version = '1.6', ret = {}, /** * !! DEPRECATED !! * * enableHTML5 is a private property for advanced use only. If enabled, * it will make Modernizr.init() run through a brief while() loop in * which it will create all HTML5 elements in the DOM to allow for * styling them in Internet Explorer, which does not recognize any * non-HTML4 elements unless created in the DOM this way. * * enableHTML5 is ON by default. * * The enableHTML5 toggle option is DEPRECATED as per 1.6, and will be * replaced in 2.0 in lieu of the modular, configurable nature of 2.0. */ enableHTML5 = true, docElement = document.documentElement, docHead = document.head || document.getElementsByTagName('head')[0], /** * Create our "modernizr" element that we do most feature tests on. */ mod = 'modernizr', modElem = document.createElement( mod ), m_style = modElem.style, /** * Create the input element for various Web Forms feature tests. */ inputElem = document.createElement( 'input' ), smile = ':)', tostring = Object.prototype.toString, // List of property values to set for css tests. See ticket #21 prefixes = ' -webkit- -moz- -o- -ms- -khtml- '.split(' '), // Following spec is to expose vendor-specific style properties as: // elem.style.WebkitBorderRadius // and the following would be incorrect: // elem.style.webkitBorderRadius // Webkit ghosts their properties in lowercase but Opera & Moz do not. // Microsoft foregoes prefixes entirely <= IE8, but appears to // use a lowercase `ms` instead of the correct `Ms` in IE9 // More here: http://github.com/Modernizr/Modernizr/issues/issue/21 domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), ns = {'svg': 'http://www.w3.org/2000/svg'}, tests = {}, inputs = {}, attrs = {}, classes = [], featurename, // used in testing loop // todo: consider using http://javascript.nwbox.com/CSSSupport/css-support.js instead testMediaQuery = function(mq){ var st = document.createElement('style'), div = document.createElement('div'), ret; st.textContent = mq + '{#modernizr{height:3px}}'; docHead.appendChild(st); div.id = 'modernizr'; docElement.appendChild(div); ret = div.offsetHeight === 3; st.parentNode.removeChild(st); div.parentNode.removeChild(div); return !!ret; }, /** * isEventSupported determines if a given element supports the given event * function from http://yura.thinkweb2.com/isEventSupported/ */ isEventSupported = (function(){ var TAGNAMES = { 'select':'input','change':'input', 'submit':'form','reset':'form', 'error':'img','load':'img','abort':'img' }; function isEventSupported(eventName, element) { element = element || document.createElement(TAGNAMES[eventName] || 'div'); eventName = 'on' + eventName; // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those var isSupported = (eventName in element); if (!isSupported) { // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element if (!element.setAttribute) { element = document.createElement('div'); } if (element.setAttribute && element.removeAttribute) { element.setAttribute(eventName, ''); isSupported = is(element[eventName], 'function'); // If property was created, "remove it" (by setting value to `undefined`) if (!is(element[eventName], undefined)) { element[eventName] = undefined; } element.removeAttribute(eventName); } } element = null; return isSupported; } return isEventSupported; })(); // hasOwnProperty shim by kangax needed for Safari 2.0 support var _hasOwnProperty = ({}).hasOwnProperty, hasOwnProperty; if (!is(_hasOwnProperty, undefined) && !is(_hasOwnProperty.call, undefined)) { hasOwnProperty = function (object, property) { return _hasOwnProperty.call(object, property); }; } else { hasOwnProperty = function (object, property) { /* yes, this can give false positives/negatives, but most of the time we don't care about those */ return ((property in object) && is(object.constructor.prototype[property], undefined)); }; } /** * set_css applies given styles to the Modernizr DOM node. */ function set_css( str ) { m_style.cssText = str; } /** * set_css_all extrapolates all vendor-specific css strings. */ function set_css_all( str1, str2 ) { return set_css(prefixes.join(str1 + ';') + ( str2 || '' )); } /** * is returns a boolean for if typeof obj is exactly type. */ function is( obj, type ) { return typeof obj === type; } /** * contains returns a boolean for if substr is found within str. */ function contains( str, substr ) { return (''+str).indexOf( substr ) !== -1; } /** * test_props is a generic CSS / DOM property test; if a browser supports * a certain property, it won't return undefined for it. * A supported CSS property returns empty string when its not yet set. */ function test_props( props, callback ) { for ( var i in props ) { if ( m_style[ props[i] ] !== undefined && ( !callback || callback( props[i], modElem ) ) ) { return true; } } } /** * test_props_all tests 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. */ function test_props_all( prop, callback ) { var uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1), props = (prop + ' ' + domPrefixes.join(uc_prop + ' ') + uc_prop).split(' '); return !!test_props( props, callback ); } /* * The Modernizr.touch test only indicates if the browser supports * touch events, which does not necessarily reflect a touchscreen * device, as evidenced by tablets running Windows 7 or, alas, * the Palm Pre / WebOS (touch) phones. * * Additionally, Chrome (desktop) used to lie about its support on this, * but that has since been rectified: http://crbug.com/36415 * * We also test for Firefox 4 Multitouch Support. * * For more info, see: http://modernizr.github.com/Modernizr/touch.html */ tests['touch'] = function() { return ('ontouchstart' in window) || testMediaQuery('@media ('+prefixes.join('touch-enabled),(')+'modernizr)'); }; // documentMode logic from YUI to filter out IE8 Compat Mode // which false positives. tests['hashchange'] = function() { return isEventSupported('hashchange', window) && ( document.documentMode === undefined || document.documentMode > 7 ); }; // Per 1.6: // This used to be Modernizr.historymanagement but the longer // name has been deprecated in favor of a shorter and property-matching one. // The old API is still available in 1.6, but as of 2.0 will throw a warning, // and in the first release thereafter disappear entirely. tests['history'] = function() { return !!(window.history && history.pushState); }; tests['cssanimations'] = function() { return test_props_all( 'animationName' ); }; tests['csscolumns'] = function() { return test_props_all( 'columnCount' ); }; tests['csstransforms'] = function() { return !!test_props([ 'transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]); }; tests['csstransforms3d'] = function() { var ret = !!test_props([ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]); // Webkit’s 3D transforms are passed off to the browser's own graphics renderer. // It works fine in Safari on Leopard and Snow Leopard, but not in Chrome in // some conditions. As a result, Webkit typically recognizes the syntax but // will sometimes throw a false positive, thus we must do a more thorough check: if (ret && 'webkitPerspective' in docElement.style){ // Webkit allows this media query to succeed only if the feature is enabled. // `@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d),(modernizr){ ... }` ret = testMediaQuery('@media ('+prefixes.join('transform-3d),(')+'modernizr)'); } return ret; }; tests['csstransitions'] = function() { return test_props_all( 'transitionProperty' ); }; // Thanks to Erik Dahlstrom tests['svg'] = function(){ return !!document.createElementNS && !!document.createElementNS(ns.svg, "svg").createSVGRect; }; tests['inlinesvg'] = function() { var div = document.createElement('div'); div.innerHTML = ''; return (div.firstChild && div.firstChild.namespaceURI) == ns.svg; }; // input features and input types go directly onto the ret object, bypassing the tests loop. // Hold this guy to execute in a moment. function webforms(){ // Run through HTML5's new input attributes to see if the UA understands any. // We're using f which is the element created early on // Mike Taylr has created a comprehensive resource for testing these attributes // when applied to all input types: // http://miketaylr.com/code/input-type-attr.html // spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary ret['input'] = (function(props) { for (var i = 0, len = props.length; i which is print-safe and shouldn't conflict since it isn't part of html5 bodyElem.innerHTML = body.innerHTML.replace(tagRegExp, '<$1font'); } ); win.attachEvent( 'onafterprint', function() { // Undo everything done in onbeforeprint bodyElem.innerHTML = ''; html.removeChild(bodyElem); html.appendChild(body); styleElem.styleSheet.cssText = ''; } ); })(window, document); } // Add real or faux 3d classes if ( ret.csstransforms3d ) { classes.push('real3d'); } else if ( ret.csstransforms && !ret.csstransforms3d ) { classes.push('faux3d') } // Assign private properties to the return object with prefix ret._enableHTML5 = enableHTML5; ret._version = version; // Remove "no-js" class from element, if it exists: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js'; // Add the new classes to the element. docElement.className += ' ' + classes.join( ' ' ); return ret; })(this,this.document);