Internet Explorer之后打扫房子

The new year started great for front-end development. On January 12th, Microsoft ended support for old versions of Internet Explorer. Millions of developers worldwide rejoiced at the news. The last vestiges of the Browser Wars that defined the beginning of the new millenium were finally put to rest.

新的一年对于前端开发非常重要。 1月12日， Microsoft终止了对旧版本Internet Explorer的支持 。 这个消息使全世界成千上万的开发人员感到高兴。 最终定义了新世纪开始的“浏览器战争”的最后遗迹。

For at least the last decade, the various versions of Internet Explorer have been the bane of web designers and front-end developers everywhere. The rise of Firefox, Opera and later Chrome showed the world that the web can be so much greater, faster and more secure. Yet, in fear of breaking the web for those who didn’t (or couldn’t) move away from Internet Explorer, we were forced to jump through hoops and bend over backwards to cater to the quirks of these legacy browsers. There is a well known pie chart image (the oldest appearance I could find was in 2007 on www.dezinerfolio.com) that showcases the feelings of the community:

至少在最近十年中，各种版本的Internet Explorer一直是各地Web设计师和前端开发人员的祸根。 Firefox，Opera和后来的Chrome的兴起向世界展示了网络可以变得更大，更快，更安全。 但是，由于担心那些无法(或无法离开)Internet Explorer的人破坏网络，我们*跳了圈，向后弯腰以迎合这些旧版浏览器的怪癖。 有一个众所周知的饼图图像(我能找到的最早的外观是2007年在www.dezinerfolio.com上 )，该图像展示了社区的感受：

Fortunately things are a lot better now. We only have to deal with the last incarnation of the Trident engine, namely Internet Explorer 11, which is already a solid modern browser on par with its competition. It is thus the time to clean house and throw away the deprecated tools, processes and techniques. Out with the old…

幸运的是，现在情况好多了。 我们只需要处理Trident引擎的最后一个版本，即Internet Explorer 11，它已经是与其竞争产品一样强大的现代浏览器。 因此，现在该是清理房屋并丢弃不推荐使用的工具，过程和技术的时候了。 与旧的...

不再有浏览器黑客 (No More Browser Hacks)

The first weapon we had in our arsenal was the browser hacks. A hack is a seemingly incorrect declaration that exploits some parsing errors in the rendering engine. It is used to overwrite the standard declaration with a value that will make the layout look and function properly on that specific browser. There were hacks that targeted single versions of Internet Explorer, while others covered multiple versions. A further classification can be made depending on the format of the hack:

我们军械库中的第一个武器是浏览器黑客。 hack是看似不正确的声明，它利用了呈现引擎中的某些解析错误。 它用于用一个值覆盖标准声明，该值将使布局在该特定浏览器上外观和功能正常。 有一些针对Internet Explorer单个版本的黑客，而其他黑客则涉及多个版本。 可以根据hack的格式进行进一步的分类：

• Selector hacks: These hacks usually are used to exclude old versions of IE that don’t understand the new syntax.

  选择器黑客 ：这些黑客通常用于排除不了解新语法的IE的旧版本。

• Property/value or attribute hacks: These are the original hacks — exploiting holes in the parsing engine to target specific old versions.

  属性/值或属性黑客 ：这些是原始黑客-利用解析引擎中的漏洞定位特定的旧版本。

• Media query hacks: They are used to target/filter various versions of browsers (not only Internet Explorer) based on the support of the syntax for @media declarations.

  媒体查询技巧 ：基于对@media声明语法的支持，它们用于定位/过滤各种版本的浏览器(不仅是Internet Explorer)。

• JavaScript hacks: They are used for “browser sniffing”, detecting specific versions of Internet Explorer based on various features supported by the JavaScript engine.

  JavaScript hacks ：它们用于“浏览器嗅探”，基于JavaScript引擎支持的各种功能来检测Internet Explorer的特定版本。

