当你期望放弃 IE11 时会发生什么？

呼！

所以你决定放弃对 IE11 的支持，转而只支持常用浏览器（IE11 的全球用户比例约为 2%）。太棒了！🌲

考虑到这一点，这里列出了您今天（即​​ 2019 年中）应该安全使用的功能，无需polyfill 或功能检测。📃

当然，在我们开始之前，总会有老旧的浏览器。而且，公平地说，新兴市场的浏览器更加复杂：例如 UC、KaiOS（基于旧版 Firefox）和 Opera Mini。在这种情况下，我建议尽可能不要提供任何 JS，或者鼓励用户升级。🤷

出发啦！⬇️

DOM

• 根据分辨率选择图像 URL 📽️ （通过<img srcset>和<picture>）

• 框架可以从Blob

• 使用 禁用表单元素<fieldset disabled>，对于正在处理的表单很有用

• HTML 输入类型color 和各种日期/时间选项

• HTML 模板和<template>元素（这也是在 JS 中，但您可以在页面中指定它们）

• 元素<meter>（伴随<progress>）

JavaScript 语言

• ES 模块，通过<script type="module">和import/export 🎉

• 模板文字（带反引号）

• 类似课程class Foo { constructor() { ... } }

• 函数！箭头函数、剩余参数、async允许的函数await、可以yield

JavaScript 库

• Promise 并且fetch（不再需要XMLHttpRequest🚫）

  • ... XHR现在responseType也可以安全地设置为 "json"，但你为什么要这么做呢？🤷

• 方法Array：find，includes；以及String：includes，padStart和padEnd

• 该Proxy对象允许有趣的方法

• 方法Object：entries和values，用于迭代（如Object.keys）

• 对象URL（用于检查查询参数和处理 URL）

• 属性currentScript（“我是什么文件”）

• 你可以安全地调度一个，new CustomEvent('....')而不必处理奇怪的初始化程序

• Symbol和朋友们

JavaScript + DOM

• 更便捷的 HTML 方法

• 的第三个参数addEventListener，允许您设置{once: true}和其他选项

• IntersectionObserver，让你判断DOM 节点是否可见

• 即使页面关闭，也navigator.sendBeacon可以发送 POST 消息的方法

• 找到最接近的匹配元素closest

• 的第二个参数classList.toggle，允许您通过参数设置或删除类（也是.relList链接上的属性）

• 画布混合模式（这是.globalCompositeOperation属性）

• 确定 CSS 功能是否受支持CSS.supports（但这仅有助于未来的功能）

全新 API

• 服务人员🥳

• WebAssembly​

• 游戏手柄 API 🎮

• Web 音频 API 📣

• 指针锁 API：对 HTML 游戏和丰富的体验很有用🐁🔒

• 约束验证 API（改进的表单验证）📏

• WebRTC📽️​

• getUserMedia访问视频、音频流🙏

CSS

• 网格🎉

• CSS 变量，例如--foo: blue;，与color: var(--foo)

• 粘性位置

• CSS 过滤器，允许实现反转、阴影和色调变化等视觉效果

• 图像object-fit（Edge 仅在 上支持<img>），允许您使图像包含或覆盖其内容而不是拉伸

• 改进了指针或鼠标访问的 媒体查询有趣的事实：这是我在 Chrome 上编写的第一个演示之一。

• 新的CSS 光标“抓取”、“放大”、“缩小”

• 伪元素::placeholder，用于设置占位符文本的样式<input>

• 使用initial或unset 作为 CSS 值

• 单位，取宽度或高度vmax中较大者的百分比

• 遵循 JS 方法，CSS@supports 规则

• 只读和读写伪类选择器（:read-write似乎两者中更有用）

• 文本描边和填充

  • ...虽然所有常青树都支持，但您需要包含-webkit-前缀：是的，即使对于 Edge 和 Firefox

• IE11 中的危险错误不再是问题：

  • 您现在可以安全地放入calc(...) CSS 动画
  • CSSdisplay: flex存在各种问题

呼！

你做到了！恭喜！🎉

如果我遗漏了任何内容，或者这些功能中的任何一个都有很好的资源，请在下面告诉我。

17 👋