包简介

Defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

README 文档

README

Installation

Composer

composer require gaomingcode/html5shiv

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?

`html5shiv.js`

This includes the basic 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`

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?

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.

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.

Installation

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 <head> of your page in a conditional comment and after any stylesheets.

<!--[if lt IE 9]>
	<script src="bower_components/html5shiv/dist/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 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.

//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 relies on this behavior, shivMethodsshould 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] )`

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] )`

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>';

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 of HTML5 Shiv, which uses another technique to implement print styles for Internet Explorer 6-8.

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.
IEPP, 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 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 is available.

Why is it called a shiv?

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.

gaomingcode/html5shiv 适用场景与选型建议

gaomingcode/html5shiv 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 11 次下载、GitHub Stars 达 0，最近一次更新时间为 2021 年 06 月 01 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「html5shiv」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 gaomingcode/html5shiv 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 gaomingcode/html5shiv 我们能提供哪些服务？

定制开发 / 二次开发

基于 gaomingcode/html5shiv 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 gaomingcode/html5shiv 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

p2made/yii2-p2y2-things 11

A bunch of CSS & JS resources wrapped as Yii 2 AssetBundles &/or Widgets.

ezoterik/yii2-html5shiv-asset 2

HTML5 Shiv asset for Yii2 framework

wfcreations/yii2-asset-legacy 0

Yii2 Legacy for old browsers

p2made/p2y2-things 13

A bunch of CSS & JS resources wrapped as Yii 2 AssetBundles &/or Widgets.

mimicreative/yii2-html5shiv 0

HTML5 Shiv Asset Bundle for Yii2

gaomingcode/html5shiv

包简介

关键字：

README 文档

README

Installation

Composer

ReadMe from Origin

What do these files do?

`html5shiv.js`

`html5shiv-printshiv.js`

Who can I get mad at now?

Installation

Using Bower

Manual installation

HTML5 Shiv API

`html5.elements` option

`html5.shivCSS`

`html5.shivMethods`

`html5.addElements( newElements [, document] )`

`html5.createElement( nodeName [, document] )`

`html5.createDocumentFragment( [document] )`

HTML5 Shiv Known Issues and Limitations

What about the other HTML5 element projects?

Why is it called a shiv?

gaomingcode/html5shiv 适用场景与选型建议

与 gaomingcode/html5shiv 相关的其它包

统计信息

GitHub 信息

其他信息

gaomingcode/html5shiv

包简介

关键字：

README 文档

README

Installation

Composer

ReadMe from Origin

What do these files do?

html5shiv.js

html5shiv-printshiv.js

Who can I get mad at now?

Installation

Using Bower

Manual installation

HTML5 Shiv API

html5.elements option

html5.shivCSS

html5.shivMethods

html5.addElements( newElements [, document] )

html5.createElement( nodeName [, document] )

html5.createDocumentFragment( [document] )

HTML5 Shiv Known Issues and Limitations

What about the other HTML5 element projects?

Why is it called a shiv?

gaomingcode/html5shiv 适用场景与选型建议

与 gaomingcode/html5shiv 相关的其它包

统计信息

GitHub 信息

其他信息

`html5shiv.js`

`html5shiv-printshiv.js`

`html5.elements` option

`html5.shivCSS`

`html5.shivMethods`

`html5.addElements( newElements [, document] )`

`html5.createElement( nodeName [, document] )`

`html5.createDocumentFragment( [document] )`