Edge 采用 Chromium 内核：这对前端开发者意味着什么？

2018 年 12 月，微软宣布 Edge 将采用 Chromium，这是一个为 Google Chrome 提供支持的开源项目。业内许多人对失去 浏览器多样性 感到悲伤。我个人则感到高兴。官方发布日期尚未公布，但将在今年某个时候发布。随着它的发布，大量的 HTML、JavaScript 和 CSS 功能将实现完全的跨浏览器支持。

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

📣 呼吁所有 Web 开发人员和爱好者！📣

下一版 #MicrosoftEdge 的首个预览版本已准备好供您使用 - 立即试用！ https://#/I531hfmD3G pic.twitter.com/Tvh6OGGouO

— Microsoft Edge 开发团队 (@MSEdgeDev) 2019年4月8日

不久前，我撰写了一篇名为 “Internet Explorer 的缓慢消亡与渐进增强未来的展望。” 的文章。我们中的一些人已经很幸运地放弃了该浏览器。但它并不是唯一阻碍我们前进的东西。Internet Explorer 是我们都讨厌的浏览器，而 Edge 则旨在成为其经过改进的替代品。不幸的是，Edge 本身也相当落后。EdgeHTML 是 Trident 的分支，Trident 是为 Internet Explorer 提供支持的引擎。微软对 Edge 的投入不足。苹果没有远离树木。Edge 的用户之声网站是一个不错的想法，允许开发人员投票选择他们希望实现的功能。不幸的是，正如 Dave Rupert 所说，在该网站上投票“就像往许愿井里扔硬币一样”。最受欢迎的功能多年来都未得到实现。

Chromium 之前的 Edge 不支持许多功能，但这些功能在其他现代浏览器中可用，一旦它们切换到 Chromium，我们就可以使用它们。其中许多功能无法使用 polyfill 或变通方案解决，因此此版本意义重大。

我们期待使用的功能

那么，这些功能究竟是什么呢？让我们在这里列出它们，并开始对我们将能够做到的所有新事物感到兴奋。

自定义元素和 Shadow DOM

自定义元素和 Shadow DOM 结合使用，允许开发人员定义自定义、可重用且封装的组件。许多人都在请求此功能。自 2014 年以来，人们一直在投票要求实施此功能，我们终于得到了它。

HTML details 和 summary 元素

<details> 和 <summary> 元素是 HTML5 的一部分，自 2011 年以来在 Chrome 中一直受到支持。这两个元素一起使用，可以生成 一个简单的显示和隐藏内容的小部件。虽然使用 JavaScript 实现类似的功能非常简单，但即使在禁用 JavaScript 或 JavaScript 加载失败的情况下，<details> 和 <summary> 元素也能正常工作。

查看 CodePen 上 CSS GRID (@cssgrid) 编写的示例
details/summary。
在 CodePen 上。

JavaScript 字体加载 API

这个对一些人来说意义重大。所有现代浏览器现在都支持 CSS 的 font-display 属性。但是，您可能仍然希望使用 JavaScript 加载字体。字体加载狂热者 Zach Leatherman 有一篇关于为什么您可能希望使用 JavaScript 加载字体（即使我们现在对 font-display 具有广泛支持）的 解释。放弃此 API 的 polyfill 非常重要，因为根据 Zach 的说法，此 JavaScript

[...] 通常内联在关键路径中。在支持原生 CSS 字体加载 API 的浏览器上，用于解析和执行 polyfill JavaScript 的时间基本上是浪费的。

在 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 11 中也受支持。🎉

JavaScript TextEncoder 和 TextDecoder

TextEncoder 和 TextDecoder 是 编码规范 的一部分。在使用 流 时，它们看起来很有用。

JavaScript 对象 rest 和对象 spread

这就像数组的 rest 和 spread 属性。

const obj1 = {
  a: 100,
  b: 2000
}

const obj2 = {
  c: 11000,
  d: 220
}

const combinedObj = {...obj1, ...obj2} 
// {a: 100, b: 2000, c: 11000, d: 220}

JavaScript 模块：动态导入

使用类似函数的语法，动态导入 允许您在用户需要时延迟加载 ES 模块。

