如何正确使用HTML5shiv ...如何在IE 9,Firefox,Safari上工作？

Question

题

当使用的条件注释是针对IE8及以下时,html5shiv如何在IE9上工作并且Safari 4.x和Firefox 3.x读取IE 条件注释？如果没有html5shiv如何使用他们的Github指令中建议的条件评论在这些浏览器上工作？[if lt IE 9]

---

这里有一个问题,询问是否可以在没有条件评论的每个浏览器中使用它以及副作用会是什么,但这不是我的问题.4年前问过这个问题.HTML5现在已成为标准配置,Microsoft不再提供对旧版浏览器的支持,因此在每个浏览器中加载它都会让人感到疯狂,我不会考虑这一点.我的问题与Github上的文档有关,html5shiv使用该文档开箱即用,以及如何使用它来支持它声称支持的浏览器.

在github上引用关于html5shiv脚本的自述文件:

"它还为IE6-9,Safari 4.x和FF 3.x的HTML5元素应用了基本样式."

用途:

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

---

根据Stat Counter的数据,在过去的一年中,IE 8和9的总和已从全球使用量的4%左右降至约2%.自1月12日微软放弃对传统浏览器的支持以来,html5shiv似乎现在或将很快成为过去.看看这些传统的IE浏览器在未来一年中会下降多少将会很有趣.

但是,根据您正在开发的内容,您可能仍希望支持这些浏览器.当您在上述统计数据中包含Safari 4.x和Firefox 3时,html5shiv支持的浏览器共享总量为2.3%.对于大多数人来说什么都不是,但如果你拥有一个电子商务网站,2.3%可能是巨大的.

---

关于我的实际问题,我想我或者忽略了文档中的某些内容,或者对IE条件评论不够了解.

从逻辑上讲,我认为这将是最好的方法.IE中的条件注释通过版本5到9工作,因此我们不应该无理由地在IE5中加载脚本.

<!--[if !(IE 5)]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

然而,在过去的5年里,我从未见过有人这样做,所以我显然错过了一些东西.另外,我仍然没有看到这对FF 3和Safari 4有什么用,除非有一个错误或什么导致他们不阅读评论.关于这个问题,我在html5shiv github上打开了这个主题,但是还没有得到答案.

HTML5shiv很容易在数百万个网站上使用,大多数开发人员和网站所有者认为它支持IE9 Safari 4和FF 3开箱即用.

---

另外,据我所知,就IE9而言,这就是html5shiv支持它的全部内容.

article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}

如果这是真的,可能是许多人停止使用它的另一个原因,考虑到当你把它拿出来并将它包含在你的css(或css重置)中时,你的浏览器数量下降到1.39%html5shiv实际上会有对...的影响.

Answer 1

shiv脚本仅在IE中使用(在这种情况下小于版本9 [... lt IE9 ...]),不在其他浏览器中使用,被它们忽略.它毕竟是评论出来的

<!-- ... --> 

IE支持这些并读取它们.shiv脚本增强了功能,使这些旧浏览器"更好".

更新:看起来"lt IE9"也在Safari 4.x和FF 3.x中运行.从我能找到的(全部克隆自GitHub项目描述).

另一个更新:我有信心这只适用于IE,而不是旧的Safari或FireFox.我会继续挖掘.如果我错了,别人会纠正我.

Answer 2

旁注：您仅应将类似的浏览器统计信息作为非常宽松的指南。这些站点的统计数据远非福音，并且会因国家/地区，市场与市场，人口与人口而变化。您应该查看自己网站的分析，并查看有多少用户属于Safari 4，FireFox 3，Internet Explorer 6-8类别（我想这将是很多不足2.3％）。

（还要记住，FireFox会自动更新自身，并且当前版本为43（！），而Safari随OSX自动更新，并且版本为9。人们仍然使用旧版本的可能性非常小。我检查了一个非常受欢迎的产品我的分析网站：在过去一个月的20,000个会话中，只有1个使用FF3，1个使用IE7，1个使用IE8，没有使用Safari 4或IE6。）

但是，如果您希望将这些异常值作为目标，则以下是对您的问题的答案：

当条件注释用于[if lt IE 9]IE8及以下版本时，html5shiv如何在IE9上工作

HTML5shiv不适用于IE9，因为它不需要。Internet Explorer 9已经正确支持几乎所有HTML5元素：

Safari 4.x和Firefox 3.x会读取IE条件注释吗？

Safari和FireFox不支持IE条件注释，但可以像这样定位它们：