The use of hacks was both complicated and frustrating. Sometimes you had to cascade several hacks one after another, as some parsing errors (that allowed the existence of the hack) were fixed in following versions without removing the rendering problem that required the hack in the first place. Let’s see a few examples of such hacks, restricted to the three versions recently retired:

骇客的使用既复杂又令人沮丧。 有时您必须一个接一个地级联几个hack，因为在以下版本中修复了一些解析错误(允许hack的存在)，而没有消除首先需要hack的渲染问题。 让我们看一些此类黑客的例子，仅限于最近淘汰的三个版本：

/*========== Selector Hacks ==========*/

/* Internet Explorer 10+ */
_:-ms-input-placeholder, :root .selector {}

/* Everything except Internet Explorer 9 and lower */
html[lang='\
en'] .selector 
{}

/*========== Property/Value Hacks ==========*/

/* Internet Explorer 6-8 */
.selector { property: value\9; }
.selector { property/*\**/: value\9; }

/*========== Media Query Hacks ==========*/

/* Internet Explorer 8 */
@media \0screen {}

/* Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

/*========== JavaScript Hacks ==========*/

/* Internet Explorer 6-10 */
var isIE = !!window.ActiveXObject;

/* Internet Explorer 8-10 */
var isIE = document.all && document.querySelector;

For a more comprehensive list of hacks to remove from your code, visit Browserhacks.

有关要从代码中删除的更全面的黑客列表，请访问Browserhacks 。

再见有条件评论 (Bye Bye Conditional Comments)

As we have seen above, the use of CSS hacks is messy, prone to malfunction and (for those of you who are obsessive about their code) making the stylesheet fail validation. Things had escalated to the point where, in November 2005, the guys at Microsoft stepped in and made a call to action for the demise of CSS hacks, urging developers to use conditional comments instead.

正如我们在上面看到的，CSS hack的使用很杂乱，容易出错，并且(对于那些痴迷于代码的人来说)使样式表无法通过验证。 事情发展到了这样的程度，在2005年11月，Microsoft的家伙介入并呼吁采取行动以消除CSS黑客 ，敦促开发人员改用条件注释 。

Initially conditional comments were used to load extra stylesheets for certain versions of Internet Explorer. At that time the code differences between standard-compliant browsers and Internet Explorer were large enough to make the practice a valid one. When HTML5 became a reality, this was also used to load polyfills that provided the missing support for the new features (we’ll touch this topic later in the article). While this practice was mainly used to target code for IE6–7, you might still encounter it in some legacy code. Let’s have a look at some code samples:

最初，条件注释用于为某些版本的Internet Explorer加载额外的样式表。 当时，符合标准的浏览器和Internet Explorer之间的代码差异很大，足以使这种做法有效。 当HTML5成为现实时，它也被用来加载为新功能提供缺少支持的polyfill(我们将在本文的后面部分讨论该主题)。 尽管这种做法主要用于IE6-7的代码，但您可能仍会在一些旧代码中遇到它。 让我们看一些代码示例：

用于加载额外样式表的条件注释 (Conditional Comments Used to Load Extra Stylesheets)

<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]-->

用于加载JavaScript Polyfills的条件注释 (Conditional Comments Used to Load JavaScript Polyfills)

(code excerpt from the default Bootstrap starting template)

(摘自默认的Bootstrap启动模板 )

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

The main issue with this approach was that each version of Internet Explorer targeted this way made extra HTTP requests. The developers were forced to search for approaches that offered higher performance. The result was to deploy conditional comments to add extra classes to the <html> tag. This practice was a lot more popular, being used, among others, by the HTML5 Boilerplate framework. By that time Internet Explorer 6 could either be ignored or treated using graceful degradation, while the differences between the more modern versions (IE7–9) and their competition (Firefox, Chrome, Safari and Opera) were small enough not to warrant entire extra stylesheets. The few minor tweaks could be achieved due to the extra specificity provided by classes added to the <html> tag. This is the example most likely to be encountered today, as illustrated in the examples below:

