CSS transform example
| <!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> |
| /* 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));}; | |
| ; |
| /* 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