谷歌浏览器兼容模式怎么设置(谷歌浏览器切换兼容模式)

浏览器制造商苹果、谷歌、微软和Mozilla,以及软件公司Bocoup和Igalia正在合作开发一个名为Interop 2022的Web兼容性规范,使Web技术

浏览器制造商苹果、谷歌、微软和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样式都可以有比框架层更高的优先级(忽略选择器)。

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

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

在早期,srgb颜色范围空用于Web开发,通常采用十六进制、rgb()、rgba()或hsl()格式。但是随着显示技术的发展,sRBG已经不够用了,所以Interop 2022包括了对三种扩展颜色空 (LAB,LCH,P3)的支持测试,以及通过函数在CSS中编写颜色的两种方法:color-mix和color-contrast:

Color-mix():取两种颜色,以指定的颜色空返回按指定量混合的结果。

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

Containment(CSS contain 属性)

contain属性用于标识和测量特定容器的大小,然后根据容器的大小应用不同的样式。这有点像media query @media,但它不是测量窗口大小,而是测量保存内容的盒子的大小。

Dialog Element(对话框元素)

这个对话框元素可以创建一个覆盖窗口,即一个对话框。例如::background虚拟元素可以设置模式框下的背景样式。你可以在这个博客中了解对话框元素。

Form Fixes(表单修复)

关于窗体的一些可操作性,包括外观属性,禁用窗体控件< form & gt输入元素的事件和错误处理、表单提交和表单验证等。

Scrolling (滚动控件)

这篇文章是关于页面滚动的兼容性。滚动捕捉提供了控制界面滚动方式和内容显示方式的工具。CSS中的scroll-behavior属性设置导航或CSSOM scroll API触发滚动时滚动框的行为。over scroll-behaviour CSS属性确定当浏览器到达滚动区域的边界时它将做什么。

Subgrid(子网格)

Subgrid可以很容易地将grid容器的后代元素放在这个网格上,在跨复杂布局排列项目时不需要考虑DOM结构。

例如,以下三个卡片组件的页眉和页脚都是对齐的,即使每个卡片都有独立的网格。这是因为每张卡片都是一个横跨父网格的三行项目,然后使用子网格Subgrid将这些行继承到每张卡片中。

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

而排版编码包括一系列影响网页排版的测试,包括字体-变体-备选、字体-变体-位置、IC单位和CJK(中日韩)文本编码。字体功能是优化排版的强大属性,但前提是跨浏览器兼容。

Viewport Units(视窗单位)

新的窗口单元考虑了包括标题栏在内的布局,并引入了最大、最小和动态窗口单元。例如,100svh指的是100%的最小可能窗口高度,100lvh指的是100%的最大可能窗口高度,100dvh指的是100%的动态窗口高度——这个值会随着用户的滚动而改变。

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

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

Web Compat(Web 兼容)

浏览器中的特定错误可能会导致某些网站无法按预期进行渲染,或者某个浏览器可能与web标准不同,从而导致网站或Web应用程序的用户体验。Interop 2022旨在通过Web兼容性测量来捕捉和解决这些问题。

除了从Compat 2021继承的5个规范和标准之外,还有10个新的Web兼容性规范:

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

这部分规范已经很常用了,这里就不介绍了。

从根本上说,Interop 2022是一个不断发展的指标,用来评估各大浏览器对上述Web标准的兼容性。Interop 2022 dashboard有一个评分系统来评估主要浏览器的整体兼容性:

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

这个小工具一年到头都在不断更新,它还会实时显示各大浏览器的工程师在修复错误、实现新功能和改进测试方面的进展,以及每个标准中的项目进展:

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

bug修复的进度,新功能和改进测试的实现,以及每个标准中项目的进度;

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

作者:美站资讯,如若转载,请注明出处:https://www.meizw.com/n/168567.html

发表回复

登录后才能评论