button.addEventListener("click", function() {
  import("./myModule.js").then(module => module.default());
});

CSS background-blend-mode 属性

background-blend-mode 将 Photoshop 风格的图像处理 带到了 Web 上。

CSS prefers-reduced-motion 媒体查询

我忍不住觉得，不让人感到不适应该是网站的默认设置，特别是一些用户可能不知道此设置的存在。随着 Web 上动画变得越来越普遍，认识到动画会对某些用户造成头晕、恶心和头痛等问题非常重要。

CSS caret-color 属性

诚然，这是一个相当微不足道的特性，并且可以安全且轻松地用作渐进增强。它允许你为文本输入字段中的闪烁光标设置样式。

8 位十六进制颜色表示法

保持代码库的一致性是很好的。这包括坚持使用RGB、十六进制或 HSL 颜色格式。如果你的首选格式是十六进制，那么你之前会遇到一个问题，因为每当你需要定义透明度时，都需要切换到rgba()。现在十六进制可以包含 alpha（透明度）值。例如，#ffffff80 等效于 rgba(255, 255, 255, .5)。可以说，它不是最直观的颜色格式，与rgba()相比没有任何实际优势。

内在尺寸

我没有看到像其他一些新的 CSS 特性那样，内在尺寸有那么多的炒作或兴奋，但它是我个人最渴望的特性。内在尺寸根据元素的内容确定大小，并在 CSS 中引入了三个新的关键字：min-content、max-content 和 fit-content()。这些关键字可以在你通常使用长度的地方使用，例如 height、width、min-width、max-width、min-height、max-height、grid-template-rows、grid-template-columns 和 flex-basis。

CSS text-orientation 属性

text-orientation 属性与 writing-mode 属性结合使用，指定文本的方向，正如你所期望的那样。

查看 CodePen：
text-orientation: upright by CSS GRID (@cssgrid)
在 CodePen 上。

CSS :placeholder-shown 伪元素

placeholder-shown 甚至在 Internet Explorer 中可用，但不知何故从未进入 Edge……直到现在。用户体验研究表明，占位符文本通常应该避免。但是，如果你正在使用占位符文本，这是一种根据用户是否在input 中输入任何文本有条件地应用样式的便捷方法。

CSS place-content 属性

place-content 是设置align-content 和 justify-content 的简写。

查看 CodePen：
place-content by CSS GRID (@cssgrid)
在 CodePen 上。

CSS will-change 属性

will-change 属性可用作性能优化，提前告知浏览器某个元素将要发生变化。在 Chromium 之前的 Edge 实际上擅长处理动画的性能，而无需此属性，但现在它将获得完全的跨浏览器支持。

CSS all 属性

button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0; }

遗憾的是，revert 关键字除了 Safari 之外还没有在任何其他地方实现，这在一定程度上限制了我们从all 属性中获得的收益。

CSS 形状和剪辑路径

传统上，网页一直以矩形为中心。毕竟它有盒子模型。虽然我们不再需要浮动来进行布局，但我们可以创造性地使用它们，使用 shape-outside 属性将文本环绕图像和形状。这可以与 clip-path 属性结合使用，该属性可以将图像显示在形状内。

CSS :focus-within 伪类

如果你想在表单的任何一个输入获得焦点时，为整个表单应用特殊样式，那么 :focus-within 就是你的选择器。

CSS contents 关键字

如果你正在使用 CSS 网格，这几乎是必不可少的。尽管有 3920 票开发人员投票，Edge 仍然将其标记为“未计划”。

对于 Flexbox 和 Grid 来说，只有直接子元素分别成为 Flex 项目或 Grid 项目。嵌套更深的任何内容都不能使用 Flex 或 Grid 定位。用 规范 的话来说，当display: contents 应用于父元素时，“必须将元素视为已在其内容替换元素树中”，从而允许它们使用 Grid 或 Flexbox 进行布局。Chris 进行了 更详细的解释，值得一看。

不幸的是，其他浏览器实现中仍然存在一些 错误，会影响可访问性。

未来充满更多希望

