Google IO 2022——关于CSS的讨论
这篇文章是在谷歌2022上发表的演讲的文本形式。在这里,我们不会深入解释每个函数,而是简要总结每个函数,提供广度而不是深度。
Google IO 2022——关于CSS的讨论
1.Compat201。
2021年的目标是由开发人员通过调查获得的反馈推动,旨在稳定当前功能,改进测试套件,提高浏览器在五大功能中的通过分数:
sticky定位。
aspect-ratio尺寸。
Flex布局。
grid布局。
transform定位和动画。
综合提高测试分数,显示出较高的稳定性和可靠性。
2.Interop22。
今年,浏览器共同讨论了他们计划开发的功能和优先事项。他们计划为开发人员提供以下web功能:
layer。
色彩空间和方法。
容器查询
表单兼容性
滚动
子网格subgrid。
排版
视口单位
Web兼容
2022年的新功能。
毫无疑问,css2022的状态受到interop202工作的极大影响。
1.级联层(@layer)
浏览器支持:
在@layer之前,加载样式表的顺序非常重要,因为最终加载的样式将涵盖之前加载的样式。这样,开发人员需要在加载更重要的样式之前加载不太重要的样式。
在@layer之后,可以提前定义入口文件的图层及其顺序。然后,当样式加载、加载完成或定义时,可以将其放置在一个层中,允许保留样式覆盖的重要性,但不需要仔细管理加载顺序。
上图显示了级联层如何允许更自由、更开放的书写和加载过程。同时,根据需要维护层叠。
哪些图层有助于Chromedevools的视觉化:
2.子网格(subgrid)
浏览器支持:
在subgrid之前,另一个网格中的网格不能与其父单元格或网格线对齐。每个网格布局都是独一无二的。许多设计师在他们的整个设计中放置一个网格,并不断对齐项目,这在CSS中是不可能的。
在subgrid之后,网格的子网格可以将其父网格的列或行作为自己的列或行,并将其本身或子网格与它们对齐!
在下面的demo中,body元素创建了一个经典的三列网格,中间列为main,左边和右边的列称为fullbleed。然后,body中的每个元素,通过设置grid-template-columns:subgrid,在body中使用body中的命名行。