这种方法的主要问题是，以这种方式定位的每个版本的Internet Explorer都会发出额外的HTTP请求。 开发人员*寻找提供更高性能的方法。 结果是部署条件注释以向<html>标记添加额外的类。 这种做法非常流行，并且被HTML5 Boilerplate框架所采用。 到那时，Internet Explorer 6可以忽略不计，也可以通过适当的降级处理，而更现代的版本(IE7–9)与竞争对手(Firefox，Chrome，Safari和Opera)之间的差异很小，不足以保证完整的样式表。 由于添加到<html>标记中的类提供了额外的特殊性，因此可以进行一些小的调整。 这是今天最有可能遇到的示例，如以下示例所示：

用于将额外的类添加到<html>标记的条件注释 (Conditional Comments Used to Add Extra Classes to The <html> Tag)

<!--[if IE 7]>   <html class="ie7"><![endif]-->
<!--[if IE 8]>   <html class="ie8"><![endif]-->
<!--[if IE 9]>   <html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->

使用额外类CSS代码 (CSS Code Using the Extra Classes)

.foo { color: black; }
.ie7 .foo { color: blue; } /* IE7 */
.ie8 .foo { color: green; } /* IE8 */
.ie9 .foo { color: red; } /* IE9 */

The launch of Internet Explorer 10 brought the end of conditional comments, as they were not supported anymore in this version. Feature detection (using Modernizr) was the new standard for progressive enhancement or graceful degradation. Only websites or frameworks that needed backward compatibility still used them, mostly to load polyfills, as we could see in the examples above.

Internet Explorer 10的发布终止了条件注释，因为此版本不再支持它们。 特征检测(使用Modernizr )是用于逐步增强或平滑降级的新标准。 如上例所示，只有需要向后兼容性的网站或框架仍在使用它们，主要用于加载polyfill。

精减JavaScript库 (Slim Down Your JavaScript Libraries)

We have seen above how the lack of support for modern features was often plugged with polyfills using conditional comments. If your application or website is using such scripts, you can safely get rid of them now. But not every situation is as clear as this one. Let’s expand this topic a bit further, with a few relevant examples.

上面我们已经看到了如何使用条件注释将polyfills插入缺少对现代功能的支持。 如果您的应用程序或网站正在使用此类脚本，则现在可以放心地删除它们。 但是，并非每种情况都像这种情况那么清楚。 让我们通过一些相关示例进一步扩展该主题。

It is a known fact that jQuery is the most used JavaScript library on the web, with more than 53 million websites on the record (according to BuiltWith.com). jQuery was born from the need to level the playing field between browsers by covering the differences in feature support. Over time, the legacy support had reached such a level that in 2013 jQuery was split in two branches: 1.x.x maintained support for old versions of Internet Explorer, while 2.x.x dropped all the features related to Internet Explorer 6–8. The latest update on January 8, 2016, has been announced as the last one before the move to 3.x.x. Therefore you could either stay with the 1.x.x branch and jump directly to 3.x.x, or switch now to 2.x.x and get as much efficiency as possible at the moment.

众所周知，jQuery是Web上使用最广泛JavaScript库，据记录，有超过5300万个网站(根据BuiltWith.com )。 jQuery的诞生是通过涵盖功能支持方面的差异来平衡浏览器之间的竞争环境。 随着时间的流逝，旧的支持达到了这样的水平：2013年，jQuery分为两个分支： 1.xx保留了对旧版本Internet Explorer的支持，而2.xx 放弃了与Internet Explorer 6-8相关的所有功能 。 2016年1月8日的最新更新已宣布为移至3.xx的最后更新。 因此，您可以继续使用1.xx分支并直接跳至3.xx ，或者现在切换到2.xx并在此时获得尽可能多的效率。

There is one more thing to consider. Internet Explorer 11 and Edge have better integration of native methods (especially for DOM navigation and manipulation) that in the past required jQuery to function properly across browsers. In some cases, when the scripts can be refactored properly, it might be even possible to remove jQuery completely and make use only of plain JavaScript.

