docker shims_了解HTML5 Polyfills，Shivs和Shims

docker shims

New web developers are often perterbed when they discover that the latest, most up-to-date browsers - including Chrome - don’t have complete support for every feature in HTML, CSS or JavaScript. Instead, support is a patchwork quilt spread across the entire front of browser development: Firefox will support a feature that Chrome does not, Safari won’t have a feature that’s available in Chrome, etc. There are three primary causes for this:

当新的Web开发人员发现最新，最新的浏览器(包括Chrome )不完全支持HTML ， CSS或JavaScript的每个功能时，他们通常会感到困惑。 相反，支持是遍及浏览器开发整个领域的拼凑而成的被子： Firefox将支持Chrome不支持的功能， Safari将不具有Chrome中可用的功能，等等。这有三个主要原因：

1. HTML is a living, ever-developing language. While the W3C codifies and standardizes HTML5, developers often desire features that are unfinished and still in beta (such as the Web Animation API). By their very nature, these features can be only partially implemented in current browser releases.

   HTML是一种生动的，不断发展的语言 。 虽然W3C对HTML5进行了编纂和标准化，但是开发人员经常希望使用尚未完成但仍处于测试阶段的功能(例如Web Animation API )。 就其本质而言，这些功能只能在当前的浏览器版本中部分实现。

2. There’s a massive amount of work to do. While there are many approaches to browser development, they all reach the same insurmountable problem: there’s a tremendous amount of work in implementing HTML5 features, and only so many people who have the time and ability to contribute code.

   有大量的工作要做 。 尽管有很多浏览器开发方法 ，但是它们都遇到了相同的无法解决的问题：实现HTML5功能需要进行大量工作，只有这么多人有时间和能力来编写代码。

3. Consumers won’t accept monolithic browser releases. Two decades ago, browser updates might come out once every 12 to 18 months; IE6 held out for five years. That’s no longer acceptable to consumers, who need (and deserve) regular browser updates. While it’s theoretically possible to not provide a release until a browser supports the entire HTML5 specification, the market has repeatedly shown that consumers will always prefer a browser released now, even if it only has partial support for new features.

   消费者不会接受整体浏览器版本 。 两十年前，浏览器更新可能每12至18个月发布一次； IE6举办了五年 。 需要(并应得到)定期浏览器更新的消费者不再接受这种方式。 从理论上讲，只有在浏览器支持整个HTML5规范后才提供发布，但市场反复表明，即使浏览器仅部分支持新功能，消费者也总是会喜欢现在发布的浏览器。

This leaves web developers in a difficult position: well-established parts of HTML, CSS and JavaScript have good browser support (albeit with the occasional bug), while hot new features in each language may have support in one or two browsers, but be entirely absent from others. Thankfully, there are solutions:

这使网络开发人员处于困境：完善HTML，CSS和JavaScript部分具有良好的浏览器支持(尽管偶尔会出现错误)，而每种语言的热门新功能可能在一个或两个浏览器中都受到支持，但完全是别人缺席。 值得庆幸的是，有解决方案：

Shims are any piece of code that intercept an API call (in web development, a request for a feature in HTML5, CSS or JavaScript) and provide alternative programming. Polyfills (a term invented by developer Remy Sharp) are a simplified shim, in the sense that they are usually “drop in” code added to a page that replicates a particular feature for browsers that don’t yet have support.

填充是截取API调用(在Web开发中，是对HTML5，CSS或JavaScript中的功能的请求)并提供替代编程的任何代码段。 Polyfills (由开发人员Remy Sharp发明的一个术语)是一种简化的填充程序，从某种意义上讲，它们通常是“插入”代码，添加到页面中，该代码为尚不支持的浏览器复制了特定功能。

This code is usually (but not exclusively) JavaScript, often combined with CSS and possibly substitute HTML markup. There are many established polyfills, often providing multiple solutions to the problem of legacy browser support for HTML5 and new features in CSS and JavaScript.

该代码通常是(但不是唯一)JavaScript，通常与CSS结合使用，并可能替代HTML标记。 有很多已建立的polyfill ，通常可以提供多种解决方案来解决旧版浏览器对HTML5的支持以及CSS和JavaScript中的新功能。

There are a few things to be wary of when employing polyfills, however:

但是，在使用polyfill时需要注意以下几点：

1. Polyfills themselves have limited browser support. While they are written to gain broad legacy support for older browsers, every polyfill has its limit: when it comes to Internet Explorer, for example, some only work in version 8 or higher. You should carefully research the browsers and versions visiting your site using a tool like Google Analytics and choose polyfills with appropriate support.

   Polyfills本身对浏览器的支持有限 。 尽管编写它们是为了获得对旧版浏览器的广泛继承支持，但每个polyfill都有其局限性：例如，对于Internet Explorer，某些填充只能在版本8或更高版本中使用。 您应该使用Google Analytics(分析)之类的工具仔细研究访问您网站的浏览器和版本，并选择具有适当支持的polyfill。

2. Be careful of dependencies. In order to gain a wider support with older browsers, polyfills sometimes use a framework like JQuery to ensure compatibility. This framework must be loaded for the polyfill to work.

   注意依赖项 。 为了获得对较旧浏览器的更广泛支持，polyfill有时会使用诸如JQuery之类的框架来确保兼容性。 必须加载此框架，polyfill才能工作。

3. Employ conditional loading where possible. You don’t want to load a bunch of irrelevant JavaScript for browsers that already have support for that feature. Conditional loading tests the browser first, and only loads the polyfills needed for that page in that particular browser. A tool like polyfill.io can automate this process; by adding the following at the start of your document:

   尽可能使用条件加载 。 您不想为已经支持该功能的浏览器加载一堆不相关JavaScript。 条件加载首先测试浏览器 ，然后仅在该特定浏览器中加载该页面所需的polyfill。 诸如polyfill.io之类的工具可以使此过程自动化。 通过在文档的开头添加以下内容：

   <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

   …you can have the service detect the browser and load only the polyfills needed. In recent browsers, employing @supports can also be useful.

   …您可以让该服务检测浏览器并仅加载所需的polyfills 。 在最近的浏览器中，使用@supports也会很有用。

It’s very important to note that polyfills are temporary solutions to browser support issues: eventually the share of legacy browsers visiting your site that don’t have support for the feature you need will wither away to the single digits, at which point you should probably remove the polyfill entirely.

需要特别注意的是， polyfills是浏览器支持问题的临时解决方案 ：最终，访问您网站的不支持所需功能的旧版浏览器所占比例将下降至个位数，这时您应该删除完全填充。

In terms of HTML5, shiv is a more specific reference: HTML5hiv is a small piece of JavScript originally developed by Sjoerd Visscher to allow styling of HTML5 with CSS in IE8, which did not recognize the new elements. If you’re only using a few HTML5 tags on your page, such as <main>, you can write IE support for them individually; otherwise, HTML5Shiv covers the gamut.

在HTML5方面， 下脚更具体的参考： HTML5hiv是一小片JavScript的最初由Sjoerd Visscher的开发，以便与在IE8 CSS，不承认新元素HTML5的造型。 如果您仅在页面上使用几个HTML5标签，例如<main> ， 则可以为它们单独编写IE支持 ； 否则，HTML5Shiv涵盖了整个范围。

翻译自: https://thenewcode.com/18/Understanding-HTML5-Polyfills-Shivs-and-Shims

docker shims