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

翻译：疯狂的技术宅

原文：css-tricks.com/edge-goes-c…

在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 被禁用或加载失败时也能工做。

# 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也支持这些方法。🎉

# 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 给 web 带来了 Photoshop 风格的图像处理。

# CSS prefers-reduced-motion 媒体查询

随着网络上的动画变得愈来愈广泛，咱们要意识到到动画可能会致使某些用户出现头晕、恶心和头痛的症状。我不由以为不使人感到不适应该是网站的默认设置，由于并不是全部用户都会知道这个设置存在。

# CSS 的 caret-color 属性

这是一个至关简单的功能，能够安全、轻松地用做渐进加强功能。它容许你在文本框输入字符时设置闪烁光标的样式。

# 8位十六进制颜色表示法

在代码库中保持一致性很重要。这包括固定使用 RGB、十六进制或 HSL 颜色格式中的某一个。若是你的首选格式是十六进制，将会遇到问题，由于当你须要定义透明度时，就要切换到 rgba()。 Hex 如今能够包含 alpha（透明度）值。例如，ffffff80 至关于rgba(255,255,255，.5)。可是它不是最直观的颜色格式，而且也没有比 rgba() 更多的优点。

# 固有尺寸

这是我最渴望的一个功能。固有尺寸根据元素的内容肯定大小，并在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 属性

与 writing-mode属性一块儿使用，text-orientation 能够指定文本的方向，很是值得期待。

# CSS ：placeholder-shown 的伪元素

placeholder-shown 甚至能够在 Internet Explorer 中使用，但不知何故从未在 Edge 中实现。用户体验研究代表，一般应该避免使用占位符文本。可是若是你用了占位符文本，能够很方便的根据用户是否在 input 中输入文本而有条件地应用样式。

# CSS 的 place-content 属性

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

# CSS 的 will-change 属性

will-change 属性可用于性能优化，提早通知浏览器元素 will change。 Pre-Chromium Edge实际上很是擅长处理动画，而不须要这个属性，但如今它将具备彻底的跨浏览器支持。

# CSS 的 all 属性

all 是一次设置全部 CSS 属性的简写。

例如，设置 button { all: unset; } 至关于：

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}
复制代码

不幸的是，revert 关键字仍然只在 Safari 中实现了，这在某种程度上限制了以从 all 属性中得到的好处。

# CSS 形状和剪辑路径

传统上的 web 是以矩形为中心的。毕竟它有一个盒子模型。虽然咱们再也不须要浮动进行布局，但咱们能够创造性地用它们来围绕图像和形状对文本 shape-outside 属性进行包装。这能够和 clip-path 属性结合使用，该属性能够在形状内显示图像。

Clippy 是一个在线的clip-path编辑器

# CSS ：focus-within 伪类

若是要对表单的某个输入控件在处于焦点时应用特殊样式，那么:focus-within 是你的最佳选择。

# CSS 内容关键字

若是你正在使用 CSS 网格，这几乎是必不可少的。尽管开发者的投出了多达 3,920 张的选票，Edge 仍是将其标记为“未计划”。

对于 flexbox 和 grid，只有 direct children 分别成为 flex 项或 grid 项。任何嵌套更深的东西都不能用 flex 或 grid-positioning 放置。用规范中的话来讲，当 display:contents 应用于父元素时，“该元素必须被看做它已经在元素树中被其内容替换，“容许它们用网格或 flexbox 布局。Chris 文章中更全面的解释值得一读。

不幸的是，仍然有某些错误和其余影响可访问性的浏览器实现。

# 对将来更多的承诺

咱们只研究了 Edge 迁移到 Chromium 时全部现代浏览器都支持的功能。也就是说，传统 Edge 的死亡也让不少其余功能愈来愈近了。 Edge 是惟一一个迟迟不愿支持 Web 动画 API 的浏览器，而且对 Houdini 规范彻底没有兴趣。

来源: ishoudinireadyyet.com

# 对浏览器测试的影响

在 BrowserStack 进行中测试（左）和 iPhone 上的各类浏览器（右）

固然，对于 Web 开发人员来讲，另外一个巨大的优点是测试会减小。在跨浏览器测试期间 Edge 大多都会被忽视，所以 Edge 用户更有可能得到破碎的体验。这是微软决定转向 Chromium 的主要缘由。若是你的网站在Chromium 浏览器中没有错误，那么在其它浏览器中可能工做的都很好。 用Edge团队的话来讲，Chromium 将为咱们的客户提供“更好的Web兼容性，并为全部 Web 开发减小 Web 碎片化”。各类各样的设备和浏览器使浏览器测试成为使前端开发人员的最不愉快的任务之一。 Edge 如今可供 macOS 用户使用，这对于咱们在 Mac 上工做的人来讲很是有用。对 BrowserStack 的需求将会略微减小。

# 咱们会失去什么？

据我所知，SVG颜色字体将再也不适用于 Edge 浏览器。其余颜色字体格式（COLR，SBIX，CBDT/CBLC）将继续有效。

# 其它浏览器会怎样？

不能否认，Edge 并非最后一个低标准浏览器。 Internet Explorer 始终不支持本文提到的全部功能。若是你在俄罗斯有用户，则须要支持 Yandex。若是你在非洲有用户，则须要支持 Opera Mini。若是你在中国有用户，那么UC 和 QQ 将会是重要的测试对象。若是你不须要考虑这些区域性因素，那么如今就是放弃对 Internet Explorer 的支持并拥抱现代 Web 功能的最佳时机。不少 PC 用户彻底不习惯使用 Internet Explorer。但愿改进后的 Edge 可以吸引他们。 Microsoft 官方博客中标题为“把 Internet Explorer 做为默认浏览器的危险” 的文章得出结论：“Internet Explorer 是一种兼容性解决方案......大多数开发人员如今都没有在 Internet Explorer 上进行测试。”对于其它用户来讲，大多数 web 看起来愈来愈支离破碎。该让它死掉了。

# Google 是自大狂？

Web 开发人员的工做将变得更加轻松，但对微软公告的回应并不是是积极的。例如，Mozilla 有一个极其悲观的回应，指责微软“正式放弃独立的互联网共享pingtai”。该声明称谷歌“几乎彻底控制了咱们在线生活的基础设施”，而且“垄断了对独特资产的控制”。它的结论是“将基本的基础在线设施的控制权交给一家公司是很是糟糕的。”

许多人已经回想到了 IE6 的时代，这是浏览器最后一次得到如此巨大的市场份额。赢得浏览器大战的 Internet Explorer 让人陷入了停滞状态。相比之下，Chrome 不断推出新功能。 Google 积极参与 W3C 和 WHATWG 的 web 标准化组织。能够说，它在这些机构中具备超大的影响力，并具备决定 web 将来形态的能力。Google 开发人员确实倾向于炒做仅在 Chrome 中发布的功能。

# 来自竞争者的合做

Edge 而不是新的 IE 能够帮助 web 创新。虽然它在许多领域是落后的，但它确实引领了 CSS 网格、CSS Exclusions、CSS Regions 和新的HTML导入规范。与以往彻底不一样，如今微软已成为全球最大的开源项目支持者之一。这意味着全部主流浏览器如今都是开源的。微软已声明他们打算成为Chromium的重要贡献者 —— 事实上，他们已经累计提交了超过300次合并。这将对 Edge 用户有很大帮助，同时也将使 Chrome、Opera、Brave和其余基于 Chromium 的浏览器用户受益。

欢迎关注公众号：前端先锋，获取更多前端干货。