史上首次!苹果/谷歌/微软/火狐合力解决 Web 兼容性问题


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

这是有史以来第一次,所有市场上主要的浏览器供应商和利益相关者齐心协力地解决浏览器兼容性问题。此前,互相为竞争关系的浏览器厂商常常在 Web 技术的兼容性上出现分歧,尤其是 IE 还活着的时候,前端一个页面三套代码的情况十分常见。

过去几年,随着监管机构在竞争问题上向苹果和谷歌施压,这些顶级浏览器制造商之间才开始频繁合作,而不是专注于搞自家浏览器的专属功能。2019 年谷歌和微软合作发起过一个名为 的 Web 兼容性标准,该标准促进了 和 这两个技术的发展,Mozilla 参与了该计划的讨论,但苹果和其 WebKit 团队并未参与此计划 。

新的 Interop 2022 规范整体偏向于 15 个领域,其中 10 个领域是综合去年 调查和 得出的结论,大多数前端开发人员认为这些领域在跨浏览器存在兼容性问题会特别难处理:

Cascade Layers(级联层)

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

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

早期,Web 开发使用 sRGB 颜色空间,通常以十六进制、rgb()、rgba()或hsl() 格式表达色彩。但随着显示技术的发展,sRBG 不够用了,因此 Interop 2022 包括对三种扩展颜色空间(LAB、LCH、P3)的支持测试,以及两种通过函数在 CSS 中编写颜色的方法: 和 :

color-mix(): 取两种颜色,并返回在指定颜色空间中按指定量混合它们的结果。

color-contrast():从颜色列表中选择与指定单色具有最高对比度的颜色。

 Containment(CSS contain 属性)

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

Dialog Element(对话框元素)

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

Form Fixes(表单修复)

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

Scrolling (滚动控件)

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

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 标准的兼容程度。 有一个评分系统,评估各大浏览器的整体兼容程度:

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

题外话

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

 


相關推薦

2022-02-21

那里,有 96 个漏洞 (26%) 被报告给微软,85 个 (23%) 报告给苹果,60 个 (16%) 报告给了谷歌。 Project Zero 为供应商提供了 90 天的标准期限以及 14 天的宽限时间来解决安全问题。研究发现,开源程序员平均只用 25 天就修复了 Linux

2023-06-28

1 的比分击败了世界围棋冠军李世石而声名大振,成为史上首个击败人类职业围棋选手、战胜围棋世界冠军的人工智能机器人。 《连线》杂志方面认为,语言模型的下一个大飞跃可能涉及它们在互联网和计算机上执行更多任务

2022-05-07

快就会在 Android 和 Chrome 中实现 FIDO 无密码功能支持”,苹果和微软也声称将为其Windows、iOS、Edge 等主流平台提供 FIDO 无密码登陆支持,该无密码功能预计将在明年提供。 实现该 FIDO 无密码登录功能后,用户在手机上登

2023-07-25

据外媒报道,苹果已在内部使用人工智能(AI)聊天机器人Apple GPT来帮助员工工作,该公司也可能考虑将其用于客户支持。 上周,外媒报道称,随着OpenAI旗下AI聊天机器人ChatGPT和谷歌旗下AI聊天机器人Bard的兴起,苹果也在开发

2023-02-15

和 Mozilla 都在开发不使用WebKit 引擎的 iOS 浏览器,而根据苹果当前的 App Store 政策,iOS 浏览器应用程序必须使用系统内置的 WebKit 引擎。因此,这些正在开发的 iOS 浏览器目前无法通过 iOS App Store 进行分发。 当下主流的浏览器开

2023-04-22

举涉及到谷歌大约 30 亿美元的收入。还有一份类似的与苹果的合同将于今年到期,涉及的收入高达 200 亿美元。 据称谷歌目前有 160 名员工全职参与研发「Magi」搜索引擎项目,新的搜索引擎将为用户提供比当前更加个性化的体

2023-05-04

ows 11 镜像。 ReFS 即 Resilient File System,于 Windows Server 2012 上首次公开发布。NTFS 则是 New Technology File System,由微软于 1992 年开发,它是 Win10/11 等系统,以及大容量存储设备的默认文件系统。与 NTFS 相比,ReFS 在数据可用性和可伸

2022-01-05

虽然该功能的状态页面显示 Web 开发者对此十分支持,但苹果、Mozilla 和 Brave 等开发商对此表示了担忧。这些公司反对的一个关键论点是,网站可以利用这个 API 来追踪用户隐私。 苹果在 GitHub 上发表了一份回应称: 从隐

2023-10-09

enied | www.bleepingcomputer.com used Cloudflare to restrict access】 5. 苹果谷歌漏洞披露不充分,使腾讯QQ等数百万应用面临潜在风险 安全研究员指出,苹果和谷歌近期披露的产品零日漏洞不完整,可能隐藏了一个上游开源库libwebp的漏洞,

2022-08-24

代码执行 (RCE)。 微软的一名研究人员在今年 4 月下旬向谷歌报告了该漏洞。谷歌将其分配为 CVE-2022-2587,CVSS 得分 9.8(程度归类为严重)并描述为越界写入,相关补丁已在 6 月发布。 ChromeOS 是一个使用 D-Bus 的操作系统。由于

2022-09-28

。 Mozilla 在报告中指出,包括谷歌、亚马逊、Facebook、苹果和微软在内的“巨头”构建了各自的「围墙花园」 (Walled Garden),他们通过各种方式引导用户使用各自平台的默认浏览器。这些行为包括限制发现独立应用、在操作系统

2023-06-17

行均表示,同样“对 AI 聊天机器人设置了护栏”。据称苹果也有限制员工使用外部聊天机器人,但该公司没有回应置评请求。 微软消费者首席营销官 Yusuf Mehdi 称,公司不希望员工使用公共聊天机器人进行工作是有道理的,“

2023-01-30

步成为全球科技界的热门概念,科技巨头如 Meta、谷歌、苹果、华为、腾讯、OPPO 等均已在积极布局相关产业,其中一个关键技术就是 3D 引擎,无论是智慧城市、构建虚拟空间、工业设计还是高度真实的沉浸式用户体验都离不开

2022-10-16

步成为全球科技界的热门概念,科技巨头如 Meta、谷歌、苹果、华为、腾讯、OPPO 等均已在积极布局相关产业,其中一个关键技术就是 3D 引擎,无论是智慧城市、构建虚拟空间、工业设计还是高度真实的沉浸式用户体验都离不开