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

How to use HTML5shiv correctly... how work on IE 9, Firefox, Safari?

Question

How does html5shiv work on IE9 when the conditional comment used [if lt IE 9] is for IE8 and below AND do Safari 4.x and Firefox 3.x read IE conditional comments? If not how could html5shiv POSSIBLY work on these browsers using the conditional comments as suggested in their Github Instructions?


有一个 question here 询问是否可以在没有条件注释的情况下在每个浏览器中使用它以及副作用是什么,但这不是我的问题。这个问题是4年前问的。 HTML5 现在是标准,Microsoft 不再提供对旧版浏览器的支持,因此在这一点上在每个浏览器中加载它是疯狂的,我不会考虑。我的问题与 Github 上的文档有关,html5shiv 使用该文档提供了开箱即用的功能,以及今天如何使用它来支持它声称支持的浏览器。

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

"It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x."

用法:

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

根据 Stat Counter. Since Microsoft dropped support 1 月 12 日遗留浏览器的数据,IE 8 和 9 的全球使用率在过去一年中从约 4% 下降到约 2%,看来 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 有何影响,除非有错误或其他原因导致他们不阅读评论。我打开了这个 topic on html5shiv github regarding this issue as well,但一直没能得到答案。

HTML5shiv 很容易在数以百万计的网站上使用,大多数开发人员和网站所有者假设它支持开箱即用的 IE9 Safari 4 和 FF 3。


Also, as far as I'm aware in regards to IE9, this is all that html5shiv does to support it.

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

如果这是真的,这可能是许多人停止使用它的另一个原因,考虑到当你把它从等式中取出来并将它包含在你的 css(或 css 重置)中时,你1.39% 的浏览器 html5shiv 实际上会产生影响。

shiv 脚本仅在 IE 中使用(在本例中低于版本 9 [...lt IE9...]),不在其他浏览器中使用,被它们忽略。毕竟被注释掉了

<!-- ... --> 

IE 支持并读取它们。 shiv 脚本增强了使那些旧浏览器正常工作的功能 "better"。

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

另一个更新: 我确信这只适用于 IE,不适用于旧的 Safari 或 FireFox。我会继续挖掘。如果我错了,请其他人纠正我。

我在 Internet Explorer Conditional Comments 年前写了一个非常详细的页面。这是针对 lte = 小于 [or] 等于 IE9;我已经记录了许多示例,可以复制并粘贴到我写的页面上。

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

我建议您的访问者从 Vista 升级,这是唯一可以 运行 IE9 或更低版本提供安全支持的 Windows 版本。截至 2016 年 1 月,仅支持每个 Windows 版本的最新版本的 Internet Explorer。请参阅 Internet Explorer Versions Wiki page 哪些版本的 IE 运行 哪些版本的 Windows。


截至 2010 年 1 月,只有 IE10+ 应该受到任何有意义的关注。正确的策略是 full-page 阻止 IE9 或更低版本;如果 Microsoft 不支持它,那么你也不应该 除非 你得到的报酬至少是你一年的报酬 两倍公司工作。坚守阵地的开发人员,我们是最终知道完成工作需要什么的人。

旁注:您应该只将这样的浏览器统计数据作为非常宽松的指南。此类网站上的统计数据远非福音,并且会因国家/地区、市场与市场、人口统计数据而异。您应该查看您自己网站的分析,看看有多少用户属于 Safari 4、FireFox 3、Internet Explorer 6-8 类别(我的猜测是它会少于 2.3%)。

(还请记住,FireFox 会自动更新自身并且当前版本为 43(!),而 Safari 会自动更新 OSX,并且版本为 9。人们仍在使用旧版本的机会非常轻微。我查看了我的一个非常受欢迎的分析网站:在过去一个月的 20,000 个会话中,只有 1 个使用 FF3,1 个使用 IE7,1 个使用 IE8,none 使用 Safari 4 或 IE6。)


但是,如果您热衷于定位那些异常值,以下是您问题的答案:

How does html5shiv work on IE9 when the conditional comment used [if lt IE 9] is for IE8 and below

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

do Safari 4.x and Firefox 3.x read IE conditional comments?

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 reset/normalize 都可能包含这些浏览器所需的 CSS。

所以要了解如何在所有提到的浏览器中处理 HTML5 元素:

IE6-8:按照Github documentation.

中的描述使用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。)

回答我自己的问题...

html5shiv 的 github 文档具有误导性...仅此而已。在做了一些进一步的挖掘之后,我发现了 this old HTML5SHIV Github issue that answers this question.

没有任何 "browser quirk or hack" 会导致在 Firefox 3 或 Safari 4 中读取条件注释 (here's a very extensive list of awesome browser hacks)。

[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应该怎么使用呢?

正如我在问题中提到的以及其他人在他们的回答中提到的那样,Microsoft 于 2016 年 1 月 12 日放弃了对旧版浏览器的支持。请记住这一点,并且我的问题中提到的这些统计数据可能存在偏差,我的猜测是 legacy useage will continue to drop at a solid pace over the next year or so. On top of that, the majority of the current usage is probably coming from older businesses that have been slow to update。对于大多数人来说,这些不是他们从中获得流量的用户(特别是因为这些计算机很可能只是工作计算机)。

就我个人而言,我不会再使用 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]-->


Option 4 1/2 : "Probably" the best way to use HTML5Shiv going forward:

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

我们还禁用了 shiv css 并自己将其包含在内。如果您使用的是 css reset (here's a list of the most popular in 2016),则可以 将样式 部分放在一起。

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

<!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 不再支持旧版浏览器 auto-updates),很可能你可以不再使用 shiv 并使用@LGSon 之类的解决方案或 CSS styles/reset.

不,他们 github 页面上关于如何加载 shiv 的示例将无法在 8 及以下版本的 IE 浏览器以外的任何其他浏览器上运行,因为它使用了 "downlevel-hidden" conditional comment 技术。

为了使其在 IE9 及以下版本以及 Safari 和 Firefox 等非 IE 浏览器上均能正常工作,需要使用 "downlevel-revealed" conditional comment 技术,如下所示。

<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->

值得注意的旁注是:

  • IE10及更高版本不再支持条件注释,在此用例中将表现为非IE浏览器。

  • 在已经支持 HTML5 元素的浏览器上,shiv 会什么都不做吗。