CSS transform example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Creating Web Animations with HTML and CSS</title> | |
| <!-- | |
| Creating Web Animations with HTML and CSS | |
| Presentation at 2016 Cengage Learning Computing Conference | |
| Orlando, Florida | |
| Presented by Sasha Vodnik | |
| Filename: index.html | |
| --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="modernizr.custom.28018.js"></script> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <article> | |
| <div class="animation"> | |
| <div class="skew"> | |
| <div class="car"> | |
| <img src="https://sashavodnik.files.wordpress.com/2016/04/car.png"> | |
| </div> | |
| <div class="wheel1"> | |
| <img src="https://sashavodnik.files.wordpress.com/2016/04/wheel.png"> | |
| </div> | |
| <div class="wheel2"> | |
| <img src="https://sashavodnik.files.wordpress.com/2016/04/wheel.png"> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Modernizr 2.8.3 (Custom Build) | MIT & BSD | |
| * Build: http://modernizr.com/download/#-fontface-borderradius-boxshadow-cssgradients-csstransforms-csstransitions-input-inputtypes-printshiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load | |
| */ | |
| ; | |
| window.Modernizr = (function( window, document, undefined ) { | |
| var version = '2.8.3', | |
| Modernizr = {}, | |
| enableClasses = true, | |
| docElement = document.documentElement, | |
| mod = 'modernizr', | |
| modElem = document.createElement(mod), | |
| mStyle = modElem.style, | |
| inputElem = document.createElement('input') , | |
| smile = ':)', | |
| toString = {}.toString, | |
| prefixes = ' -webkit- -moz- -o- -ms- '.split(' '), | |
| omPrefixes = 'Webkit Moz O ms', | |
| cssomPrefixes = omPrefixes.split(' '), | |
| domPrefixes = omPrefixes.toLowerCase().split(' '), | |
| tests = {}, | |
| inputs = {}, | |
| attrs = {}, | |
| classes = [], | |
| slice = classes.slice, | |
| featureName, | |
| injectElementWithStyles = function( rule, callback, nodes, testnames ) { | |
| var style, ret, node, docOverflow, | |
| div = document.createElement('div'), | |
| body = document.body, | |
| fakeBody = body || document.createElement('body'); | |
| if ( parseInt(nodes, 10) ) { | |
| while ( nodes-- ) { | |
| node = document.createElement('div'); | |
| node.id = testnames ? testnames[nodes] : mod + (nodes + 1); | |
| div.appendChild(node); | |
| } | |
| } | |
| style = ['­','<style id="s', mod, '">', rule, '</style>'].join(''); | |
| div.id = mod; | |
| (body ? div : fakeBody).innerHTML += style; | |
| fakeBody.appendChild(div); | |
| if ( !body ) { | |
| fakeBody.style.background = ''; | |
| fakeBody.style.overflow = 'hidden'; | |
| docOverflow = docElement.style.overflow; | |
| docElement.style.overflow = 'hidden'; | |
| docElement.appendChild(fakeBody); | |
| } | |
| ret = callback(div, rule); | |
| if ( !body ) { | |
| fakeBody.parentNode.removeChild(fakeBody); | |
| docElement.style.overflow = docOverflow; | |
| } else { | |
| div.parentNode.removeChild(div); | |
| } | |
| return !!ret; | |
| }, | |
| testMediaQuery = function( mq ) { | |
| var matchMedia = window.matchMedia || window.msMatchMedia; | |
| if ( matchMedia ) { | |
| return matchMedia(mq) && matchMedia(mq).matches || false; | |
| } | |
| var bool; | |
| injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) { | |
| bool = (window.getComputedStyle ? | |
| getComputedStyle(node, null) : | |
| node.currentStyle)['position'] == 'absolute'; | |
| }); | |
| return bool; | |
| }, | |
| 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; | |
| var isSupported = eventName in element; | |
| if ( !isSupported ) { | |
| if ( !element.setAttribute ) { | |
| element = document.createElement('div'); | |
| } | |
| if ( element.setAttribute && element.removeAttribute ) { | |
| element.setAttribute(eventName, ''); | |
| isSupported = is(element[eventName], 'function'); | |
| if ( !is(element[eventName], 'undefined') ) { | |
| element[eventName] = undefined; | |
| } | |
| element.removeAttribute(eventName); | |
| } | |
| } | |
| element = null; | |
| return isSupported; | |
| } | |
| return isEventSupported; | |
| })(), | |
| _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp; | |
| if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) { | |
| hasOwnProp = function (object, property) { | |
| return _hasOwnProperty.call(object, property); | |
| }; | |
| } | |
| else { | |
| hasOwnProp = function (object, property) { | |
| return ((property in object) && is(object.constructor.prototype[property], 'undefined')); | |
| }; | |
| } | |
| if (!Function.prototype.bind) { | |
| Function.prototype.bind = function bind(that) { | |
| var target = this; | |
| if (typeof target != "function") { | |
| throw new TypeError(); | |
| } | |
| var args = slice.call(arguments, 1), | |
| bound = function () { | |
| if (this instanceof bound) { | |
| var F = function(){}; | |
| F.prototype = target.prototype; | |
| var self = new F(); | |
| var result = target.apply( | |
| self, | |
| args.concat(slice.call(arguments)) | |
| ); | |
| if (Object(result) === result) { | |
| return result; | |
| } | |
| return self; | |
| } else { | |
| return target.apply( | |
| that, | |
| args.concat(slice.call(arguments)) | |
| ); | |
| } | |
| }; | |
| return bound; | |
| }; | |
| } | |
| function setCss( str ) { | |
| mStyle.cssText = str; | |
| } | |
| function setCssAll( str1, str2 ) { | |
| return setCss(prefixes.join(str1 + ';') + ( str2 || '' )); | |
| } | |
| function is( obj, type ) { | |
| return typeof obj === type; | |
| } | |
| function contains( str, substr ) { | |
| return !!~('' + str).indexOf(substr); | |
| } | |
| function testProps( props, prefixed ) { | |
| for ( var i in props ) { | |
| var prop = props[i]; | |
| if ( !contains(prop, "-") && mStyle[prop] !== undefined ) { | |
| return prefixed == 'pfx' ? prop : true; | |
| } | |
| } | |
| return false; | |
| } | |
| function testDOMProps( props, obj, elem ) { | |
| for ( var i in props ) { | |
| var item = obj[props[i]]; | |
| if ( item !== undefined) { | |
| if (elem === false) return props[i]; | |
| if (is(item, 'function')){ | |
| return item.bind(elem || obj); | |
| } | |
| return item; | |
| } | |
| } | |
| return false; | |
| } | |
| function testPropsAll( prop, prefixed, elem ) { | |
| var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1), | |
| props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' '); | |
| if(is(prefixed, "string") || is(prefixed, "undefined")) { | |
| return testProps(props, prefixed); | |
| } else { | |
| props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' '); | |
| return testDOMProps(props, prefixed, elem); | |
| } | |
| } | |
| tests['borderradius'] = function() { | |
| return testPropsAll('borderRadius'); | |
| }; | |
| tests['boxshadow'] = function() { | |
| return testPropsAll('boxShadow'); | |
| }; tests['cssgradients'] = function() { | |
| var str1 = 'background-image:', | |
| str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));', | |
| str3 = 'linear-gradient(left top,#9f9, white);'; | |
| setCss( | |
| (str1 + '-webkit- '.split(' ').join(str2 + str1) + | |
| prefixes.join(str3 + str1)).slice(0, -str1.length) | |
| ); | |
| return contains(mStyle.backgroundImage, 'gradient'); | |
| }; tests['csstransforms'] = function() { | |
| return !!testPropsAll('transform'); | |
| }; tests['csstransitions'] = function() { | |
| return testPropsAll('transition'); | |
| }; | |
| tests['fontface'] = function() { | |
| var bool; | |
| injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}', function( node, rule ) { | |
| var style = document.getElementById('smodernizr'), | |
| sheet = style.sheet || style.styleSheet, | |
| cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : ''; | |
| bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0; | |
| }); | |
| return bool; | |
| }; | |
| function webforms() { | |
| Modernizr['input'] = (function( props ) { | |
| for ( var i = 0, len = props.length; i < len; i++ ) { | |
| attrs[ props[i] ] = !!(props[i] in inputElem); | |
| } | |
| if (attrs.list){ | |
| attrs.list = !!(document.createElement('datalist') && window.HTMLDataListElement); | |
| } | |
| return attrs; | |
| })('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' ')); | |
| Modernizr['inputtypes'] = (function(props) { | |
| for ( var i = 0, bool, inputElemType, defaultView, len = props.length; i < len; i++ ) { | |
| inputElem.setAttribute('type', inputElemType = props[i]); | |
| bool = inputElem.type !== 'text'; | |
| if ( bool ) { | |
| inputElem.value = smile; | |
| inputElem.style.cssText = 'position:absolute;visibility:hidden;'; | |
| if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) { | |
| docElement.appendChild(inputElem); | |
| defaultView = document.defaultView; | |
| bool = defaultView.getComputedStyle && | |
| defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' && | |
| (inputElem.offsetHeight !== 0); | |
| docElement.removeChild(inputElem); | |
| } else if ( /^(search|tel)$/.test(inputElemType) ){ | |
| } else if ( /^(url|email)$/.test(inputElemType) ) { | |
| bool = inputElem.checkValidity && inputElem.checkValidity() === false; | |
| } else { | |
| bool = inputElem.value != smile; | |
| } | |
| } | |
| inputs[ props[i] ] = !!bool; | |
| } | |
| return inputs; | |
| })('search tel url email datetime date month week time datetime-local number range color'.split(' ')); | |
| } | |
| for ( var feature in tests ) { | |
| if ( hasOwnProp(tests, feature) ) { | |
| featureName = feature.toLowerCase(); | |
| Modernizr[featureName] = tests[feature](); | |
| classes.push((Modernizr[featureName] ? '' : 'no-') + featureName); | |
| } | |
| } | |
| Modernizr.input || webforms(); | |
| Modernizr.addTest = function ( feature, test ) { | |
| if ( typeof feature == 'object' ) { | |
| for ( var key in feature ) { | |
| if ( hasOwnProp( feature, key ) ) { | |
| Modernizr.addTest( key, feature[ key ] ); | |
| } | |
| } | |
| } else { | |
| feature = feature.toLowerCase(); | |
| if ( Modernizr[feature] !== undefined ) { | |
| return Modernizr; | |
| } | |
| test = typeof test == 'function' ? test() : test; | |
| if (typeof enableClasses !== "undefined" && enableClasses) { | |
| docElement.className += ' ' + (test ? '' : 'no-') + feature; | |
| } | |
| Modernizr[feature] = test; | |
| } | |
| return Modernizr; | |
| }; | |
| setCss(''); | |
| modElem = inputElem = null; | |
| Modernizr._version = version; | |
| Modernizr._prefixes = prefixes; | |
| Modernizr._domPrefixes = domPrefixes; | |
| Modernizr._cssomPrefixes = cssomPrefixes; | |
| Modernizr.mq = testMediaQuery; | |
| Modernizr.hasEvent = isEventSupported; | |
| Modernizr.testProp = function(prop){ | |
| return testProps([prop]); | |
| }; | |
| Modernizr.testAllProps = testPropsAll; | |
| Modernizr.testStyles = injectElementWithStyles; | |
| Modernizr.prefixed = function(prop, obj, elem){ | |
| if(!obj) { | |
| return testPropsAll(prop, 'pfx'); | |
| } else { | |
| return testPropsAll(prop, obj, elem); | |
| } | |
| }; | |
| docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + | |
| (enableClasses ? ' js ' + classes.join(' ') : ''); | |
| return Modernizr; | |
| })(this, this.document); | |
| /** | |
| * @preserve HTML5 Shiv prev3.7.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed | |
| */ | |
| ;(function(window, document) { | |
| /*jshint evil:true */ | |
| /** version */ | |
| var version = '3.7.0'; | |
| /** Preset options */ | |
| var options = window.html5 || {}; | |
| /** Used to skip problem elements */ | |
| var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i; | |
| /** Not all elements can be cloned in IE **/ | |
| var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i; | |
| /** Detect whether the browser supports default html5 styles */ | |
| var supportsHtml5Styles; | |
| /** Name of the expando, to work with multiple documents or to re-shiv one document */ | |
| var expando = '_html5shiv'; | |
| /** The id for the the documents expando */ | |
| var expanID = 0; | |
| /** Cached data for each document */ | |
| var expandoData = {}; | |
| /** Detect whether the browser supports unknown elements */ | |
| var supportsUnknownElements; | |
| (function() { | |
| try { | |
| var a = document.createElement('a'); | |
| a.innerHTML = '<xyz></xyz>'; | |
| //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles | |
| supportsHtml5Styles = ('hidden' in a); | |
| supportsUnknownElements = a.childNodes.length == 1 || (function() { | |
| // assign a false positive if unable to shiv | |
| (document.createElement)('a'); | |
| var frag = document.createDocumentFragment(); | |
| return ( | |
| typeof frag.cloneNode == 'undefined' || | |
| typeof frag.createDocumentFragment == 'undefined' || | |
| typeof frag.createElement == 'undefined' | |
| ); | |
| }()); | |
| } catch(e) { | |
| // assign a false positive if detection fails => unable to shiv | |
| supportsHtml5Styles = true; | |
| supportsUnknownElements = true; | |
| } | |
| }()); | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Creates a style sheet with the given CSS text and adds it to the document. | |
| * @private | |
| * @param {Document} ownerDocument The document. | |
| * @param {String} cssText The CSS text. | |
| * @returns {StyleSheet} The style element. | |
| */ | |
| function addStyleSheet(ownerDocument, cssText) { | |
| var p = ownerDocument.createElement('p'), | |
| parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement; | |
| p.innerHTML = 'x<style>' + cssText + '</style>'; | |
| return parent.insertBefore(p.lastChild, parent.firstChild); | |
| } | |
| /** | |
| * Returns the value of `html5.elements` as an array. | |
| * @private | |
| * @returns {Array} An array of shived element node names. | |
| */ | |
| function getElements() { | |
| var elements = html5.elements; | |
| return typeof elements == 'string' ? elements.split(' ') : elements; | |
| } | |
| /** | |
| * Returns the data associated to the given document | |
| * @private | |
| * @param {Document} ownerDocument The document. | |
| * @returns {Object} An object of data. | |
| */ | |
| function getExpandoData(ownerDocument) { | |
| var data = expandoData[ownerDocument[expando]]; | |
| if (!data) { | |
| data = {}; | |
| expanID++; | |
| ownerDocument[expando] = expanID; | |
| expandoData[expanID] = data; | |
| } | |
| return data; | |
| } | |
| /** | |
| * returns a shived element for the given nodeName and document | |
| * @memberOf html5 | |
| * @param {String} nodeName name of the element | |
| * @param {Document} ownerDocument The context document. | |
| * @returns {Object} The shived element. | |
| */ | |
| function createElement(nodeName, ownerDocument, data){ | |
| if (!ownerDocument) { | |
| ownerDocument = document; | |
| } | |
| if(supportsUnknownElements){ | |
| return ownerDocument.createElement(nodeName); | |
| } | |
| if (!data) { | |
| data = getExpandoData(ownerDocument); | |
| } | |
| var node; | |
| if (data.cache[nodeName]) { | |
| node = data.cache[nodeName].cloneNode(); | |
| } else if (saveClones.test(nodeName)) { | |
| node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode(); | |
| } else { | |
| node = data.createElem(nodeName); | |
| } | |
| // Avoid adding some elements to fragments in IE < 9 because | |
| // * Attributes like `name` or `type` cannot be set/changed once an element | |
| // is inserted into a document/fragment | |
| // * Link elements with `src` attributes that are inaccessible, as with | |
| // a 403 response, will cause the tab/window to crash | |
| // * Script elements appended to fragments will execute when their `src` | |
| // or `text` property is set | |
| return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node; | |
| } | |
| /** | |
| * returns a shived DocumentFragment for the given document | |
| * @memberOf html5 | |
| * @param {Document} ownerDocument The context document. | |
| * @returns {Object} The shived DocumentFragment. | |
| */ | |
| function createDocumentFragment(ownerDocument, data){ | |
| if (!ownerDocument) { | |
| ownerDocument = document; | |
| } | |
| if(supportsUnknownElements){ | |
| return ownerDocument.createDocumentFragment(); | |
| } | |
| data = data || getExpandoData(ownerDocument); | |
| var clone = data.frag.cloneNode(), | |
| i = 0, | |
| elems = getElements(), | |
| l = elems.length; | |
| for(;i<l;i++){ | |
| clone.createElement(elems[i]); | |
| } | |
| return clone; | |
| } | |
| /** | |
| * Shivs the `createElement` and `createDocumentFragment` methods of the document. | |
| * @private | |
| * @param {Document|DocumentFragment} ownerDocument The document. | |
| * @param {Object} data of the document. | |
| */ | |
| function shivMethods(ownerDocument, data) { | |
| if (!data.cache) { | |
| data.cache = {}; | |
| data.createElem = ownerDocument.createElement; | |
| data.createFrag = ownerDocument.createDocumentFragment; | |
| data.frag = data.createFrag(); | |
| } | |
| ownerDocument.createElement = function(nodeName) { | |
| //abort shiv | |
| if (!html5.shivMethods) { | |
| return data.createElem(nodeName); | |
| } | |
| return createElement(nodeName, ownerDocument, data); | |
| }; | |
| ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' + | |
| 'var n=f.cloneNode(),c=n.createElement;' + | |
| 'h.shivMethods&&(' + | |
| // unroll the `createElement` calls | |
| getElements().join().replace(/\w+/g, function(nodeName) { | |
| data.createElem(nodeName); | |
| data.frag.createElement(nodeName); | |
| return 'c("' + nodeName + '")'; | |
| }) + | |
| ');return n}' | |
| )(html5, data.frag); | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Shivs the given document. | |
| * @memberOf html5 | |
| * @param {Document} ownerDocument The document to shiv. | |
| * @returns {Document} The shived document. | |
| */ | |
| function shivDocument(ownerDocument) { | |
| if (!ownerDocument) { | |
| ownerDocument = document; | |
| } | |
| var data = getExpandoData(ownerDocument); | |
| if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) { | |
| data.hasCSS = !!addStyleSheet(ownerDocument, | |
| // corrects block display not defined in IE6/7/8/9 | |
| 'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' + | |
| // adds styling not present in IE6/7/8/9 | |
| 'mark{background:#FF0;color:#000}' + | |
| // hides non-rendered elements | |
| 'template{display:none}' | |
| ); | |
| } | |
| if (!supportsUnknownElements) { | |
| shivMethods(ownerDocument, data); | |
| } | |
| return ownerDocument; | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * The `html5` object is exposed so that more elements can be shived and | |
| * existing shiving can be detected on iframes. | |
| * @type Object | |
| * @example | |
| * | |
| * // options can be changed before the script is included | |
| * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false }; | |
| */ | |
| var html5 = { | |
| /** | |
| * An array or space separated string of node names of the elements to shiv. | |
| * @memberOf html5 | |
| * @type Array|String | |
| */ | |
| 'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video', | |
| /** | |
| * current version of html5shiv | |
| */ | |
| 'version': version, | |
| /** | |
| * A flag to indicate that the HTML5 style sheet should be inserted. | |
| * @memberOf html5 | |
| * @type Boolean | |
| */ | |
| 'shivCSS': (options.shivCSS !== false), | |
| /** | |
| * Is equal to true if a browser supports creating unknown/HTML5 elements | |
| * @memberOf html5 | |
| * @type boolean | |
| */ | |
| 'supportsUnknownElements': supportsUnknownElements, | |
| /** | |
| * A flag to indicate that the document's `createElement` and `createDocumentFragment` | |
| * methods should be overwritten. | |
| * @memberOf html5 | |
| * @type Boolean | |
| */ | |
| 'shivMethods': (options.shivMethods !== false), | |
| /** | |
| * A string to describe the type of `html5` object ("default" or "default print"). | |
| * @memberOf html5 | |
| * @type String | |
| */ | |
| 'type': 'default', | |
| // shivs the document according to the specified `html5` object options | |
| 'shivDocument': shivDocument, | |
| //creates a shived element | |
| createElement: createElement, | |
| //creates a shived documentFragment | |
| createDocumentFragment: createDocumentFragment | |
| }; | |
| /*--------------------------------------------------------------------------*/ | |
| // expose html5 | |
| window.html5 = html5; | |
| // shiv the document | |
| shivDocument(document); | |
| /*------------------------------- Print Shiv -------------------------------*/ | |
| /** Used to filter media types */ | |
| var reMedia = /^$|\b(?:all|print)\b/; | |
| /** Used to namespace printable elements */ | |
| var shivNamespace = 'html5shiv'; | |
| /** Detect whether the browser supports shivable style sheets */ | |
| var supportsShivableSheets = !supportsUnknownElements && (function() { | |
| // assign a false negative if unable to shiv | |
| var docEl = document.documentElement; | |
| return !( | |
| typeof document.namespaces == 'undefined' || | |
| typeof document.parentWindow == 'undefined' || | |
| typeof docEl.applyElement == 'undefined' || | |
| typeof docEl.removeNode == 'undefined' || | |
| typeof window.attachEvent == 'undefined' | |
| ); | |
| }()); | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Wraps all HTML5 elements in the given document with printable elements. | |
| * (eg. the "header" element is wrapped with the "html5shiv:header" element) | |
| * @private | |
| * @param {Document} ownerDocument The document. | |
| * @returns {Array} An array wrappers added. | |
| */ | |
| function addWrappers(ownerDocument) { | |
| var node, | |
| nodes = ownerDocument.getElementsByTagName('*'), | |
| index = nodes.length, | |
| reElements = RegExp('^(?:' + getElements().join('|') + ')$', 'i'), | |
| result = []; | |
| while (index--) { | |
| node = nodes[index]; | |
| if (reElements.test(node.nodeName)) { | |
| result.push(node.applyElement(createWrapper(node))); | |
| } | |
| } | |
| return result; | |
| } | |
| /** | |
| * Creates a printable wrapper for the given element. | |
| * @private | |
| * @param {Element} element The element. | |
| * @returns {Element} The wrapper. | |
| */ | |
| function createWrapper(element) { | |
| var node, | |
| nodes = element.attributes, | |
| index = nodes.length, | |
| wrapper = element.ownerDocument.createElement(shivNamespace + ':' + element.nodeName); | |
| // copy element attributes to the wrapper | |
| while (index--) { | |
| node = nodes[index]; | |
| node.specified && wrapper.setAttribute(node.nodeName, node.nodeValue); | |
| } | |
| // copy element styles to the wrapper | |
| wrapper.style.cssText = element.style.cssText; | |
| return wrapper; | |
| } | |
| /** | |
| * Shivs the given CSS text. | |
| * (eg. header{} becomes html5shiv\:header{}) | |
| * @private | |
| * @param {String} cssText The CSS text to shiv. | |
| * @returns {String} The shived CSS text. | |
| */ | |
| function shivCssText(cssText) { | |
| var pair, | |
| parts = cssText.split('{'), | |
| index = parts.length, | |
| reElements = RegExp('(^|[\\s,>+~])(' + getElements().join('|') + ')(?=[[\\s,>+~#.:]|$)', 'gi'), | |
| replacement = '$1' + shivNamespace + '\\:$2'; | |
| while (index--) { | |
| pair = parts[index] = parts[index].split('}'); | |
| pair[pair.length - 1] = pair[pair.length - 1].replace(reElements, replacement); | |
| parts[index] = pair.join('}'); | |
| } | |
| return parts.join('{'); | |
| } | |
| /** | |
| * Removes the given wrappers, leaving the original elements. | |
| * @private | |
| * @params {Array} wrappers An array of printable wrappers. | |
| */ | |
| function removeWrappers(wrappers) { | |
| var index = wrappers.length; | |
| while (index--) { | |
| wrappers[index].removeNode(); | |
| } | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Shivs the given document for print. | |
| * @memberOf html5 | |
| * @param {Document} ownerDocument The document to shiv. | |
| * @returns {Document} The shived document. | |
| */ | |
| function shivPrint(ownerDocument) { | |
| var shivedSheet, | |
| wrappers, | |
| data = getExpandoData(ownerDocument), | |
| namespaces = ownerDocument.namespaces, | |
| ownerWindow = ownerDocument.parentWindow; | |
| if (!supportsShivableSheets || ownerDocument.printShived) { | |
| return ownerDocument; | |
| } | |
| if (typeof namespaces[shivNamespace] == 'undefined') { | |
| namespaces.add(shivNamespace); | |
| } | |
| function removeSheet() { | |
| clearTimeout(data._removeSheetTimer); | |
| if (shivedSheet) { | |
| shivedSheet.removeNode(true); | |
| } | |
| shivedSheet= null; | |
| } | |
| ownerWindow.attachEvent('onbeforeprint', function() { | |
| removeSheet(); | |
| var imports, | |
| length, | |
| sheet, | |
| collection = ownerDocument.styleSheets, | |
| cssText = [], | |
| index = collection.length, | |
| sheets = Array(index); | |
| // convert styleSheets collection to an array | |
| while (index--) { | |
| sheets[index] = collection[index]; | |
| } | |
| // concat all style sheet CSS text | |
| while ((sheet = sheets.pop())) { | |
| // IE does not enforce a same origin policy for external style sheets... | |
| // but has trouble with some dynamically created stylesheets | |
| if (!sheet.disabled && reMedia.test(sheet.media)) { | |
| try { | |
| imports = sheet.imports; | |
| length = imports.length; | |
| } catch(er){ | |
| length = 0; | |
| } | |
| for (index = 0; index < length; index++) { | |
| sheets.push(imports[index]); | |
| } | |
| try { | |
| cssText.push(sheet.cssText); | |
| } catch(er){} | |
| } | |
| } | |
| // wrap all HTML5 elements with printable elements and add the shived style sheet | |
| cssText = shivCssText(cssText.reverse().join('')); | |
| wrappers = addWrappers(ownerDocument); | |
| shivedSheet = addStyleSheet(ownerDocument, cssText); | |
| }); | |
| ownerWindow.attachEvent('onafterprint', function() { | |
| // remove wrappers, leaving the original elements, and remove the shived style sheet | |
| removeWrappers(wrappers); | |
| clearTimeout(data._removeSheetTimer); | |
| data._removeSheetTimer = setTimeout(removeSheet, 500); | |
| }); | |
| ownerDocument.printShived = true; | |
| return ownerDocument; | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| // expose API | |
| html5.type += ' print'; | |
| html5.shivPrint = shivPrint; | |
| // shiv for print | |
| shivPrint(document); | |
| }(this, document)); | |
| /*yepnope1.5.4|WTFPL*/ | |
| (function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}})(this,document); | |
| Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0));}; | |
| ; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Modernizr 2.8.3 (Custom Build) | MIT & BSD | |
| * Build: http://modernizr.com/download/#-fontface-borderradius-boxshadow-cssgradients-csstransforms-csstransitions-input-inputtypes-printshiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load | |
| */ | |
| ; | |
| window.Modernizr = (function( window, document, undefined ) { | |
| var version = '2.8.3', | |
| Modernizr = {}, | |
| enableClasses = true, | |
| docElement = document.documentElement, | |
| mod = 'modernizr', | |
| modElem = document.createElement(mod), | |
| mStyle = modElem.style, | |
| inputElem = document.createElement('input') , | |
| smile = ':)', | |
| toString = {}.toString, | |
| prefixes = ' -webkit- -moz- -o- -ms- '.split(' '), | |
| omPrefixes = 'Webkit Moz O ms', | |
| cssomPrefixes = omPrefixes.split(' '), | |
| domPrefixes = omPrefixes.toLowerCase().split(' '), | |
| tests = {}, | |
| inputs = {}, | |
| attrs = {}, | |
| classes = [], | |
| slice = classes.slice, | |
| featureName, | |
| injectElementWithStyles = function( rule, callback, nodes, testnames ) { | |
| var style, ret, node, docOverflow, | |
| div = document.createElement('div'), | |
| body = document.body, | |
| fakeBody = body || document.createElement('body'); | |
| if ( parseInt(nodes, 10) ) { | |
| while ( nodes-- ) { | |
| node = document.createElement('div'); | |
| node.id = testnames ? testnames[nodes] : mod + (nodes + 1); | |
| div.appendChild(node); | |
| } | |
| } | |
| style = ['­','<style id="s', mod, '">', rule, '</style>'].join(''); | |
| div.id = mod; | |
| (body ? div : fakeBody).innerHTML += style; | |
| fakeBody.appendChild(div); | |
| if ( !body ) { | |
| fakeBody.style.background = ''; | |
| fakeBody.style.overflow = 'hidden'; | |
| docOverflow = docElement.style.overflow; | |
| docElement.style.overflow = 'hidden'; | |
| docElement.appendChild(fakeBody); | |
| } | |
| ret = callback(div, rule); | |
| if ( !body ) { | |
| fakeBody.parentNode.removeChild(fakeBody); | |
| docElement.style.overflow = docOverflow; | |
| } else { | |
| div.parentNode.removeChild(div); | |
| } | |
| return !!ret; | |
| }, | |
| testMediaQuery = function( mq ) { | |
| var matchMedia = window.matchMedia || window.msMatchMedia; | |
| if ( matchMedia ) { | |
| return matchMedia(mq) && matchMedia(mq).matches || false; | |
| } | |
| var bool; | |
| injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) { | |
| bool = (window.getComputedStyle ? | |
| getComputedStyle(node, null) : | |
| node.currentStyle)['position'] == 'absolute'; | |
| }); | |
| return bool; | |
| }, | |
| 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; | |
| var isSupported = eventName in element; | |
| if ( !isSupported ) { | |
| if ( !element.setAttribute ) { | |
| element = document.createElement('div'); | |
| } | |
| if ( element.setAttribute && element.removeAttribute ) { | |
| element.setAttribute(eventName, ''); | |
| isSupported = is(element[eventName], 'function'); | |
| if ( !is(element[eventName], 'undefined') ) { | |
| element[eventName] = undefined; | |
| } | |
| element.removeAttribute(eventName); | |
| } | |
| } | |
| element = null; | |
| return isSupported; | |
| } | |
| return isEventSupported; | |
| })(), | |
| _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp; | |
| if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) { | |
| hasOwnProp = function (object, property) { | |
| return _hasOwnProperty.call(object, property); | |
| }; | |
| } | |
| else { | |
| hasOwnProp = function (object, property) { | |
| return ((property in object) && is(object.constructor.prototype[property], 'undefined')); | |
| }; | |
| } | |
| if (!Function.prototype.bind) { | |
| Function.prototype.bind = function bind(that) { | |
| var target = this; | |
| if (typeof target != "function") { | |
| throw new TypeError(); | |
| } | |
| var args = slice.call(arguments, 1), | |
| bound = function () { | |
| if (this instanceof bound) { | |
| var F = function(){}; | |
| F.prototype = target.prototype; | |
| var self = new F(); | |
| var result = target.apply( | |
| self, | |
| args.concat(slice.call(arguments)) | |
| ); | |
| if (Object(result) === result) { | |
| return result; | |
| } | |
| return self; | |
| } else { | |
| return target.apply( | |
| that, | |
| args.concat(slice.call(arguments)) | |
| ); | |
| } | |
| }; | |
| return bound; | |
| }; | |
| } | |
| function setCss( str ) { | |
| mStyle.cssText = str; | |
| } | |
| function setCssAll( str1, str2 ) { | |
| return setCss(prefixes.join(str1 + ';') + ( str2 || '' )); | |
| } | |
| function is( obj, type ) { | |
| return typeof obj === type; | |
| } | |
| function contains( str, substr ) { | |
| return !!~('' + str).indexOf(substr); | |
| } | |
| function testProps( props, prefixed ) { | |
| for ( var i in props ) { | |
| var prop = props[i]; | |
| if ( !contains(prop, "-") && mStyle[prop] !== undefined ) { | |
| return prefixed == 'pfx' ? prop : true; | |
| } | |
| } | |
| return false; | |
| } | |
| function testDOMProps( props, obj, elem ) { | |
| for ( var i in props ) { | |
| var item = obj[props[i]]; | |
| if ( item !== undefined) { | |
| if (elem === false) return props[i]; | |
| if (is(item, 'function')){ | |
| return item.bind(elem || obj); | |
| } | |
| return item; | |
| } | |
| } | |
| return false; | |
| } | |
| function testPropsAll( prop, prefixed, elem ) { | |
| var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1), | |
| props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' '); | |
| if(is(prefixed, "string") || is(prefixed, "undefined")) { | |
| return testProps(props, prefixed); | |
| } else { | |
| props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' '); | |
| return testDOMProps(props, prefixed, elem); | |
| } | |
| } | |
| tests['borderradius'] = function() { | |
| return testPropsAll('borderRadius'); | |
| }; | |
| tests['boxshadow'] = function() { | |
| return testPropsAll('boxShadow'); | |
| }; tests['cssgradients'] = function() { | |
| var str1 = 'background-image:', | |
| str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));', | |
| str3 = 'linear-gradient(left top,#9f9, white);'; | |
| setCss( | |
| (str1 + '-webkit- '.split(' ').join(str2 + str1) + | |
| prefixes.join(str3 + str1)).slice(0, -str1.length) | |
| ); | |
| return contains(mStyle.backgroundImage, 'gradient'); | |
| }; tests['csstransforms'] = function() { | |
| return !!testPropsAll('transform'); | |
| }; tests['csstransitions'] = function() { | |
| return testPropsAll('transition'); | |
| }; | |
| tests['fontface'] = function() { | |
| var bool; | |
| injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}', function( node, rule ) { | |
| var style = document.getElementById('smodernizr'), | |
| sheet = style.sheet || style.styleSheet, | |
| cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : ''; | |
| bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0; | |
| }); | |
| return bool; | |
| }; | |
| function webforms() { | |
| Modernizr['input'] = (function( props ) { | |
| for ( var i = 0, len = props.length; i < len; i++ ) { | |
| attrs[ props[i] ] = !!(props[i] in inputElem); | |
| } | |
| if (attrs.list){ | |
| attrs.list = !!(document.createElement('datalist') && window.HTMLDataListElement); | |
| } | |
| return attrs; | |
| })('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' ')); | |
| Modernizr['inputtypes'] = (function(props) { | |
| for ( var i = 0, bool, inputElemType, defaultView, len = props.length; i < len; i++ ) { | |
| inputElem.setAttribute('type', inputElemType = props[i]); | |
| bool = inputElem.type !== 'text'; | |
| if ( bool ) { | |
| inputElem.value = smile; | |
| inputElem.style.cssText = 'position:absolute;visibility:hidden;'; | |
| if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) { | |
| docElement.appendChild(inputElem); | |
| defaultView = document.defaultView; | |
| bool = defaultView.getComputedStyle && | |
| defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' && | |
| (inputElem.offsetHeight !== 0); | |
| docElement.removeChild(inputElem); | |
| } else if ( /^(search|tel)$/.test(inputElemType) ){ | |
| } else if ( /^(url|email)$/.test(inputElemType) ) { | |
| bool = inputElem.checkValidity && inputElem.checkValidity() === false; | |
| } else { | |
| bool = inputElem.value != smile; | |
| } | |
| } | |
| inputs[ props[i] ] = !!bool; | |
| } | |
| return inputs; | |
| })('search tel url email datetime date month week time datetime-local number range color'.split(' ')); | |
| } | |
| for ( var feature in tests ) { | |
| if ( hasOwnProp(tests, feature) ) { | |
| featureName = feature.toLowerCase(); | |
| Modernizr[featureName] = tests[feature](); | |
| classes.push((Modernizr[featureName] ? '' : 'no-') + featureName); | |
| } | |
| } | |
| Modernizr.input || webforms(); | |
| Modernizr.addTest = function ( feature, test ) { | |
| if ( typeof feature == 'object' ) { | |
| for ( var key in feature ) { | |
| if ( hasOwnProp( feature, key ) ) { | |
| Modernizr.addTest( key, feature[ key ] ); | |
| } | |
| } | |
| } else { | |
| feature = feature.toLowerCase(); | |
| if ( Modernizr[feature] !== undefined ) { | |
| return Modernizr; | |
| } | |
| test = typeof test == 'function' ? test() : test; | |
| if (typeof enableClasses !== "undefined" && enableClasses) { | |
| docElement.className += ' ' + (test ? '' : 'no-') + feature; | |
| } | |
| Modernizr[feature] = test; | |
| } | |
| return Modernizr; | |
| }; | |
| setCss(''); | |
| modElem = inputElem = null; | |
| Modernizr._version = version; | |
| Modernizr._prefixes = prefixes; | |
| Modernizr._domPrefixes = domPrefixes; | |
| Modernizr._cssomPrefixes = cssomPrefixes; | |
| Modernizr.mq = testMediaQuery; | |
| Modernizr.hasEvent = isEventSupported; | |
| Modernizr.testProp = function(prop){ | |
| return testProps([prop]); | |
| }; | |
| Modernizr.testAllProps = testPropsAll; | |
| Modernizr.testStyles = injectElementWithStyles; | |
| Modernizr.prefixed = function(prop, obj, elem){ | |
| if(!obj) { | |
| return testPropsAll(prop, 'pfx'); | |
| } else { | |
| return testPropsAll(prop, obj, elem); | |
| } | |
| }; | |
| docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + | |
| (enableClasses ? ' js ' + classes.join(' ') : ''); | |
| return Modernizr; | |
| })(this, this.document); | |
| /** | |
| * @preserve HTML5 Shiv prev3.7.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed | |
| */ | |
| ;(function(window, document) { | |
| /*jshint evil:true */ | |
| /** version */ | |
| var version = '3.7.0'; | |
| /** Preset options */ | |
| var options = window.html5 || {}; | |
| /** Used to skip problem elements */ | |
| var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i; | |
| /** Not all elements can be cloned in IE **/ | |
| var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i; | |
| /** Detect whether the browser supports default html5 styles */ | |
| var supportsHtml5Styles; | |
| /** Name of the expando, to work with multiple documents or to re-shiv one document */ | |
| var expando = '_html5shiv'; | |
| /** The id for the the documents expando */ | |
| var expanID = 0; | |
| /** Cached data for each document */ | |
| var expandoData = {}; | |
| /** Detect whether the browser supports unknown elements */ | |
| var supportsUnknownElements; | |
| (function() { | |
| try { | |
| var a = document.createElement('a'); | |
| a.innerHTML = '<xyz></xyz>'; | |
| //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles | |
| supportsHtml5Styles = ('hidden' in a); | |
| supportsUnknownElements = a.childNodes.length == 1 || (function() { | |
| // assign a false positive if unable to shiv | |
| (document.createElement)('a'); | |
| var frag = document.createDocumentFragment(); | |
| return ( | |
| typeof frag.cloneNode == 'undefined' || | |
| typeof frag.createDocumentFragment == 'undefined' || | |
| typeof frag.createElement == 'undefined' | |
| ); | |
| }()); | |
| } catch(e) { | |
| // assign a false positive if detection fails => unable to shiv | |
| supportsHtml5Styles = true; | |
| supportsUnknownElements = true; | |
| } | |
| }()); | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Creates a style sheet with the given CSS text and adds it to the document. | |
| * @private | |
| * @param {Document} ownerDocument The document. | |
| * @param {String} cssText The CSS text. | |
| * @returns {StyleSheet} The style element. | |
| */ | |
| function addStyleSheet(ownerDocument, cssText) { | |
| var p = ownerDocument.createElement('p'), | |
| parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement; | |
| p.innerHTML = 'x<style>' + cssText + '</style>'; | |
| return parent.insertBefore(p.lastChild, parent.firstChild); | |
| } | |
| /** | |
| * Returns the value of `html5.elements` as an array. | |
| * @private | |
| * @returns {Array} An array of shived element node names. | |
| */ | |
| function getElements() { | |
| var elements = html5.elements; | |
| return typeof elements == 'string' ? elements.split(' ') : elements; | |
| } | |
| /** | |
| * Returns the data associated to the given document | |
| * @private | |
| * @param {Document} ownerDocument The document. | |
| * @returns {Object} An object of data. | |
| */ | |
| function getExpandoData(ownerDocument) { | |
| var data = expandoData[ownerDocument[expando]]; | |
| if (!data) { | |
| data = {}; | |
| expanID++; | |
| ownerDocument[expando] = expanID; | |
| expandoData[expanID] = data; | |
| } | |
| return data; | |
| } | |
| /** | |
| * returns a shived element for the given nodeName and document | |
| * @memberOf html5 | |
| * @param {String} nodeName name of the element | |
| * @param {Document} ownerDocument The context document. | |
| * @returns {Object} The shived element. | |
| */ | |
| function createElement(nodeName, ownerDocument, data){ | |
| if (!ownerDocument) { | |
| ownerDocument = document; | |
| } | |
| if(supportsUnknownElements){ | |
| return ownerDocument.createElement(nodeName); | |
| } | |
| if (!data) { | |
| data = getExpandoData(ownerDocument); | |
| } | |
| var node; | |
| if (data.cache[nodeName]) { | |
| node = data.cache[nodeName].cloneNode(); | |
| } else if (saveClones.test(nodeName)) { | |
| node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode(); | |
| } else { | |
| node = data.createElem(nodeName); | |
| } | |
| // Avoid adding some elements to fragments in IE < 9 because | |
| // * Attributes like `name` or `type` cannot be set/changed once an element | |
| // is inserted into a document/fragment | |
| // * Link elements with `src` attributes that are inaccessible, as with | |
| // a 403 response, will cause the tab/window to crash | |
| // * Script elements appended to fragments will execute when their `src` | |
| // or `text` property is set | |
| return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node; | |
| } | |
| /** | |
| * returns a shived DocumentFragment for the given document | |
| * @memberOf html5 | |
| * @param {Document} ownerDocument The context document. | |
| * @returns {Object} The shived DocumentFragment. | |
| */ | |
| function createDocumentFragment(ownerDocument, data){ | |
| if (!ownerDocument) { | |
| ownerDocument = document; | |
| } | |
| if(supportsUnknownElements){ | |
| return ownerDocument.createDocumentFragment(); | |
| } | |
| data = data || getExpandoData(ownerDocument); | |
| var clone = data.frag.cloneNode(), | |
| i = 0, | |
| elems = getElements(), | |
| l = elems.length; | |
| for(;i<l;i++){ | |
| clone.createElement(elems[i]); | |
| } | |
| return clone; | |
| } | |
| /** | |
| * Shivs the `createElement` and `createDocumentFragment` methods of the document. | |
| * @private | |
| * @param {Document|DocumentFragment} ownerDocument The document. | |
| * @param {Object} data of the document. | |
| */ | |
| function shivMethods(ownerDocument, data) { | |
| if (!data.cache) { | |
| data.cache = {}; | |
| data.createElem = ownerDocument.createElement; | |
| data.createFrag = ownerDocument.createDocumentFragment; | |
| data.frag = data.createFrag(); | |
| } | |
| ownerDocument.createElement = function(nodeName) { | |
| //abort shiv | |
| if (!html5.shivMethods) { | |
| return data.createElem(nodeName); | |
| } | |
| return createElement(nodeName, ownerDocument, data); | |
| }; | |
| ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' + | |
| 'var n=f.cloneNode(),c=n.createElement;' + | |
| 'h.shivMethods&&(' + | |
| // unroll the `createElement` calls | |
| getElements().join().replace(/\w+/g, function(nodeName) { | |
| data.createElem(nodeName); | |
| data.frag.createElement(nodeName); | |
| return 'c("' + nodeName + '")'; | |
| }) + | |
| ');return n}' | |
| )(html5, data.frag); | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Shivs the given document. | |
| * @memberOf html5 | |
| * @param {Document} ownerDocument The document to shiv. | |
| * @returns {Document} The shived document. | |
| */ | |
| function shivDocument(ownerDocument) { | |
| if (!ownerDocument) { | |
| ownerDocument = document; | |
| } | |
| var data = getExpandoData(ownerDocument); | |
| if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) { | |
| data.hasCSS = !!addStyleSheet(ownerDocument, | |
| // corrects block display not defined in IE6/7/8/9 | |
| 'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' + | |
| // adds styling not present in IE6/7/8/9 | |
| 'mark{background:#FF0;color:#000}' + | |
| // hides non-rendered elements | |
| 'template{display:none}' | |
| ); | |
| } | |
| if (!supportsUnknownElements) { | |
| shivMethods(ownerDocument, data); | |
| } | |
| return ownerDocument; | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * The `html5` object is exposed so that more elements can be shived and | |
| * existing shiving can be detected on iframes. | |
| * @type Object | |
| * @example | |
| * | |
| * // options can be changed before the script is included | |
| * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false }; | |
| */ | |
| var html5 = { | |
| /** | |
| * An array or space separated string of node names of the elements to shiv. | |
| * @memberOf html5 | |
| * @type Array|String | |
| */ | |
| 'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video', | |
| /** | |
| * current version of html5shiv | |
| */ | |
| 'version': version, | |
| /** | |
| * A flag to indicate that the HTML5 style sheet should be inserted. | |
| * @memberOf html5 | |
| * @type Boolean | |
| */ | |
| 'shivCSS': (options.shivCSS !== false), | |
| /** | |
| * Is equal to true if a browser supports creating unknown/HTML5 elements | |
| * @memberOf html5 | |
| * @type boolean | |
| */ | |
| 'supportsUnknownElements': supportsUnknownElements, | |
| /** | |
| * A flag to indicate that the document's `createElement` and `createDocumentFragment` | |
| * methods should be overwritten. | |
| * @memberOf html5 | |
| * @type Boolean | |
| */ | |
| 'shivMethods': (options.shivMethods !== false), | |
| /** | |
| * A string to describe the type of `html5` object ("default" or "default print"). | |
| * @memberOf html5 | |
| * @type String | |
| */ | |
| 'type': 'default', | |
| // shivs the document according to the specified `html5` object options | |
| 'shivDocument': shivDocument, | |
| //creates a shived element | |
| createElement: createElement, | |
| //creates a shived documentFragment | |
| createDocumentFragment: createDocumentFragment | |
| }; | |
| /*--------------------------------------------------------------------------*/ | |
| // expose html5 | |
| window.html5 = html5; | |
| // shiv the document | |
| shivDocument(document); | |
| /*------------------------------- Print Shiv -------------------------------*/ | |
| /** Used to filter media types */ | |
| var reMedia = /^$|\b(?:all|print)\b/; | |
| /** Used to namespace printable elements */ | |
| var shivNamespace = 'html5shiv'; | |
| /** Detect whether the browser supports shivable style sheets */ | |
| var supportsShivableSheets = !supportsUnknownElements && (function() { | |
| // assign a false negative if unable to shiv | |
| var docEl = document.documentElement; | |
| return !( | |
| typeof document.namespaces == 'undefined' || | |
| typeof document.parentWindow == 'undefined' || | |
| typeof docEl.applyElement == 'undefined' || | |
| typeof docEl.removeNode == 'undefined' || | |
| typeof window.attachEvent == 'undefined' | |
| ); | |
| }()); | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Wraps all HTML5 elements in the given document with printable elements. | |
| * (eg. the "header" element is wrapped with the "html5shiv:header" element) | |
| * @private | |
| * @param {Document} ownerDocument The document. | |
| * @returns {Array} An array wrappers added. | |
| */ | |
| function addWrappers(ownerDocument) { | |
| var node, | |
| nodes = ownerDocument.getElementsByTagName('*'), | |
| index = nodes.length, | |
| reElements = RegExp('^(?:' + getElements().join('|') + ')$', 'i'), | |
| result = []; | |
| while (index--) { | |
| node = nodes[index]; | |
| if (reElements.test(node.nodeName)) { | |
| result.push(node.applyElement(createWrapper(node))); | |
| } | |
| } | |
| return result; | |
| } | |
| /** | |
| * Creates a printable wrapper for the given element. | |
| * @private | |
| * @param {Element} element The element. | |
| * @returns {Element} The wrapper. | |
| */ | |
| function createWrapper(element) { | |
| var node, | |
| nodes = element.attributes, | |
| index = nodes.length, | |
| wrapper = element.ownerDocument.createElement(shivNamespace + ':' + element.nodeName); | |
| // copy element attributes to the wrapper | |
| while (index--) { | |
| node = nodes[index]; | |
| node.specified && wrapper.setAttribute(node.nodeName, node.nodeValue); | |
| } | |
| // copy element styles to the wrapper | |
| wrapper.style.cssText = element.style.cssText; | |
| return wrapper; | |
| } | |
| /** | |
| * Shivs the given CSS text. | |
| * (eg. header{} becomes html5shiv\:header{}) | |
| * @private | |
| * @param {String} cssText The CSS text to shiv. | |
| * @returns {String} The shived CSS text. | |
| */ | |
| function shivCssText(cssText) { | |
| var pair, | |
| parts = cssText.split('{'), | |
| index = parts.length, | |
| reElements = RegExp('(^|[\\s,>+~])(' + getElements().join('|') + ')(?=[[\\s,>+~#.:]|$)', 'gi'), | |
| replacement = '$1' + shivNamespace + '\\:$2'; | |
| while (index--) { | |
| pair = parts[index] = parts[index].split('}'); | |
| pair[pair.length - 1] = pair[pair.length - 1].replace(reElements, replacement); | |
| parts[index] = pair.join('}'); | |
| } | |
| return parts.join('{'); | |
| } | |
| /** | |
| * Removes the given wrappers, leaving the original elements. | |
| * @private | |
| * @params {Array} wrappers An array of printable wrappers. | |
| */ | |
| function removeWrappers(wrappers) { | |
| var index = wrappers.length; | |
| while (index--) { | |
| wrappers[index].removeNode(); | |
| } | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| /** | |
| * Shivs the given document for print. | |
| * @memberOf html5 | |
| * @param {Document} ownerDocument The document to shiv. | |
| * @returns {Document} The shived document. | |
| */ | |
| function shivPrint(ownerDocument) { | |
| var shivedSheet, | |
| wrappers, | |
| data = getExpandoData(ownerDocument), | |
| namespaces = ownerDocument.namespaces, | |
| ownerWindow = ownerDocument.parentWindow; | |
| if (!supportsShivableSheets || ownerDocument.printShived) { | |
| return ownerDocument; | |
| } | |
| if (typeof namespaces[shivNamespace] == 'undefined') { | |
| namespaces.add(shivNamespace); | |
| } | |
| function removeSheet() { | |
| clearTimeout(data._removeSheetTimer); | |
| if (shivedSheet) { | |
| shivedSheet.removeNode(true); | |
| } | |
| shivedSheet= null; | |
| } | |
| ownerWindow.attachEvent('onbeforeprint', function() { | |
| removeSheet(); | |
| var imports, | |
| length, | |
| sheet, | |
| collection = ownerDocument.styleSheets, | |
| cssText = [], | |
| index = collection.length, | |
| sheets = Array(index); | |
| // convert styleSheets collection to an array | |
| while (index--) { | |
| sheets[index] = collection[index]; | |
| } | |
| // concat all style sheet CSS text | |
| while ((sheet = sheets.pop())) { | |
| // IE does not enforce a same origin policy for external style sheets... | |
| // but has trouble with some dynamically created stylesheets | |
| if (!sheet.disabled && reMedia.test(sheet.media)) { | |
| try { | |
| imports = sheet.imports; | |
| length = imports.length; | |
| } catch(er){ | |
| length = 0; | |
| } | |
| for (index = 0; index < length; index++) { | |
| sheets.push(imports[index]); | |
| } | |
| try { | |
| cssText.push(sheet.cssText); | |
| } catch(er){} | |
| } | |
| } | |
| // wrap all HTML5 elements with printable elements and add the shived style sheet | |
| cssText = shivCssText(cssText.reverse().join('')); | |
| wrappers = addWrappers(ownerDocument); | |
| shivedSheet = addStyleSheet(ownerDocument, cssText); | |
| }); | |
| ownerWindow.attachEvent('onafterprint', function() { | |
| // remove wrappers, leaving the original elements, and remove the shived style sheet | |
| removeWrappers(wrappers); | |
| clearTimeout(data._removeSheetTimer); | |
| data._removeSheetTimer = setTimeout(removeSheet, 500); | |
| }); | |
| ownerDocument.printShived = true; | |
| return ownerDocument; | |
| } | |
| /*--------------------------------------------------------------------------*/ | |
| // expose API | |
| html5.type += ' print'; | |
| html5.shivPrint = shivPrint; | |
| // shiv for print | |
| shivPrint(document); | |
| }(this, document)); | |
| /*yepnope1.5.4|WTFPL*/ | |
| (function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}})(this,document); | |
| Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0));}; | |
| ; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment