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中的命名行。