Edge 拥抱 Chromium 对前端工程师来说意味着什么？

翻译：疯狂的技术宅
原文：https://css-tricks.com/edge-g...

本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章

在2018年12月，微软宣布 Edge 将采用 Chromium 内核，这是一个为 Google Chrome 提供支持的开源项目。业内许多人对失去浏览器多样性而感到悲伤，然而我却非常高兴。官方正式的发布日期尚未公布，不过可能会在今年的某个时间公布。随着它的发布，一系列 HTML、JavaScript 和 CSS 功能将实现完全的跨浏览器支持。

现在 Windows 预览版已经可用 ，即将推出适用于 Mac 的版本。

不久前，我写了一篇题为“慢慢死亡的 Internet Explorer ”的文章。 一些人已经很幸运放弃了那个浏览器。但这并不是阻止我们回归的唯一因素。 Internet Explorer 是我们都讨厌的浏览器，Edge 本来就是很好的替代品。不幸的是，Edge 本身就是落后的。 EdgeHTML 是 Trident 的一个分支，这也是 Internet Explorer 的内核。同时微软对 Edge 方面的投资不足，导致了有其父必有其子。 Edge 的用户反馈网站倒是不错，允许开发人员投票选出他们想要实现的功能。但不幸的是，正如 Dave Rupert 吐槽的那样，在网站上投票“就像往许愿池中扔硬币一样。” 最需要的功能多年来一直没有实现。

Edge 目前有许多不支持的功能，但是这些功能在其他现代浏览器中是可用的，一旦他们进行了切换，马上就可以用了。而且它有很多不能被修补或解决的问题，所以这个版本是一个大麻烦。

值得期待的可用功能

那么这些功能究竟是什么呢？让我们在这里兴奋的做一个简述。

自定义元素和 Shadow DOM

自定义元素和 shadow DOM 允许开发人员能够得到自定义、可重用和可封装的组件。很多人都在要求这个功能。自 2014 年以来，人们一直在投票要求实现它，现在我们终于得到了。

HTML 的 details 和 summary 元素

<details> 和 <summary> 元素是 HTML5 的一部分，自2011年起就在 Chrome 中得到了支持。这些元素在一起使用，可以生成一个显示和隐藏内容的简单小部件。虽然用 JavaScript 实现类似的东西很简单的，但是 <details> 和 <summary> 元素即使在 JavaScript 被禁用或加载失败时也能工作。

https://codepen.io/cssgrid/em...

Javascript 的字体加载 API

对于某些人来说这有很大的意义。目前所有现代浏览器都支持 CSS font-display 属性。但是你可能仍然希望用 JavaScript 加载字体。 Zach Leatherman 解释了为什么你可能需要用 JavaScript加载字体 ，即使现在 font-display 已经得到了广泛支持。根据 Zach 的说法，这个 API 的抛弃 polyfill 非常重要，因为这个JavaScript是

[...]通常在关键路径中内联。浏览器解析和执行 JavaScript 所花费的时间实际上被浪费在了支持本机 CSS 字体加载 API 上了。“

在2018年的一篇文章中，Zach 感叹道：

[...]浏览器提供的 CSS 字体加载 API 有着相当广泛的支持并且已经存在了很长时间，但是所有人都对 Microsoft Edge 感到很遗憾。“

不会再这样了！

JavaScript 的 flat 和 flatMap

用代码片段来解释是最简单的方式，当一个数组嵌套在另一个数组中时，flat() 非常有用。

const things = ['thing1', 'thing2', ['thing3', ['thing4']]]
const flattenedThings = things.flat(2); // Returns ['thing1', 'thing2', 'thing3', 'thing4']

顾名思义，flatMap() 相当于同时使用 map() 和 flat() 方法。

Node.js 11也支持这些方法。