还有一件事要考虑。 Internet Explorer 11和Edge更好地集成了本机方法(尤其是用于DOM导航和操作)，而过去需要jQuery在各种浏览器之间正常运行。 在某些情况下，当可以正确重构脚本时，甚至有可能完全删除jQuery并仅使用纯JavaScript。

Another example is Modernizr – which we already mentioned earlier. The way this library works is to perform a set of tests for supported features and mark the result as a class attached to the <html> element. With a little bit of research (mainly on CanIUse.com) we can disable the tests designed to isolate features not supported in older Internet Explorer versions. If your page is making use only of mainstream features, with broad browser support, you might not need to load Modernizr at all.

另一个例子是Modernizr ，我们之前已经提到过。 该库的工作方式是对支持的功能执行一组测试，并将结果标记为附加到<html>元素的类。 通过一些研究(主要在CanIUse.com上 )，我们可以禁用旨在隔离旧版Internet Explorer不支持的功能的测试。 如果您的页面仅使用主流功能并具有广泛的浏览器支持，则可能根本不需要加载Modernizr。

The same approach is valid for any other polyfill script you might use. Check if the features it patches are supported in the modern browsers and get rid of it if it’s not needed anymore.

对于您可能使用的任何其他polyfill脚本，相同的方法也有效。 检查现代浏览器是否支持它修补的功能，如果不再需要它，请将其删除。

删除专有CSS值 (Remove Proprietary CSS Values)

Once upon a time, Internet Explorer was the only browser capable of doing amazing effects in the page, due to a proprietary piece of technology called ActiveX Filters. Developers were able to do static effects (e.g. opacity), create gradient backgrounds, rotate and transform elements or do transition effects when loading a new page. While CSS3 offered standard alternatives to most these effects, ActiveX filters remained for a long time the only option available for Internet Explorer. It is not uncommon to still encounter these declarations, especially in hand-coded stylesheets. Therefore, be on the lookout for statements like the ones below, you do not need these anymore:

很久以前，由于专有的ActiveX Filters技术，Internet Explorer是唯一能够在页面中产生惊人效果的浏览器 。 开发人员能够在加载新页面时执行静态效果(例如，不透明度)，创建渐变背景，旋转和变换元素或执行过渡效果。 CSS3提供了大多数这些效果的标准替代方法，但ActiveX滤镜在很长一段时间内仍然是Internet Explorer唯一可用的选项。 仍然遇到这些声明的情况并不少见，尤其是在手工编码的样式表中。 因此，请注意下面的语句，您不再需要这些语句：

.foo {
  /* Internet Explorer 4.0 syntax */
  filter:filtername(sProperties);

  /* Internet Explorer 5.5 syntax */
  filter: progid:DXImageTransform.Microsoft.filtername(sProperties)";

  /* Internet Explorer 8 syntax */
  -ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'";
}

If your process of writing CSS includes the use of an auto-prefixer, then you need not worry about this topic. A good plugin will stay up to date to the level of support present in the modern browsers.

如果编写CSS的过程包括使用自动前缀，则不必担心此主题。 一个好的插件将保持最新的浏览器支持水平。

摆脱过时的元标记 (Get Rid of Obsolete Meta Tags)

Internet Explorer 8 introduced a new software mechanism, called “Compatibility View”, designed to alter the rendering mode in such a way that older websites will still render properly. This was achieved with the help of a X-UA-Compatible declaration, either as a <meta /> element or through the HTTP headers. At one point this approach was even recommended inside the Google Web Toolkit. Today, now that only Internet Explorer 11 and Microsoft Edge are supported, these tags became obsolete. We can see here an example of what you have to look for:

Internet Explorer 8引入了一种称为“兼容性视图”的新软件机制，该机制旨在以使旧网站仍可以正确呈现的方式更改呈现模式。 这是通过X-UA-Compatible声明(作为<meta />元素或通过HTTP标头)实现的。 有一次甚至在Google Web Toolkit中建议使用这种方法。 今天，现在仅支持Internet Explorer 11和Microsoft Edge，这些标记已过时。 我们可以在这里看到您要寻找的示例：

<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

清理您的自定义Web字体 (Clean Up Your Custom Web Fonts)

