gaomingcode/html5shiv

在旧版 Internet Explorer 中启用 HTML5 分区元素的实际方法。

维护者

详细信息

github.com/gaomingcode/html5shiv

主页

源代码

安装: 9

依赖项: 0

建议者: 0

安全: 0

星星: 0

观察者: 0

分支: 2,561

语言:JavaScript

3.7.3 2021-06-03 17:09 UTC

MIT, GPL-2.0 851199d57584bb28128cb41d9df60c4fe945162f

html5shiv

This package is auto-updated.

Last update: 2024-09-04 12:38:10 UTC

README

GitHub Version Packagist Downloads Github License

安装

Composer

composer require gaomingcode/html5shiv

原始 ReadMe

HTML5 Shiv 允许在旧版 Internet Explorer 中使用 HTML5 分区元素，并为 Internet Explorer 6-9、Safari 4.x（以及 iPhone 3.x）和 Firefox 3.x 提供基本的 HTML5 样式。

这些文件做什么？

html5shiv.js

  • 这包括基本的 createElement() shiv 技术，以及针对 IE6-8 的 document.createElement 和 document.createDocumentFragment 的 monkeypatches。它还应用了针对 IE6-9、Safari 4.x 和 FF 3.x 的 HTML5 元素的基本样式。

html5shiv-printshiv.js

  • 这包括上述所有内容，以及允许在 IE 6-8 中打印时对 HTML5 元素进行样式设置和包含子元素的机制。

现在我可以对谁生气了？

HTML5 Shiv 由 Alexander Farkas、Jonathan Neal 和 Paul Irish 维护，并有 John-David Dalton 等多人的贡献。它还与 Modernizr 一起分发。

如果您在这些实现中遇到任何问题，您可以在这里报告！ :)

有关 HTML5 Shiv 的完整故事以及所有参与其中的人，请阅读 HTML5 Shiv 的故事。

安装

使用 Bower

bower install html5shiv --save

这将克隆最新版本的 HTML5 shiv 到您的项目根目录下的 bower_components 目录，并创建或更新文件 bower.json，该文件指定了您的项目依赖项。

在您的页面 <head> 中包含 HTML5 shiv，并在任何样式表之后使用条件注释。

<!--[if lt IE 9]>
	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

手动安装

从该存储库下载并解压缩最新的 zip 包，并将文件 dist/html5shiv.js 和 dist/html5shiv-printshiv.js 复制到您的项目中。然后像上面一样将其中的一个包含到您的 <head> 中。

HTML5 Shiv API

HTML5 Shiv 作为简单的插入解决方案。在大多数情况下，不需要配置 HTML5 Shiv 或使用 HTML5 Shiv 提供的方法。

html5.elements 选项

elements 选项是一个空格分隔的字符串或数组，它描述了要 shiv 的 完整 元素列表。另请参阅 addElements。

在包含 html5shiv.js 之前配置 elements。

//create a global html5 options object
window.html5 = {
  'elements': 'mark section customelement' 
};

在包含 html5shiv.js 之后配置 elements。

//change the html5shiv options object 
window.html5.elements = 'mark section customelement';
//and re-invoke the `shivDocument` method
html5.shivDocument(document);

html5.shivCSS

如果将 shivCSS 设置为 true，HTML5 Shiv 将为分区元素（如 section、article）添加基本样式（主要是 display: block）。在大多数情况下，网页作者应该在正常样式表中包含这些基本样式，以确保在不使用 JavaScript 的情况下支持旧版浏览器（例如 Firefox 3.6）。

默认情况下，shivCSS 为 true，并且可以在包含 html5shiv.js 之前将其设置为 false。

//create a global html5 options object
window.html5 = {
	'shivCSS': false
};

html5.shivMethods

如果将 shivMethods 选项设置为 true（默认值），HTML5 Shiv 将覆盖 Internet Explorer 6-8 中的 document.createElement/document.createDocumentFragment，以允许动态创建 HTML5 元素。

已知问题：如果使用覆盖的 createElement 方法创建元素，则该元素返回一个文档片段作为其 parentNode，但应该是 null。如果脚本依赖于这种行为，则应将 shivMethods 设置为 false。注意：jQuery 1.7+ 已实现了针对 Internet Explorer 6-8 的 HTML5 DOM 创建修复。如果您所有的脚本（包括第三方脚本）都使用 jQuery 的操作和 DOM 创建方法，则可能希望将此选项设置为 false。

在包含 html5shiv.js 之前配置 shivMethods。

//create a global html5 options object
window.html5 = {
	'shivMethods': false
};

在包含 html5shiv.js 之后配置 elements。

//change the html5shiv options object 
window.html5.shivMethods = false;

html5.addElements( newElements [, document] )

html5.addElements 方法扩展了要 shiv 的元素列表。newElements 参数可以是空格分隔的列表或数组。

//extend list of elements to shiv
html5.addElements('element content');

html5.createElement( nodeName [, document] )

html5.createElement 方法创建一个 shived 元素，即使 shivMethods 设置为 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] )

html5.createDocumentFragment 方法创建一个 shived 文档片段，即使 shivMethods 设置为 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 已知问题和限制

  • shivMethods 选项（覆盖 document.createElement）和 html5.createElement 方法创建的元素不是断开的，并且有一个 parentNode（另见问题 #64）
  • 当前 HTML5 Shiv 没有解决克隆节点问题。HTML5 元素可以动态创建，但在所有情况下都不能克隆。
  • HTML5 Shiv 的打印shiv版本必须更改打印样式和整个 DOM 以进行打印。在复杂网站或有很多打印样式的网站中，这可能会导致性能和/或样式问题。可能的解决方案是 HTML5 Shiv 的 htc-branch，它使用另一种技术为 Internet Explorer 6-8 实现打印样式。

其他 HTML5 元素项目怎么样？

  • 该项目的原始构想和社区协作故事在 HTML5 Shiv 的历史 中描述。
  • Jon Neal 的 IEPP 解决了原始 html5shiv 的打印故障。它已合并到 html5shiv 中。
  • 2010 年 4 月，Shimprove 修复了 cloneNode 和 createElement，后来被合并到 html5shiv 中。
  • innerShiv 于 2010 年 8 月由 JD Barlett 提出，解决了将新的 HTML5 元素动态添加到 DOM 中的问题。jQuery 添加了对它的支持，这使得 innerShiv 成为冗余的，而 html5shiv 也解决了相同的问题，因此项目完成。
  • html5shim 和 html5shiv 网站由 Remy Sharp 维护，是此 html5shiv 项目的相同分发点。
  • Modernizr 是由与 html5shiv 相同的人开发的，并且可以在 modernizr.com 上创建的任何自定义构建中包含最新版本。
  • 此 html5shiv 仓库现在包含了对上述库追求的所有边缘情况的测试，并且在开发和生产中进行了广泛的测试。

html5shiv的详细变更日志可在以下链接查看：html5shiv详细变更日志。

为什么叫它“shiv”？

术语shiv的来源是来源于John Resig，有人认为他使用这个词是为了其俚语意义，即用作刀状武器的锐利物体，针对Internet Explorer。据实而言，John可能本来想使用的是shim，在计算机领域意味着应用程序兼容性解决方案。而不是纠正他的拼写错误，大多数熟悉Internet Explorer的开发者欣赏这种视觉意象。这就是，孩子们，所谓的词源。