The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
What do these files do?
html5shiv.js
- This includes the basic
createElement( )shiv technique, along with monkeypatches fordocument.createElementanddocument.createDocumentFragmentfor IE6-8. It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x.
html5shiv-printshiv.js
- This includes all of the above, as well as a mechanism allowing HTML5 elements to be styled and contain children while being printed in IE 6-8.
Installation
Using Bower
This will clone the latest version of the HTML5 shiv into the bower_components directory at the root of your project and also create or update the file bower.json which specifies your projects dependencies.
Include the HTML5 shiv in the head of your page in a conditional comment and after any stylesheets.
Manual installation
Download and extract the latest zip package from this repositiory and copy the two files dist/html5shiv.js and dist/html5shiv-printshiv.js into your project. Then include one of them into your head as above.
HTML5 Shiv API
HTML5 Shiv works as a simple drop-in solution. In most cases there is no need to configure HTML5 Shiv or use methods provided by HTML5 Shiv.
html5.elements option
The elements option is a space separated string or array, which describes the full list of the elements to shiv. see also addElements.
Configuring elements before html5shiv.js is included.
2
3
4
window.html5 = {
'elements': 'mark section customelement'
};
Configuring elements after html5shiv.js is included.
2
3
4
window.html5.elements = 'mark section customelement';
//and re-invoke the `shivDocument` method
html5.shivDocument(document);
html5.shivCSS
If shivCSS is set to true HTML5 Shiv will add basic styles (mostly display: block) to sectioning elements (like section, article). In most cases a webpage author should include those basic styles in his normal stylesheet to ensure older browser support (i.e. Firefox 3.6) without JavaScript.
The shivCSS is true by default and can be set false, only before html5shiv.js is included:
2
3
4
window.html5 = {
'shivCSS': false
};
html5.shivMethods
If the shivMethods option is set to true (by default) HTML5 Shiv will override document.CreateElement / document.createDocumentFragment in Internet Explorer 6-8 to allow dynamic DOM creation of HTML5 elements.
Known issue: If an element is created using the overridden createElement method this element returns a document fragment as its parentNode , but should be normally null. If a script relies on this behavior, shivMethods should be set to false . Note: jQuery 1.7+ has implemented his own HTML5 DOM creation fix for Internet Explorer 6-8. If all your scripts (including Third party scripts) are using jQuery’s manipulation and DOM creation methods, you might want to set this option to false.
Configuring shivMethods before html5shiv.js is included.
2
3
4
window.html5 = {
'shivMethods': false
};
Configuring element before html5shiv.js is included.
2
window.html5.shivMethods = false;
html5.addElements (newElements [, document] )
The html5.addElements method extends the list of elements to shiv. The newElements argument can be a whitespace separated list or an array.
2
html5.addElements('element content');
html5.createElement ( nodeName [, document] )
The html5.createElement method creates a shived element, even if shivMethods is set to false.
html5.createDocumentFragment ( [document] )
The html5.createDocumentFragment method creates a shived document fragment, even if shivMethods is set to false.
HTML5 Shiv Known Issues and Limitations
- The
shivMethodsoption (overridingdocument.createElement) and thehtml5.createElementmethod create elements, which are not disconnected and have a parentNode (see also issue #64) - The cloneNode problem is currently not addressed by HTML5 Shiv. HTML5 elements can be dynamically created, but can’t be cloned in all cases.
- The printshiv version of HTML5 Shiv has to alter the print styles and the whole DOM for printing. In case of complex websites and or a lot of print styles this might cause performance and/or styling issues. A possible solution could be the htc-branch of HTML5 Shiv, which uses another technique to implement print styles for Internet Explorer 6-8.
0 Comments