Edge Goes Chromium: What Does it Mean for Front-End Developers?

原文地址

当 Edge 的内核变为了开源的 Chromium 时，对于开发者意味着什么？

在 2018 年 12 月，微软宣布 Edge 浏览器内核转变为 作为 Google Chrome 开源项目 Chromium，伴随着巨大的改动，肯定与大量的关于 HTML, JavaScript 和 CSS 功能将会得到支持。

Edge 的最新预览版已经可以下载，但仅限于 Windows，Mac 版本不久会来。

下载地址

在很久以前，微软会让开发者投票需要在浏览器更新的功能，但最后因为投入和其它关系不了了之，就像硬币投向了许愿井。最需要的功能多年未实现。

我们期待使用的功能

那么这些新功能是什么呢？让我们列出来这些我们期望的新事物。

• Custom Elements and Shadow DOM

  允许开发者定义可重复使用和封装的组件

• HTML details and summary elements

  <details> 和 <summary> 标签可以折叠内容，点击后显示内容的功能，无需通过 JavaScript 实现

  

• Javascript Font Loading API

  加载字体的 JavaScript API. 所有现代浏览器都支持 font-display 属性来加载字体，但无论如何还是建议通过 JavaScript 加载字体，这篇文章解释了为什么

• JavaScript flat and flatMap

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

  顾名思义，flatMap() 等同于 map() 方法和 flat() 方法

• JavaScript TextEncoder and TextDecoder

  TextEncoder 和 TextDecoder 是 encoding spec 的一部分。当工作于 streams 时，他们是很有用的

• JavaScript Object rest and object 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 modules: dynamic import

  当需要 module 时，可以通过懒加载当方法导入

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

• CSS background-blend-mode property

  可以将照片的背景颜色通过指定颜色进行渲染的属性

  background-blend-mode

  https://www.sarasoueidan.com/demos/css-blender/

• CSS prefers-reduced-motion media query

  通过设置减少 web 页面的动画效果，现在越来越多的动画效果反而使用户感到恶心，默认的效果应该是最好的

• CSS caret-color property

  允许你在文本输入字段时设置闪烁光标的样式

• 8-digit hex color notation

  统一使用 8 位 16 进制的颜色表示法。

• Intrinsic sizing

  内在大小确定基于元素内容的大小，并在 CSS 中引入三个新关键字：min-content, max-content 和 fit-content()

• CSS text-orientation property

  text-orientation 指定字体的方向

• CSS :placeholder-shown pseudo-element

  通过伪元素区分 input 输入和输入前的样式

  

• CSS place-content property

  place-content 是 align-content 和 justify-content 的简写

• CSS will-change property

  will-change 属性可以提前通知浏览器做出性能优化

• CSS all property

  all 作为所有属性的一次设置

  例如 button {all: unset:} 相当于：

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

• CSS Shapes and Clip Path

  传统意义上，网站是矩形的，因为它包含盒子模型。不再使用 float 浮动，创造性地使用 shape-outside 属性将特定形状围绕在文字周周。还可以结合 shape-outside属性展示一个指定形状的图片。

• CSS :focus-within pseudo-class

  通过 :focus-within 属性可以指定输入时的表单的样式

• CSS contents keyword

  content 关键字

测试浏览器更少了

由于 Edge 转向了 Chromium，兼容性就会有很大的提高，当在 Chromium 上测试没问题的网站，在大多数网站也是可以的。

我们失去了什么呢？

据我所知，除了 Chrome 其它浏览器都支持 SVG color fonts ，它也不在 Edge 上支持

从竞争到合作

Edge 不是新的 IE，Edge 促进了 web 的发展。虽然它有些地方确实落后，但它确实引领了 CSS grid, css exclusions, css 领域 和 HTML 导入方式的改变。微软已经成为开源社区最大的贡献者，事实上，微软已经向 Chromium 项目合并了 300 次的 merge。这也帮助了 Edge 使用者，也利于了 Chrome 使用者或指其它基于 Chromium 的浏览器。