利好前端开发!Chrome/Edge/Firefox/Safari 决定合力解决 Web 兼容性问题 !

更新日期: 2022-03-21阅读: 1.7k标签: 浏览器

浏览器制造商 Apple、Google、Microsoft 和 Mozilla ,以及软件公司 Bocoup 和 Igalia 正在合力制定一项名为 Interop 2022 的 Web 兼容性规范,以使 Web 技术代码在不同的设备和浏览器中有统一的渲染效果(利好前端开发)。

这是有史以来第一次,所有市场上主要的浏览器供应商和利益相关者齐心协力地解决浏览器兼容性问题。此前,互相为竞争关系的浏览器厂商常常在 Web 技术的兼容性上出现分歧,尤其是 IE 还活着的时候,前端一个页面三套代码的情况十分常见。
过去几年,随着监管机构在竞争问题上向苹果和谷歌施压,这些顶级浏览器制造商之间才开始频繁合作,而不是专注于搞自家浏览器的专属功能。2019 年谷歌和微软合作发起过一个名为 Compat 2021 的 Web 兼容性标准,该标准促进了 css grid  和 CSS flexbox  这两个技术的发展,Mozilla 参与了该计划的讨论,但苹果和其 WebKit 团队并未参与此计划 。
新的 Interop 2022 规范整体偏向于 15 个领域,其中 10 个领域是综合去年 CSS 2021 现状调查和 GitHub 投票得出的结论,大多数前端开发人员认为这些领域在跨浏览器存在兼容性问题会特别难处理:

Cascade Layers(级联层)

有了这个标准,网站可以创建一个“框架”层和一个“自定义”层,然后将所有第三方框架的 CSS 样式分配到框架层,在自定义层中编写自定义样式,而且自定义层的所有 CSS 样式,优先级都可以比框架层要高(无视选择器)。


