Artwork by SitePoint/Natalia Balska
SitePoint / Natalia Balska的作品
Welcome to the second part of this small series dedicated to the beginning of the end of what the community calls oldIE (namely Internet Explorer up to and including version 10). The first part in our series listed the obsolete techniques and practices that can be discarded in order to simplify the front-end development process. It also sparked a very interesting discussion in the comments that makes me add the following disclaimer (which, in hindsight, should have been included in the first part as well):
欢迎来到这个小系列的第二部分，该系列的第二部分致力于社区所谓的oldIE (即直到Internet Explorer 10及更高版本)的终结。 我们系列的第一部分列出了可以简化简化前端开发过程的过时技术和实践。 它还在评论中引发了非常有趣的讨论，使我添加了以下免责声明(事后看来，该免责声明也应包括在第一部分中)：
The decision process regarding whether or not to drop support for oldIE is a totally different subject, that is not part of the topics covered by this series. If the specifics of your website or application force you to maintain support, you have my sympathy. If you can close that chapter for good, join the rest of us for the ride.
关于是否放弃对oldIE的支持的决策过程是一个完全不同的主题，这不是本系列文章所涵盖的主题的一部分。 如果您的网站或应用程序的详细信息迫使您保持支持，您将表示我的同情。 如果您可以永久关闭该章节，请加入我们其他人的行列。
That being said, today we will start exploring the long list of modern features that we are now free to use without restrictions. Many thanks go to the creators of CanIUse.com — without their wonderful tool, this article would have been a lot more difficult to document properly.
话虽如此，我们今天将开始探索一长串现代功能，这些功能现在我们可以不受限制地自由使用。 非常感谢CanIUse.com的创建者-如果没有出色的工具，那么正确记录此文章会困难得多。
We will split these features into four main groups:
我们将这些功能分为四个主要组：
Modern CSS properties and features; 现代CSS属性和功能； HTML5 features; HTML5功能； JavaScript features… JavaScript功能… … and anything else that doesn’t fit above. …以及上面不适合的其他任何内容。To keep things tidy we will discuss only those features that lacked proper support on oldIE but can be used safely on Internet Explorer 11 or Microsoft Edge. In this article, we will look at the first two of these feature groups. Let the show begin.
为了使内容整洁，我们将只讨论在oldIE上缺少适当支持但可以在Internet Explorer 11或Microsoft Edge上安全使用的那些功能。 在本文中，我们将研究这些功能组的前两个。 让演出开始。
The main source of complaint regarding oldIE was usually its poor support for modern CSS properties and features, due to the slow update cycle. It makes sense then to start our journey in this area.
关于oldIE的主要抱怨来源通常是由于更新周期较慢，它对现代CSS属性和功能的支持不佳。 然后有意义的是开始我们在这一领域的旅程。
Flexbox is the third major step in creating web layout, after tables and floats. Foundation 6 offers already a Flexbox-powered alternate grid and the future version 4 of Bootstrap will include the same feature. There are also many small grids based on Flexbox, a few of them already mentioned here on SitePoint, like sGrid.
在表格和浮动元素之后，Flexbox是创建Web布局的第三大步骤。 Foundation 6已经提供了由Flexbox驱动的备用网格 ，而Bootstrap的未来版本4将包含相同的功能 。 还有许多基于Flexbox的小网格，其中一些已经在SitePoint上提到过，例如sGrid 。
There are still issues and bugs (especially with the Internet Explorer 11 implementation), but they are well documented and people can find ways around them. Therefore, if you haven’t already, it’s time to start experimenting with Flexbox and use it in your projects. Here are a few resources to get you started:
仍然存在问题和错误 (尤其是Internet Explorer 11的实现)，但是它们有据可查，人们可以找到解决方法。 因此，如果您还没有这样做的话，是时候开始尝试Flexbox并在项目中使用它了。 以下是一些入门资源：
Migrating to Flexbox by Cutting the Mustard
切芥末酱迁移到Flexbox
A Primer on Using Flexbox with Compass
指南针与Flexbox结合使用入门
Flexbox Froggy – A game for learning CSS flexbox
Flexbox Froggy –一个学习CSS flexbox的游戏
CSS gradients allow you to create smooth visual transitions between two or more specified colors. With a bit of creativity, you can also generate patterns that can be repeated like any other background-image. There is no longer any need to chop images for page backgrounds, buttons or other UI elements. Just whip a gradient in place and you’re done. If you don’t know where to start learning about them, here are some helpful links:
CSS渐变允许您在两种或多种指定颜色之间创建平滑的视觉过渡。 借助一些创造力，您还可以生成可以像其他任何background-image一样重复的图案。 不再需要为页面背景，按钮或其他UI元素剪切图像。 只需在适当位置鞭打渐变，就可以完成。 如果您不知道从哪里开始学习它们，这里有一些有用的链接：
CSS Gradients: A Syntax Crash Course
CSS渐变：语法速成课程
Lea Verou’s Gradient Gallery
Lea Verou的渐变画廊
For a long time, the animation on the web happened with the use of either Flash or JavaScript. CSS3 brought us an alternative with the Animation Module. With Flash delegated to a back row seat, the main advantage CSS animations have over the JavaScript-powered animations is the fact that they are executed in a different thread, without blocking the rest of the scripts on the page. Not every property can be animated and some properties require a larger performance price than others. Modern browsers help some more, with built-in support for hardware acceleration. This means that, when properly tuned, CSS animations can be very smooth (at least 60 fps) and with minimum performance impact. This topic has been very popular recently on SitePoint, with many articles discussing the fine points of tuning CSS animations. Here are only a few examples:
长期以来，网络动画是使用Flash或JavaScript发生的。 CSS3为我们带来了动画模块的替代方案。 通过将Flash委派给后排座位，CSS动画优于JavaScript动画的主要优点是它们在不同的线程中执行，而不会阻塞页面上的其余脚本。 并非每个属性都可以制作动画，并且某些属性需要比其他属性更高的性能价格 。 内置的硬件加速支持，现代浏览器可以提供更多帮助。 这意味着，如果正确调整CSS动画，可以使其非常流畅(至少60 fps)，并且对性能的影响最小。 这个主题最近在SitePoint上非常流行，许多文章讨论了调整CSS动画的优点。 这里只是几个例子：
An Introduction to Hardware Acceleration with CSS Animations
CSS动画的硬件加速简介
Animation Advice from a CSS Master
CSS大师的动画建议
Syncing CSS Animations with HTML5 Audio
将CSS动画与HTML5音频同步
Transforms and transitions are the main building blocks of CSS animations. With proper care and attention to detail, we can do things that a while ago required Flash. While this is not the only modern animation technique available (with alternatives like SVG, Canvas and various JavaScript techniques coming to mind), it is one of the easiest to learn, use and maintain. Fellow SitePoint authors have written plenty articles on these topics, making it easy for everyone to start learning these useful techniques:
转换和过渡是CSS动画的主要构建块。 通过适当的注意和对细节的关注，我们可以做一些之前需要Flash的事情。 尽管这不是唯一可用的现代动画技术(可以想到诸如SVG，Canvas和各种JavaScript技术之类的替代方法)，但它是最容易学习，使用和维护的技术之一。 SitePoint的资深作者就这些主题写了很多文章，使每个人都可以轻松地开始学习这些有用的技术：
Craig Buckler’s series on CSS3 Transitions
Craig BucklerCSS3过渡系列
A Primer on CSS3 Transforms
CSS3转换入门
The Definitive Guide to CSS Transitions
权威CSS过渡指南
The common way to alter the look of borders is to use the options available for the border-style property. In the times of oldIE, the only way to add fancy decorative elements (like custom borders) was to use complex markup constructs and sliced images. Today we can use another technique based on the border-image property without further restrictions. This technique allows you to take an image, cut it in virtual slices and use those slices to compose the border. Not much different from the old technique, but without the messy markup and using only one image.
更改边框外观的常用方法是使用border-style属性可用的选项。 在oldIE时代，添加精美装饰元素(如自定义边框)的唯一方法是使用复杂的标记构造和切片图像。 今天，我们可以使用基于border-image属性的另一种技术，而无需进一步限制。 此技术使您可以拍摄图像，将其切成虚拟切片，然后使用这些切片来合成边框。 与旧技术没有太大区别，但是没有凌乱的标记并且仅使用一个图像。
Here are some articles that will teach you all you need to know about border-image:
以下是一些文章，将教您有关border-image所有知识：
Decorating the Web with CSS Border Images
用CSS Border Images装饰网络
CSS3 Border-Image
CSS3边框图片
CSS3 Border Images for Beautiful, Flexible Boxes
CSS3边框图片，美观，灵活的盒子
Despite the overwhelming popularity of the Web, printed magazines still have their own glamour – and a good reason for that is the carefully crafted layout, often split in multiple columns. The digital medium tried for a long time to mimic the options of the printed world. Today, we are collecting the first fruits of this effort, as we can now make use of the option to arrange the content in multiple columns. And if you don’t know where to start, here are some pointers:
尽管网络势不可挡，但印刷杂志仍然具有自己的魅力-这样做的一个很好的原因是精心设计的版面，通常分成多列。 数字媒体长期以来一直在模仿印刷世界的选择。 今天，我们正在收集这项工作的最初成果，因为我们现在可以利用该选项将内容排列在多列中。 如果您不知道从哪里开始，这里有一些提示：
CSS3 Columns and Paged Reflowable Content
CSS3列和页面可重排内容
Guide to Responsive-Friendly CSS Columns (CSS Tricks)
响应式CSS列指南(CSS技巧)
Using CSS multi-column layouts (MDN)
使用CSS多列布局(MDN)
CSS units are a large family, even though most developers are mostly familiar with pixels and (perhaps) ems. With big bad oldIE sent to retirement, we can get now more of their siblings out to play, especially rem and viewport units. Let’s have a look at what these units are and what we can do with them.
CSS单元是一个庞大的家族，尽管大多数开发人员大多数都熟悉像素和(也许)em。 随着糟糕的oldIE退役，我们现在可以让他们更多的兄弟姐妹玩耍，尤其是rem和viewport单元。 让我们看一下这些单元是什么以及我们可以使用它们做什么。
A Look at Length Units in CSS
看看CSS中的长度单位
Understanding and Using rem Units in CSS
了解和使用CSS中的rem单位
For a long time, JavaScript was the main way to add interactivity to elements other than links and buttons. Things have changed with the wider adoption of pointer events. Although their origin lies with SVG, pointer events allow developers to specify if/when a graphical element can respond to mouse events. This can have interesting applications, like this Mars telescope to view the London Olympics. The guys at Microsoft also look at pointer events as a way to unify interaction, whether it’s done using touch, mouse, stylus or graphic pen. Let’s see what else we can do with them:
长期以来，JavaScript是向链接和按钮以外的元素添加交互性的主要方法。 随着指针事件的广泛采用，情况发生了变化。 尽管它们的起源在于SVG，但指针事件使开发人员可以指定图形元素是否/何时可以响应鼠标事件。 这可能会有有趣的应用程序，例如用这种火星望远镜观看伦敦奥运会 。 微软的家伙们也将指针事件视为统一交互的一种方式，无论它是使用触摸，鼠标，手写笔还是图形笔完成的。 让我们看看我们还能对他们做什么：
CSS3 Gems: The pointer-events Property
CSS3 Gems：指针事件属性
How Pointer Events Will Make Cross-Browser Touch Support Easy
指针事件如何使跨浏览器触摸支持变得容易
Unifying Touch and Mouse with Pointer Events
通过指针事件统一触摸和鼠标
For all the advancements that happened on the Web, for all the new fonts and techniques to manipulate images, we still return to a graphics editor whenever any fancier effect is required. Color blending, text effects, masking and other similar requirements still get us running to the designer, asking for an image with the desired result.
对于Web上发生的所有进步，对于操纵图像的所有新字体和新技术，只要需要任何更奇特的效果，我们仍将返回图形编辑器。 色彩混合，文本效果，遮罩和其他类似要求仍然使我们奔向设计人员，要求获得具有理想结果的图像。
Well, now you can give the poor guy (or lass) a well-deserved break. All the modern browsers support a feature called svg-filters that allow you to recreate most of the effects that previously required an image editor. While you don’t quite get Photoshop in a web page, things are not that far away either. Don’t believe me? Have a look at this demo hosted on GitHub: FILDROP – SVG Filters. Pretty neat, right?
好吧，现在您可以给这个可怜的人(或少女)一个当之无愧的休息时间。 所有现代浏览器都支持一种称为svg-filters的功能，使您可以重新创建以前需要图像编辑器的大多数效果。 尽管您不太可能在网页上使用Photoshop，但事情也不是那么遥远。 不相信我吗 看一下托管在GitHub上的此演示： FILDROP – SVG Filters 。 很整洁吧？
Now, before you rush to fire up your code editor, take a small break first to brush up on the theory. Find out why SVG filters are awesome, learn the right way for applying SVG effects to HTML content or check out advanced techniques from the mistress of SVG herself, Sara Soueidan.
现在，在急着启动代码编辑器之前，先休息一下，以熟悉一下理论。 找出SVG滤镜为何很棒 ，学习将SVG效果应用于HTML内容的正确方法，或从SVG自己的情妇Sara Soueidan中了解先进的技术。
HTML5 brought more than a new set of tags and attributes — it enabled native browser support for some actions that previously required the use of JavaScript or other scripting methods. Let’s have a look at the new set of shiny things we can now play with.
HTML5带来了不只是一组新的标记和属性-它使本机浏览器支持以前需要使用JavaScript或其他脚本方法的某些操作。 让我们看一下我们现在可以使用的新的闪亮事物。
This attribute does exactly what the name says — it puts the focus inside an input. Think about how you can type directly as you arrive on the Google search page (note — they are using a different solution). If you do want to integrate a fallback using JavaScript, be sure to use the DOM ready event instead of window.load. It is not a good idea to have the page jump to the input location (and maybe even bring up the onscreen keyboard) when the user already started interacting with the content.
该属性完全按照名称所说的进行操作-将焦点放在输入中。 想一想当您到达Google搜索页面时如何直接键入(请注意-他们正在使用其他解决方案)。 如果确实要使用JavaScript集成后备，请确保使用DOM ready事件而不是window.load 。 当用户已经开始与内容进行交互时，让页面跳至输入位置(甚至可能弹出屏幕键盘)不是一个好主意。
For more info you can check the following resources:
有关更多信息，您可以检查以下资源：
6 Nifty, Time-Saving HTML Attributes
6种精美，省时HTML属性
HTML5 and Even Fancier Forms
HTML5甚至更高级的形式
Input Attr : Autofocus (HTML5Tutorial.info)
输入属性：自动对焦(HTML5Tutorial.info)
Manipulating classes on a DOM element is not a new idea. As proof of the popularity (and usefulness), jQuery has great support for these actions, at the cost of carrying the entire library along. Native support for DOMTokenList allows you to do the same operations faster and more efficiently. While support in IE11 is not 100% complete, this shouldn’t stop you exploring the possibilities offered by this functionality.
在DOM元素上操作类并不是一个新主意。 作为流行度(和实用性)的证明，jQuery为这些操作提供了强大的支持，但以携带整个库为代价。 对DOMTokenList的本机支持使您可以更快，更有效地执行相同的操作。 尽管IE11中的支持还不是100％完整，但是这不应阻止您探索此功能提供的可能性。
To get a better understanding of the details of DOMTokenList, you can consult the following resources:
为了更好地理解DOMTokenList的详细信息，您可以查阅以下资源：
Exploring the classList API
探索classList API
The classList API (HTML5Doctor)
classList API(HTML5Doctor)
Element.classList (MDN)
Element.classList(MDN)
Storing data inside the markup is not a new idea. Developers have been doing this for a while, initially with custom class names, later with data-* attributes. jQuery has been very helpful in this direction, with their .data() functionality. In our context though, you can go around jQuery completely and use the native support to handle the data-* attributes directly.
在标记内部存储数据并不是一个新主意。 开发人员已经进行了一段时间，最初使用自定义类名称，后来使用data-*属性。 jQuery通过其.data()功能在此方向上非常有用。 但是，在我们的上下文中，您可以完全使用jQuery，并使用本机支持直接处理data-*属性。
If you need a refresh on the native support for dataset and data-* attributes, you can get started with the following resoruces:
如果需要刷新对dataset和data-*属性的本机支持，则可以开始使用以下资源：
Managing Custom Data with the HTML5 Dataset API
使用HTML5数据集API管理自定义数据
How to Use HTML5 Data Attributes
如何使用HTML5数据属性
Using data attributes (MDN)
使用数据属性(MDN)
Form validation has always caused headaches for web developers everywhere. How many times have you searched the Internet for the perfect regular expression to validate emails? Fortunately, the HTML5 Constraint API can make this task easier with minimum JavaScript involved, with the help of the email, telephone or URL input types. Here are a few examples on how to do it:
表单验证始终使世界各地的Web开发人员感到头疼。 您在互联网上搜索过多少次正则表达式来验证电子邮件？ 幸运的是，借助email ， telephone或URL输入类型，HTML5约束API可以以最少JavaScript简化此任务。 以下是一些有关如何执行此操作的示例：
Using the HTML5 Constraint API for Form Validation
使用HTML5 Constraint API进行表单验证
HTML5 Form Validation
HTML5表单验证
Data form validation (MDN)
数据表单验证(MDN)
HTML5 brought a set of new helpful attributes meant to provide native support for some techniques that usually are integrated using JavaScript. Most of them extend the functionality of input fields, enhancing the usability and the validation process. While none of them are a real surprise (having existed already for a while), now it’s the first time they have such a broad support, that makes them easy to use without deploying polyfills. If you need a refresh on the HTML5 client-side validation, check this article – Client-Side Form Validation with HTML5. Otherwise, let’s have a look at what’s on the list:
HTML5带来了一组新的有用属性，旨在为通常使用JavaScript集成的某些技术提供本机支持。 它们中的大多数扩展了输入字段的功能，从而增强了可用性和验证过程。 尽管它们都不是真正的惊喜(已经存在了一段时间)，但是现在这是它们首次获得如此广泛的支持，这使得它们易于使用而无需部署polyfills。 如果您需要刷新HTML5客户端验证，请查看本文– HTML5客户端表单验证 。 否则，让我们看一下列表中的内容：
“Hidden” attribute – This is actually an offshoot of CSS, as it behaves exactly as display: none. It can even be overridden with CSS using the display property and it can be applied to any HTML element. As a solution, it is more semantically correct and should more efficiently aid screen readers.
“隐藏”属性 –实际上是CSS的一个分支，因为它的行为与display: none完全相同display: none 。 甚至可以使用display属性使用CSS覆盖它，并且可以将其应用于任何HTML元素。 作为解决方案，它在语义上更正确，应该更有效地帮助屏幕阅读器。
“Pattern” attribute – The automatic validation for some fields can’t be standardized though. Let’s consider the <input type="tel">. Phone formats are different from country to country so you can’t have a generic validation model. That’s where the pattern attribute kicks in. You can specify a regular expression as its value and the browser will use it to validate the user input. For a great collection of various patterns, you should check HTML5Pattern.
“样式”属性 -某些字段的自动验证虽然无法标准化。 让我们考虑<input type="tel"> 。 电话格式因国家/地区而异，因此您无法使用通用验证模型。 这就是pattern属性的所在。您可以将正则表达式指定为其值，浏览器将使用它来验证用户输入。 要收集各种模式，请检查HTML5Pattern 。
“Placeholder” attribute – The placeholder attribute specifies a short hint that describes the expected value of an input field. Some people even use them as a replacement for labels, but that opens a good deal of usability problems — once the fields are populated, the placeholder disappears. Cumulated with the lack of visible labels, this can cause a lot of confusion. While there is plenty of room for abuse, when wisely used, the placeholder can give many helpful hints to the user.
“占位符”属性 –占位符属性指定一个简短提示，用于描述输入字段的期望值。 有些人甚至用它们代替标签，但这带来了很多可用性问题-填充字段后，占位符就会消失。 加上缺少可见标签，这会引起很多混乱。 尽管存在大量的滥用空间，但如果明智地使用占位符，则占位符可以为用户提供许多有用的提示。
“Spellcheck” attribute – We are already used to seeing textareas doing a spellcheck correction on the text we write. What most developers don’t know is that you can control this function, turn it on or off and even enable it on normal text input fields. Why would you want do to that, you might ask? You might want to spellcheck the query of a search field or disable the function when the textarea is used for inputing code, for example. For more details, you can check the following article from Mozilla Developer Network — Controlling spell checking in HTML forms.
“拼写检查”属性 -我们已经习惯于看到文本区域对所写文本进行拼写检查纠正。 大多数开发人员不知道的是，您可以控制此功能，将其打开或关闭，甚至可以在常规文本输入字段上启用它。 您可能会问，为什么要这样做？ 例如，当文本区域用于输入代码时，您可能需要拼写检查搜索字段的查询或禁用该功能。 有关更多详细信息，您可以从Mozilla开发人员网络中查看以下文章- 控制HTML表单中的拼写检查 。
Semantic elements in HTML5 are tightly related to machine-processing of the web content, with two main fields that benefit the most — indexing and search engines on one hand, and assistive technologies on the other hand. Support is still not 100%, there are minor hiccups here and there and choosing the right element in each case can be daunting in the beginning. The debate is still going strong on the use cases and it’s up to each one of us to choose how much of these elements we deploy and where. HTML5Doctor.com has a great article on the topic of HTML5 semantics, with plenty of information and points outward to plenty relevant resources.
HTML5中的语义元素与Web内容的机器处理紧密相关，其中两个主要领域受益最大-一方面是索引和搜索引擎，另一方面是辅助技术。 支持仍然不是100％，这里到处都是小毛病，在每种情况下选择合适的元素在开始时就令人生畏。 关于用例的争论仍然很激烈，这取决于我们每个人来选择我们在其中部署多少元素以及在何处部署。 HTML5Doctor.com上有一篇有关HTML5语义的精彩文章 ，提供了大量信息，并指向大量相关资源。
Back in 1999, Internet Explorer 5 introduced a new feature, called the favicon — a tiny image that sits next to the website URL in the address bar, in the bookmark list and, more recently, in the tab where the website is loaded. The old .ico format still has a degree of versatility (it can encapsulate multiple image formats at 16×16, 32×32 and 48×48 pixels), but it has become obsolete in the age of high-density screens. Fear not though, as now you can use PNG images as favicons. Just keep an eye at the peculiarities of each browser, as they are detailed in this great CSS-Tricks article on favicons.
早在1999年，Internet Explorer 5引入了一项新功能，称为favicon ，这是一个微型图像，它位于地址栏中网站网址的旁边，书签列表中，以及最近在加载网站的选项卡中。 旧的.ico格式仍然具有一定程度的通用性(它可以封装16×16、32×32和48×48像素的多种图像格式)，但是在高密度屏幕时代已经过时了。 不必担心，因为现在您可以将PNG图像用作收藏夹图标。 只需关注每个浏览器的特性，这在有关favicons的出色CSS-Tricks文章中已进行了详细介绍。
The progress bar has been a constant on the computer screen from the birth of the first graphical operating system. There are various implementations on the web too. Today, we can use a native control for the progress bar, as long as we pay attention to the specifics of each browser integration. Fortunately, we have already great guides and resources, such as the ones below:
从第一个图形操作系统诞生以来，进度条就一直是计算机屏幕上的常量。 网络上也有各种实现。 今天，只要注意每个浏览器集成的细节，我们就可以对进度条使用本机控件。 幸运的是，我们已经有了不错的指南和资源，例如以下指南：
The HTML5 progress Element (CSS-Tricks)
HTML5进度元素(CSS技巧)
The <progress> element (MDN)
<progress>元素(MDN)
Like the progress element we mentioned above, sliders have been another constant on computer screens everywhere for decades. It didn’t take long to land on web pages either, with the help of various JavaScript solutions. Finally, you can now create a slide control natively with a single HTML tag. There are multiple situations when this element is the most intuitive solution. Find out how and when to use it:
就像我们上面提到的进度元素一样，数十年来，滑块一直是计算机屏幕上的另一个常量。 在各种JavaScript解决方案的帮助下，登陆网页也不需要很长时间。 最后，您现在可以使用单个HTML标签在本地创建幻灯片控件。 在许多情况下，此元素是最直观的解决方案。 了解如何以及何时使用它：
Input Type : Range (HTML5Tutorial.info)
输入类型：范围(HTML5Tutorial.info)
How To Style HTML5 Range Slider Across Multiple Browsers (Hongkiat.com)
如何跨多个浏览器设置HTML5范围滑块的样式(Hongkiat.com)
Playing With The HTML5 range Slider Input (The New Code)
使用HTML5范围滑块输入(新代码)
Iframes have become increasingly common in recent years, even though the end user barely perceives them. Social media plugins, banners and other adverts – all of them end opening up iframes to display their intended content. With so many doors open into your page, the chance for a malicious script to make a successful attack on your website increases as well.
近年来，即使最终用户几乎不了解iframe，iframe也变得越来越普遍。 社交媒体插件，横幅广告和其他广告–它们都结束了开放iframe来显示其预期内容的功能。 打开页面的大门如此之多，恶意脚本对您的网站进行成功攻击的机会也会增加。
Here is where the sandbox mode for iframes comes into play. It instructs the browser to cut down on the privileges (like running JavaScript or triggering popups). Both Microsoft and Chromium teams have documented this feature for your convenience:
这是iframe的沙盒模式发挥作用的地方。 它指示浏览器减少特权(例如运行JavaScript或触发弹出窗口)。 为方便起见，Microsoft和Chromium团队都记录了此功能：
How to Safeguard your Site with HTML5 Sandbox (MSDN)
如何使用HTML5沙盒(MSDN)保护您的网站
Security in Depth: HTML5’s @sandbox (Chromium Blog)
深度安全性：HTML5的@sandbox(Chrome博客)
“Old school” website behaviour is that as you load new pages, the URLs change and get stored into the browser history. With this, you can go back and forth through your history when you want to have another look at a page you just moved away from. The rise of “Single Page Apps” brought a great challenge — everything happens in the same page, via AJAX calls, yet we still need distinct URLs for various states of the application. This is solved with the latest updates to the history management, namely the popstate event, the history.pushState and history.replaceState methods. You can check the following resources for an in-depth analysis of the feature:
“老派”网站的行为是，当您加载新页面时，URL会更改并存储到浏览器历史记录中。 这样，当您想再次查看刚刚离开的页面时，就可以在历史记录中来回浏览。 “单页应用程序”的兴起带来了巨大的挑战-一切都通过AJAX调用在同一页面中发生，但是我们仍然需要用于应用程序各种状态的不同URL。 这可以通过历史记录管理的最新更新来解决，即popstate事件， history.pushState和history.replaceState方法。 您可以检查以下资源，以对该功能进行深入分析：
Saner HTML5 History Management (AdequatelyGood.com)
Saner HTML5历史记录管理(AdequatelyGood.com)
Manipulating the browser history (MDN)
处理浏览器历史记录(MDN)
That was quite a list and I’m still saving about the same amount for another article. None of the features outlined in this article are new. Most have been available, in one way or another, for a few years. What has changed is the native support accross the mainstream browsers, together with the reduction in market share for the oldIE. The most important consequence is that, most of the time, we no longer need countless polyfill solutions. So take a look at the analytics of your website and, if possible, drop the polyfill training wheels and make use of the full capabilities of modern browsers. Your clients will be grateful for the improved performance and experience.
那是一个相当大的清单，我仍然为另一篇文章节省大约相同的金额。 本文概述的功能都不是新增功能。 大多数已经以某种方式可用了几年。 发生了变化的是主流浏览器的本机支持以及oldIE的市场份额减少。 最重要的结果是，在大多数情况下，我们不再需要无数的灌装解决方案。 因此，请看一下您网站的分析，并在可能的情况下放弃polyfill训练轮，并利用现代浏览器的全部功能。 您的客户将对改进的性能和体验表示感谢。
翻译自: https://www.sitepoint.com/front-end-development-internet-explorer/
相关资源：jdk-8u281-windows-x64.exe