For a long time web designers were limited in their font choice. People put together numerous “web safe” font lists from the system fonts available on various operating systems (e.g. CSS Font Stack). With the introduction of the @font-face rule, everyone is now able to load custom fonts, either directly or from services like Google Web Fonts and TypeKit. Let’s not forget the plethora of icon fonts that gathered great popularity. Chris Coyier has a comprehensive entry on using @font-face in case you need to refresh your memory.

长期以来，网页设计师的字体选择受到限制。 人们从各种操作系统上可用的系统字体(例如CSS Font Stack )中收集了许多“网络安全”字体列表。 通过引入@font-face规则，每个人现在都可以直接或从诸如Google Web Fonts和TypeKit之类的服务中加载自定义字体。 让我们不要忘记聚集了极大人气的过多图标字体。 克里斯·科耶尔(Chris Coyier)对于使用@ font-face进行了全面介绍，以防您需要刷新内存。

With the end of support for Internet Explorer 9 we can now safely ditch the .eot (and even .ttf) font files, together with their related CSS entries. This is especially useful if you need to manage an icon font, as the update process is greatly simplified (although more and more people recommend using SVG icons instead of an icon font).

随着对Internet Explorer 9的支持期满，我们现在可以安全地放弃.eot (甚至.ttf )字体文件及其相关CSS条目。 如果需要管理图标字体，此功能特别有用，因为大大简化了更新过程(尽管越来越多的人建议使用SVG图标代替图标字体)。

简化跨浏览器测试流程 (Simplify Your Cross-Browser Testing Process)

Cross-browser testing and debugging has always been a tedious process, especially when Internet Explorer compatibility was required. Over the time various solutions were found: from applications like IETester or Multiple IE. Some people used virtual machines but the main problem was that you still needed a valid OS license for each instance. Then the guys at Microsoft stepped in and offered “time-bombed” virtual machines with specific combinations of Windows and Internet Explorer. All one had to do was to choose their favorite virtualization system from the available list (currently containing Virtual Box, VMWare, Vagrant and HyperV), download the desired virtual machine image, fire it up and start working.

跨浏览器测试和调试一直是一个繁琐的过程，尤其是在需要Internet Explorer兼容性的情况下。 随着时间的流逝，发现了各种解决方案：从IETester或Multiple IE之类的应用程序获得 。 有人使用虚拟机，但主要问题是每个实例仍需要有效的OS许可证。 然后，Microsoft的人员介入并提供了Windows和Internet Explorer特定组合的 “定时炸弹” 虚拟机 。 所有要做的就是从可用列表(当前包含Virtual Box ， VMWare ， Vagrant和HyperV )中选择他们喜欢的虚拟化系统，下载所需的虚拟机映像，启动它并开始工作。

All these options are still available today, if you feel nostalgic and want to explain to the new kids how you had to debug your code on Internet Explorer 6 without Web Developer tools. There should be no more reason though to make them part of the normal development process.

如果您怀旧并想向新手解释，如何在没有Web Developer工具的情况下在Internet Explorer 6上调试代码，今天所有这些选项仍然可用。 尽管没有其他理由使它们成为正常开发过程的一部分。

结论 (Conclusion)

Debugging code for legacy Internet Explorer versions used to be a complicated (and sometimes frustrating) process. We memorized the most common browser bugs and their counters. Position is Everything and Quirks Mode used to be at the top of our bookmark list. Fortunately, as the web continues its evolution, we are able to leave those days behind us and discard the obsolete tools and practices. Now it’s the time for a thorough house cleaning.

旧版Internet Explorer版本的调试代码过去是一个复杂(有时令人沮丧)的过程。 我们记住了最常见的浏览器错误及其计数器。 位置是一切 ， 古怪模式曾经是我们书签列表的顶部。 幸运的是，随着网络的不断发展，我们能够抛弃那些日子，抛弃过时的工具和实践。 现在该进行彻底的房屋清洁了。

翻译自: https://www.sitepoint.com/cleaning-house-after-internet-explorer/