我们只关注 Edge 转向 Chromium 后所有现代浏览器都将支持的特性。也就是说，旧版 Edge 的消亡也让许多其他特性感觉更接近现实。例如，Edge 是唯一一个对 Web 动画 API 拖延脚步的浏览器，并且对 Houdini 规范的任何部分都不感兴趣。

对浏览器测试的影响

当然，对于 Web 开发人员来说，另一个巨大的好处是减少了测试。在跨浏览器测试期间，许多人忽略了 Edge，因此 Edge 用户更有可能遇到糟糕的体验。这是微软决定转向 Chromium 的主要原因。如果您的网站在一个 Chromium 浏览器中没有错误，那么它在所有 Chromium 浏览器中可能都没问题。用 Edge 团队的话来说，Chromium 将为“我们的客户提供更好的 Web 兼容性，并为所有 Web 开发人员减少 Web 的碎片化”。各种各样的设备和浏览器使得浏览器测试成为我们作为前端开发人员需要负责的最不愉快的任务之一。Edge 现在将可供 macOS 用户使用，这对我们许多使用 Mac 工作的人来说是一个好消息。对 BrowserStack 的订阅现在将稍微不那么必要了。

我们损失了什么吗？

据我所知，唯一在除了 Chrome 之外所有地方都受支持的功能是SVG 彩色字体，它将不再在 Edge 浏览器中工作。其他彩色字体格式（COLR、SBIX、CBDT/CBLC）将继续工作。

呃，@GoogleChrome 您计划很快支持#OpenTypeSVG 吗？在 Safari（12+）、Firefox（26+）甚至 EdgeHTML（38+）Photoshop、Illustrator 中受支持，但在 Chrome 中不受支持。
/cc @colorfontswtf pic.twitter.com/tgwJ3AqHm2

— Chris Lilley (@svgeesus) 2019 年 2 月 15 日

其他浏览器怎么样？

诚然，Edge 不是最后一个表现不佳的浏览器。本文中提到的所有功能在 Internet Explorer 中都不受支持，而且永远不会受支持。如果您在非洲或印度有用户，则需要支持 Opera Mini。如果您在中国有用户，那么 UC 浏览器将是需要测试的对象。如果您没有这些区域考虑因素，那么现在是放弃对 Internet Explorer 的支持并拥抱现代 Web 提供的功能的最佳时机。许多 PC 用户出于习惯而一直坚持使用 Internet Explorer。希望改进后的 Edge 足以吸引他们离开。微软官方博客文章标题为“使用 Internet Explorer 作为默认浏览器的风险”得出的结论是，“Internet Explorer 是一种兼容性解决方案……开发人员大体上现在并没有针对 Internet Explorer 进行测试。”对于其剩余的用户，Web 的大部分内容看起来越来越破碎。是时候让它消亡了。

谷歌是狂妄自大的人吗？

Web 开发人员的生活即将变得更容易，但对微软公告的回应远非积极。Mozilla 就给出了一个尖锐悲观的回应，指责微软“正式放弃了互联网的独立共享平台”。该声明称谷歌“几乎完全控制着我们在线生活的基础设施”以及“对独特资产的垄断控制”。它总结道，“将基本在线基础设施的控制权让给一家公司是糟糕的。”

许多人回想起IE6的时代，这是浏览器最后一次获得如此压倒性的市场份额。Internet Explorer 赢得了浏览器大战后，便陷入了完全停滞的状态。相比之下，Chrome 不断推出新功能。谷歌积极参与 Web 标准机构 W3C 和 WHATWG。不过，可以说它在这些机构中拥有过大的影响力，并有权决定 Web 的未来发展方向。Google 开发者关系确实有夸大仅在 Chrome 中发布的功能的趋势。

从竞争到合作

Edge 可以帮助推动 Web 发展，而不是成为新的IE。虽然它在许多领域落后，但它确实为 CSS 网格、CSS 排除、CSS 区域和新的 HTML 导入规范带路。与以往的行为大相径庭，微软已成为全球最大的开源项目支持者之一。这意味着所有主要浏览器现在都是开源的。微软表示，他们打算成为Chromium 的重要贡献者——事实上，他们已经积累了 300 多个合并。这将有助于 Edge 用户，也将使 Chrome、Opera、Brave 和其他基于 Chromium 的浏览器的用户受益。