PHPackages gaomingcode/html5shiv - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. gaomingcode/html5shiv ActiveLibrary[Utility & Helpers](/categories/utility) gaomingcode/html5shiv ===================== Defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. 3.7.3(4y ago)011MITJavaScript Since Jun 3Pushed 4y agoCompare [ Source](https://github.com/gaomingcode/html5shiv)[ Packagist](https://packagist.org/packages/gaomingcode/html5shiv)[ Docs](http://paulirish.com/2011/the-history-of-the-html5-shiv/)[ RSS](/packages/gaomingcode-html5shiv/feed)WikiDiscussions master Synced 1w ago READMEChangelog (1)DependenciesVersions (2)Used By (0) The HTML5 Shiv ============== [](#the-html5-shiv) [![GitHub Version](https://camo.githubusercontent.com/60f5cb294fb774c55a01468049e123199371a36a7fc61a8b8cfa57cae6b6a9e0/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f67616f6d696e67636f64652f68746d6c35736869762e737667)](https://github.com/gaomingcode/html5shiv)[![Packagist Downloads](https://camo.githubusercontent.com/ef53bee7a68825366772389f2c4efe9be1359472f5229c5dbccfeaf24efbed86/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f67616f6d696e67636f64652f68746d6c3573686976)](https://github.com/gaomingcode/html5shiv)[![Github License](https://camo.githubusercontent.com/f98673d9bb0cc5f7b442c75c467af04afad2703d556dd51e31b2a576bc4f4f0d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f67616f6d696e67636f64652f68746d6c3573686976)](https://github.com/gaomingcode/html5shiv) Installation ------------ [](#installation) ### Composer [](#composer) ``` composer require gaomingcode/html5shiv ``` ReadMe from Origin ------------------ [](#readme-from-origin) 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? [](#what-do-these-files-do) #### `html5shiv.js` [](#html5shivjs) - This includes the basic `createElement()` shiv technique, along with monkeypatches for `document.createElement` and `document.createDocumentFragment` for IE6-8. It also applies [basic styling](https://github.com/aFarkas/html5shiv/blob/51da98dabd3c537891b7fe6114633fb10de52473/src/html5shiv.js#L216-220) for HTML5 elements for IE6-9, Safari 4.x and FF 3.x. #### `html5shiv-printshiv.js` [](#html5shiv-printshivjs) - 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. ### Who can I get mad at now? [](#who-can-i-get-mad-at-now) HTML5 Shiv is maintained by [Alexander Farkas](https://github.com/aFarkas/), [Jonathan Neal](https://twitter.com/jon_neal) and [Paul Irish](https://twitter.com/paul_irish), with many contributions from [John-David Dalton](https://twitter.com/jdalton). It is also distributed with [Modernizr](http://modernizr.com/). 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](http://paulirish.com/2011/the-history-of-the-html5-shiv/). Installation ------------ [](#installation-1) ### Using [Bower](http://bower.io/) [](#using-bower) `bower install html5shiv --save` 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 `` of your page in a conditional comment and after any stylesheets. ``` ``` ### Manual installation [](#manual-installation) Download and extract the [latest zip package](https://github.com/aFarkas/html5shiv/archive/master.zip) 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 `` as above. HTML5 Shiv API -------------- [](#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 [](#html5elements-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.** ``` //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` [](#html5shivcss) 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` [](#html5shivmethods) 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.** ``` //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.addElements( newElements [, document] )` [](#html5addelements-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. ``` //extend list of elements to shiv html5.addElements('element content'); ``` ### `html5.createElement( nodeName [, document] )` [](#html5createelement-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 = 'This is a section'; ``` ### `html5.createDocumentFragment( [document] )` [](#html5createdocumentfragment-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 = 'This is a section'; ``` HTML5 Shiv Known Issues and Limitations --------------------------------------- [](#html5-shiv-known-issues-and-limitations) - The `shivMethods` option (overriding `document.createElement`) and the `html5.createElement` method 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](https://github.com/aFarkas/html5shiv/tree/iepp-htc) of HTML5 Shiv, which uses another technique to implement print styles for Internet Explorer 6-8. ### What about the other HTML5 element projects? [](#what-about-the-other-html5-element-projects) - The original conception and community collaboration story of the project is described at [The History of the HTML5 Shiv](http://paulirish.com/2011/the-history-of-the-html5-shiv/). - [IEPP](https://code.google.com/p/ie-print-protector), by Jon Neal, addressed the printing fault of the original `html5shiv`. It was merged into `html5shiv`. - **Shimprove**, in April 2010, patched `cloneNode` and `createElement` was later merged into `html5shiv` - **innerShiv**, introduced in August 2010 by JD Barlett, addressed dynamically adding new HTML5 elements into the DOM. [jQuery added support](http://blog.jquery.com/2011/11/03/jquery-1-7-released/) that made innerShiv redundant and `html5shiv` addressed the same issues as well, so the project was completed. - The **html5shim** and **html5shiv** sites on Google Code are maintained by Remy Sharp and are identical distribution points of this `html5shiv` project. - **Modernizr** is developed by the same people as `html5shiv` and can include the latest version in any custom builds created at modernizr.com - This `html5shiv` 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](https://github.com/aFarkas/html5shiv/wiki) is available. ### Why is it called a *shiv*? [](#why-is-it-called-a-shiv) The term **shiv** [originates](http://ejohn.org/blog/html5-shiv/) from [John Resig](https://github.com/jeresig), 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](http://en.wikipedia.org/wiki/Shim_(computing)), 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](https://en.wikipedia.org/wiki/Etymology). ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity5 Limited adoption so far Community19 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 1809d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4b333bd44a2f7f526cc29a59b2945b27c7d2f31df68b92c2eb46efbddc032483?d=identicon)[gaomingcode](/maintainers/gaomingcode) --- Top Contributors [![jonathantneal](https://avatars.githubusercontent.com/u/188426?v=4)](https://github.com/jonathantneal "jonathantneal (49 commits)")[![jdalton](https://avatars.githubusercontent.com/u/4303?v=4)](https://github.com/jdalton "jdalton (19 commits)")[![paulirish](https://avatars.githubusercontent.com/u/39191?v=4)](https://github.com/paulirish "paulirish (14 commits)")[![gaomingcode](https://avatars.githubusercontent.com/u/53959161?v=4)](https://github.com/gaomingcode "gaomingcode (8 commits)")[![imjoshdean](https://avatars.githubusercontent.com/u/252054?v=4)](https://github.com/imjoshdean "imjoshdean (5 commits)")[![brianblakely](https://avatars.githubusercontent.com/u/401422?v=4)](https://github.com/brianblakely "brianblakely (3 commits)")[![RobLoach](https://avatars.githubusercontent.com/u/25086?v=4)](https://github.com/RobLoach "RobLoach (3 commits)")[![ferrybig](https://avatars.githubusercontent.com/u/1576684?v=4)](https://github.com/ferrybig "ferrybig (2 commits)")[![thomaswelton](https://avatars.githubusercontent.com/u/678372?v=4)](https://github.com/thomaswelton "thomaswelton (2 commits)")[![mathiasbynens](https://avatars.githubusercontent.com/u/81942?v=4)](https://github.com/mathiasbynens "mathiasbynens (2 commits)")[![j15e](https://avatars.githubusercontent.com/u/143380?v=4)](https://github.com/j15e "j15e (1 commits)")[![javiercejudo](https://avatars.githubusercontent.com/u/1095851?v=4)](https://github.com/javiercejudo "javiercejudo (1 commits)")[![justinbmeyer](https://avatars.githubusercontent.com/u/78602?v=4)](https://github.com/justinbmeyer "justinbmeyer (1 commits)")[![kidwm](https://avatars.githubusercontent.com/u/822446?v=4)](https://github.com/kidwm "kidwm (1 commits)")[![maxmillion](https://avatars.githubusercontent.com/u/41111980?v=4)](https://github.com/maxmillion "maxmillion (1 commits)")[![slavanga](https://avatars.githubusercontent.com/u/1077807?v=4)](https://github.com/slavanga "slavanga (1 commits)")[![96RadhikaJadhav](https://avatars.githubusercontent.com/u/56536997?v=4)](https://github.com/96RadhikaJadhav "96RadhikaJadhav (1 commits)")[![vlakoff](https://avatars.githubusercontent.com/u/544424?v=4)](https://github.com/vlakoff "vlakoff (1 commits)")[![addyosmani](https://avatars.githubusercontent.com/u/110953?v=4)](https://github.com/addyosmani "addyosmani (1 commits)")[![aFarkas](https://avatars.githubusercontent.com/u/188254?v=4)](https://github.com/aFarkas "aFarkas (1 commits)") --- Tags html5shiv ### Embed Badge ![Health badge](/badges/gaomingcode-html5shiv/health.svg) ``` [![Health](https://phpackages.com/badges/gaomingcode-html5shiv/health.svg)](https://phpackages.com/packages/gaomingcode-html5shiv) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)