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.
html5shiv.js
createElement()
shiv technique, along with monkeypatches for document.createElement
and document.createDocumentFragment
for IE6-8. It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x.####html5shiv-printshiv.js
HTML5 Shiv is maintained by Alexander Farkas, Jonathan Neal and Paul Irish, with many contributions from John-David Dalton. It is also distributed with Modernizr, and the two google code projects, html5shiv and html5shim, maintained by Remy Sharp.
If you have any issues in these implementations, you can report them here! :)
For the full story of HTML5 Shiv and all of the people involved in making it, read The Story of the HTML5 Shiv.
###Using Bower
bower install html5shiv --save-dev
This will clone the latest version of the HTML5 shiv into the 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.
<!--[if lt IE 9]>
<script src="components/html5shiv/html5shiv.js"></script>
<![endif]-->
###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 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
optionThe elements
option is a space separated string or array, which describes the full list of the elements to shiv.
Configuring elements
before html5shiv.js
is included.
//create a global html5 options object
window.html5 = {
'elements': 'mark section customelement'
};
Configuring elements
after html5shiv.js
is included.
//change the html5shiv options object
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:
//create a global html5 options object
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 relays 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.
//create a global html5 options object
window.html5 = {
'shivMethods': false
};
Configuring elements
after html5shiv.js
is included.
//change the html5shiv options object
window.html5.shivMethods = false;
html5.createElement( nodeName [, document] )
The html5.createElement
method creates a shived element, even if shivMethods
is set to false.
var container = html5.createElement('div');
//container is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';
html5.createDocumentFragment( [document] )
The html5.createDocumentFragment
method creates a shived document fragment, even if shivMethods
is set to false.
var fragment = html5.createDocumentFragment();
var container = document.createElement('div');
fragment.appendChild(container);
//fragment is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';
shivMethods
option (overriding document.createElement
) and the html5.createElement
method create elements, which are not disconnected and have a parentNode (see also issue #64)html5shiv
. It was merged into html5shiv
.cloneNode
and createElement
was later merged into html5shiv
html5shiv
addressed the same issues as well, so the project was completed.html5shiv
project.html5shiv
and can include the latest version in any custom builds created at modernizr.comhtml5shiv
repo now contains tests for all the edge cases pursued by the above libraries and has been extensively tested, both in development and production.A detailed changelog of html5shiv is available.
The term shiv originates from John Resig, who was thought to have used the word for its slang meaning, a sharp object used as a knife-like weapon, intended for Internet Explorer. Truth be known, John probably intended to use the word shim, which in computing means an application compatibility workaround. Rather than correct his mispelling, most developers familiar with Internet Explorer appreciated the visual imagery. And that, kids, is etymology.