html5shiv.js скрипт для поддержки старыми IE6,7,8 элементов html5

html5shiv.js скрипт для поддержки старыми IE6,7,8 элементов html5

Старые версии Internet Explorer (IE) 6, 7, 8 не поддерживают элементы и теги html5. Чтобы это исправить, для основных элементов разметки html5 можно использовать такой хак:

<!-- Hack for IE6,7,8 to support html5 elements -->
<!--[if lt IE 9]>
    <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('main');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
    </script>
<![endif]-->

Или подключить скрипт html5shiv.js - для этого:

  1. Скопировать приведенный ниже скрипт;
  2. Сохранить его в файл html5shiv.js;
  3. Залить на сайт в папку к остальным javascript файлам, к примеру js;

  4. Подключить скрипт, прописав

    <script src="js/html5shiv.js"></script>

    в header страниц, на которых вы хотите его использовать. Часто бывает необходимо подключить скрипт на всех страницах, т.к. поддержка тегов html5 в старых IE нужна по всему сайту.

Итак, полный код скрипта html5shiv.js:

/**
* @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);

}(this, document));

Скрипт html5shiv.js довольно громоздкий т.к. в него по максимуму включена поддержка всевозможных элементов html5 для старых версий IE(6,7,8). Тем не менее, рекомендуется брать его за основу и переделывать под себя, оставляя только те html5 теги, которыми вы реально будете пользоваться на сайте.