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

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 实现

    1555833800474

  • 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

    TextEncoderTextDecoderencoding 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-contentfit-content()

  • CSS text-orientation property

    text-orientation 指定字体的方向

  • CSS :placeholder-shown pseudo-element

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

    1555836652955

  • CSS place-content property

    place-contentalign-contentjustify-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 的浏览器。

最近的文章

flex-basis 与 width 的区别

flex-basis与width的区别概念flex-basis指定了flex元素在主轴方向上的初始大…

继续阅读
更早的文章

Git 配置多个 SSH Key

本机配置多个SSHkey我们会有很多种git的使用场景,比如github,公司代码,或者是其它代码托…

继续阅读