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

2019-04-18 admin

翻译:疯狂的技术宅 原文:https://css-tricks.com/edge-g…


本文首发微信公众号:前端先锋 欢迎关注,每天都给你推送新鲜的前端技术文章


在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 年以来,人们一直在投票要求实现它,现在我们终于得到了。

clipboard.png

HTML 的 details 和 summary 元素

<details><summary> 元素是 HTML5 的一部分,自2011年起就在 Chrome 中得到了支持。这些元素在一起使用,可以生成一个显示和隐藏内容的简单小部件。虽然用 JavaScript 实现类似的东西很简单的,但是 <details><summary> 元素即使在 JavaScript 被禁用或加载失败时也能工作。

https://codepen.io/cssgrid/em…

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

TextEncoderTextDecoder编码规范的一部分。在使用时,它们非常有用。

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 媒体查询

随着网络上的动画变得越来越普遍,我们要意识到到动画可能会导致某些用户出现头晕、恶心和头痛的症状。我不禁觉得不令人感到不适应该是网站的_默认设置_,因为并非所有用户都会知道这个设置存在。

clipboard.png

CSS 的 caret-color 属性

这是一个相当简单的功能,可以安全、轻松地用作渐进增强功能。它允许你在文本框输入字符时设置闪烁光标的样式。

8位十六进制颜色表示法

在代码库中保持一致性很重要。这包括固定使用 RGB、十六进制或 HSL 颜色格式中的某一个。如果你的首选格式是十六进制,将会遇到问题,因为当你需要定义透明度时,就要切换到 rgba()。 Hex 现在可以包含 alpha(透明度)值。例如,ffffff80 相当于rgba(255,255,255,.5)。但是它不是最直观的颜色格式,并且也没有比 rgba() 更多的优势。

固有尺寸

这是我最渴望的一个功能。固有尺寸根据元素的内容确定大小,并在CSS中引入三个新关键字:min-contentmax-contentfit-content()。这些关键字可用于大多数通常使用长度的地方,如 height, width, min-width, max-width, min-height, max-height, grid-template-rows, grid-template-columnsflex-basis

CSS 的 text-orientation 属性

writing-mode属性一起使用,text-orientation 可以指定文本的方向,非常值得期待。

https://codepen.io/cssgrid/em…

CSS :placeholder-shown 的伪元素

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

CSS 的 place-content 属性

place-content 是设置 align-contentjustify-content 的简写。

https://codepen.io/cssgrid/em…

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 属性结合使用,该属性可以在形状内显示图像。

clipboard.png

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

CSS :focus-within 伪类

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

CSS 内容关键字

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

clipboard.png

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

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

对未来更多的承诺

我们只研究了 Edge 迁移到 Chromium 时所有现代浏览器都支持的功能。也就是说,传统 Edge 的死亡也让很多其他功能越来越近了。 Edge 是唯一一个迟迟不肯支持 Web 动画 API 的浏览器,并且对 Houdini 规范完全没有兴趣。

clipboard.png

来源: https://ishoudinireadyyet.com

对浏览器测试的影响

clipboard.png

在 BrowserStack 进行中测试(左)和 iPhone 上的各种浏览器(右)

当然,对于 Web 开发人员来说,另一个巨大的优势是测试会减少。在跨浏览器测试期间 Edge 大多都会被忽视,因此 Edge 用户更有可能获得破碎的体验。这是微软决定转向 Chromium 的主要原因。如果你的网站在Chromium 浏览器中没有错误,那么在其它浏览器中可能工作的都很好。 用Edge团队的话来说,Chromium 将为我们的客户提供“更好的Web兼容性,并为所有 Web 开发减少 Web 碎片化”。各种各样的设备和浏览器使浏览器测试成为使前端开发人员的最不愉快的任务之一。 Edge 现在可供 macOS 用户使用,这对于我们在 Mac 上工作的人来说非常有用。对 BrowserStack 的需求将会略微减少。

我们会失去什么?

据我所知,SVG颜色字体将不再适用于 Edge 浏览器。其他颜色字体格式(COLR,SBIX,CBDT/CBLC)将继续有效。

clipboard.png

其它浏览器会怎样?

不可否认,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 有一个极其悲观的回应,指责微软“正式放弃独立的互联网共享平台”。该声明称谷歌“几乎完全控制了我们在线生活的基础设施”,并且“垄断了对独特资产的控制”。它的结论是“将基本的基础在线设施的控制权交给一家公司是非常糟糕的。”

clipboard.png

许多人已经回想到了 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 的浏览器用户受益。


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章


欢迎继续阅读本专栏其它高赞文章:

[转载]原文链接:https://segmentfault.com/a/1190000018911431

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-62138.html

文章标题:Edge 拥抱 Chromium 对前端工程师来说意味着什么?

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
JavaScript对象反射
JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。 在JavaScript中没有完...
2015-11-12
JavaScript是什么
JavaScript 是世界上最流行的编程语言。 这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript,一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置...
2015-11-16
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
回到顶部