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
可以将照片的背景颜色通过指定颜色进行渲染的属性
-
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 的浏览器。
本文由 Shuaiyin 创作,采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Sep 24,2019