FF3：

/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: lime; }

苹果浏览器：

/* Safari only override */     
::i-block-chrome,.myClass {      color: lime;     }

但这不是HTML5shiv所做的，您是对的： HTML5shiv主页上显示的条件语句不会被FF3或Safari 4吸收为当前状态。我猜这是因为他们认为这些浏览器非常罕见，以至于普通用户不值得。另外，无论如何，任何CSS重置/规范化都可能会包含那些浏览器所需的CSS。

因此，要遍历如何在上述所有浏览器中处理HTML5元素：

IE6-8：按照其Github文档中所述使用HTML5shiv.js 。

IE9-11：使用Normalize.css或添加main { display: block }到HTML中。（感谢LGSon。）

Safari 4：使用Normalize.css或以下CSS：

article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
    display: block;
}

FireFox 3：与上述相同。

（FireFox 4+和Safari 5+具有更强大的HTML5支持，不需要上述CSS。）

Answer 3

回答我自己的问题...

html5shiv 的 github 文档具有误导性......仅此而已。经过进一步挖掘后，我发现了这个旧的 HTML5SHIV Github 问题，它回答了这个问题。

不存在任何“浏览器怪癖或黑客行为”导致在 Firefox 3 或 Safari 4 中读取条件注释（这里有一个非常广泛的精彩浏览器黑客行为列表））。

[if lt IE 9]在 IE 5-8 中正常工作...不要被自述文件所欺骗。

因此，需要明确的是，如果您使用下面的代码片段，并期望它能够神奇地适用于 IE9、Safari 3 或 Firefox 4，那么您就很不走运了。

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

那么html5shiv应该如何使用呢？

正如我在问题中提到的以及其他人在答案中提到的，微软于 2016 年 1 月 12 日放弃了对旧版浏览器的支持。请记住这一点，并且我的问题中提到的这些统计数据可能是有偏差的，我的猜测是旧版浏览器未来一年左右的时间，使用量将继续稳步下降。最重要的是，当前的大部分使用可能来自更新缓慢的老企业老企业。对于大多数人来说，这些用户并不是他们从中获取流量的用户（特别是因为这些计算机很可能只是工作计算机）。

就我个人而言，我不会再使用 html5shiv，但这既不存在也不存在。由于你们中的许多人可能仍然会使用 HTML5，这是我的建议，基于一些个人经验、研究和本页上关于 HTML5shiv 如何支持不同浏览器的其他答案......

如果您希望使用 html5shiv 支持 IE6-9、Safari 4 和 Firefox 3 而无需进行任何其他更改，请不要包含条件注释：

<script src="bower_components/html5shiv/dist/html5shiv.js"></script>

如果您想支持 Internet Explorer，请使用此选项。由于 html5shiv 不能在 IE 5 上运行，因此在那个糟糕的浏览器中加载它是没有意义的：

<!--[if !(IE 5)]>
       <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

如果您只需要支持 Internet Explorer 8 或 9，请使用以下命令：

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

选项 4：虽然上述方法可能是您所需要的，但经过一番思考后，我认为这是使用脚本的最有效方法。

<style type="text/css">
    article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
    mark{background:#FF0;color:#000}
</style>
<!--[if (gt IE 5)&(lt IE 9)]>
    <script type="text/javascript">window.html5={shivCSS:!1};</script>
    <script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

选项 4 1/2：“可能”是未来使用 HTML5Shiv 的最佳方式：

比上面的更好的是，我们可以删除 type 属性，因为我们指定这是 HTML5 并且我们可以缩小它。我们还可以使用流行的 CDN（例如 jsdeliver 或 maxcdn）来尝试加快速度，因为希望他们已经将文件缓存在计算机上。不要，我再说一遍，不要使用 Google 托管 html5shiv。这是人们常犯的错误，而且它只会缓存几分钟。Google 代码并不意味着成为 CDN。

我们还禁用 shiv css 并自己包含它。如果您使用CSS 重置（这里是 2016 年最流行的列表），您可以将下面的样式部分全部删除。

最后，我们按照建议将其包含在结束头标记之前。

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta, stylesheets, etc... -->
    <style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>
    <!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
</head>

此方法将确保您从支持您期望的浏览器的 HTML5shiv 中获得您想要的结果。

由于 IE 不再支持旧版浏览器，并且 Firefox 和 Safari 具有自动更新功能），因此您很可能不再使用 shiv，而是使用 @LGSon 等解决方案或仅使用 CSS 样式/重置。