Color Spaces and Functions(色彩空间/函数

早期,Web 开发使用 sRGB 颜色空间,通常以十六进制、rgb()、rgba()或hsl() 格式表达色彩。但随着显示技术的发展,sRBG 不够用了,因此 Interop 2022 包括对三种扩展颜色空间(LAB、LCH、P3)的支持测试,以及两种通过函数在 CSS 中编写颜色的方法:color-mix 和 color-contrast:
color-mix(): 取两种颜色,并返回在指定颜色空间中按指定量混合它们的结果。
color-contrast():从颜色列表中选择与指定单色具有最高对比度的颜色。

 Containment(CSS contain 属性)

contain 属性用于识别和测量特定容器的大小,然后根据该容器的大小应用不同的样式。有点像媒体查询 @media,但不是测量视窗大小,而是测量容纳内容的盒子的大小。

Dialog Element(对话框元素)

该 Dialog元素可以创建覆盖型的窗口,也就是对话框,比如 ::backdrop 伪元素可以为一个模态框下方的背景设置样式。可在此博客了解对话框元素 。

Form Fixes(表单修复)

关于表单的一些操作性,包括 appearance 属性、、禁用表单控件<form>上的事件,以及输入元素、表单提交和表单验证的错误处理等。

Scrolling (滚动控件)

这条是关于页面滚动的兼容性,Scroll snap 提供了控制界面滚动方式和内容显示方式的工具。CSS 中的 scroll-behavior 属性设置当滚动由导航或 CSSOM 滚动 api 触发时,滚动框会出现什么行为。overscroll-behaviorCSS 属性决定了浏览器在到达滚动区域的边界时会做什么。

Subgrid(子网格)

Subgrid 可轻松将网格容器的后代元素放置在该网格上,在跨复杂布局排列项目时无需考虑 dom 结构。
比如下面三个卡片组件的页眉和页脚都对齐了,即使每张卡片都有独立的网格(grid),这是因为每张卡片都是跨越父网格的三行项目,然后使用子网格 Subgrid 将这些行继承到每个卡片中。


Typography and Encodings(字体设计和编码)

排版和编码包含一系列影响 Web 排版的测试,包括 font-variant-alternates, font-variant-position, ic 单元和 CJK(中日韩)文本编码。字体功能是优化排版的强大属性,但前提是跨浏览器兼容。

Viewport Units(视窗单位)

新的视窗单位考虑包含标题栏的布局,引入了最大、最小和动态视窗单位,比如  100svh 指  100% 最小可能视窗高度,100lvh 指 100% 最大可能视窗高度,100dvh 指 100% 动态视窗高度——该值将随着用户滚动而改变。


同理,svw、 lvw、 和 dvw 用于宽度单位。

Web Compat(Web  兼容)

浏览器中的特定错误可能不导致某些网站无法按预期渲染,或者一个浏览器可能与 Web 标准不同,从而导致网站或 Web 应用程序用户的体验,Interop 2022 旨在通过 Web 兼容性测量来捕获和解决这些问题。
以上是 10 个新的 Web 兼容性规范,此外还有 5 个从 Compat 2021 继承下来的规范标准:

Aspect Ratio(屏幕纵横比)
Flexbox(弹性盒模型)
Grid(网格)
Sticky Positioning(粘滞定位)
Transforms(变换盒模型)

这部分规范已经非常常用,在此不展开介绍 。
从根本上讲,Interop 2022 是一个不断发展的指标,用于评估各大浏览器对上述 Web 标准的兼容程度。Interop 2022 仪表板 有一个评分系统,评估各大浏览器的整体兼容程度:


这玩意全年不断更新,还会实时显示各大浏览器的工程师修复错误、实现新功能和改进测试的进展,以及在每个标准的工程进度:


题外话
而 Apple 网络开发布道者 Jen Simmons 在 Interop 2022 的博客中说:“Apple 非常关心 Web 的健康,以及 Web 标准的可互操作(兼容性)实现。”这似乎跟大多数前端人员的实际想法有些出入...

前端开发的春天要来了么?你觉得呢?

作者:罗奇奇
来源:OSC开源社区

链接: https://fly63.com/article/detial/11274

浏览器禁用了javascript,各种浏览器如何开启javascript的方法总汇

您的浏览器禁用了JS脚本运行,请启用该功能。怎么解除浏览器禁用js?这篇文章将总结整理各个浏览器如何开启、禁用javascript的方法总汇。

浏览器的回流与重绘 (Reflow & Repaint)

浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。

IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

IE6不支持min-height,解决办法使用css hack,ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:

css重设样式_清除浏览器的默认样式

由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。

浏览器访问一个网站所经历的步骤

浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染

一个新式的基于文本的浏览器 Browsh

Browsh是一个纯文本浏览器,可以运行在大多数的TTY终端环境和任何浏览器。目前,终端客户端比浏览器客户端更先进。终端客户端即时更新和交付,以便于体验新的功能,例如,你可以观看视频。

浏览器内核有哪些?主流浏览器的所使用的内核介绍

一般说的浏览器内核是指浏览器最重要的核心部分,RenderingEngine,翻译成中文大概意思就是“解释引擎”,我们一般称为浏览器内核。由于不同的内核各自有一套自己的渲染网页和解释页面代码的机制,所以就会有一些问题存在。

程序员眼中的浏览器是什么样的?IE:有本事你卸了我啊

主流浏览器之争从上个世纪开就开始,已经持续了很长的时间。人们都在笑话IE,纷纷转向其它浏览器。今天,我向大家分享一下针对IE的搞笑图片,只是逗乐而已,喝杯咖啡,坐下来慢慢享受吧。

精打细算浏览器空闲时间

有时候我们希望在浏览器中执行一些低优先级的任务,比如记录统计数据、做一些耗时的数据处理等,暂且将其称为后台任务。这些任务跟动画计算、合成帧、响应用户输入等高优先级的任务共享主线程

深入浏览器事件循环的本质

浏览器的事件循环,前端再熟悉不过了,每天都会接触的东西。但我以前一直都是死记硬背:事件任务队列分为macrotask和microtask,浏览器先从macrotask取出一个任务执行,再执行microtask内的所有任务,接着又去macrotask取出一个任务执行

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!