Google IO 2022——CSS 状态

2022年的新功能

毫不疑问，CSS 2022 的状态受到 Interop 2022 工作的巨大影响。

1. 级联层（@layer）

浏览器支持：

在 ​​@layer​​ 之前，加载样式表的顺序非常重要，因为最后加载的样式会覆盖之前加载的样式。这样开发人员就需要先加载不太重要的样式，然后再加载更重要的样式。

在​​@layer​​之后，入口文件可以预先定义图层及其顺序。 然后，当样式加载、加载完成或已经定义时，它们可以放置在一个层中，允许保留样式覆盖的重要性，但无需精心管理加载顺序。

上图展示了级联层如何允许更自由、更开放地编写和加载过程。同时仍然根据需要维护层叠。

Chrome DevTools 有助于可视化哪些样式来自哪些图层：

相关资源：

CSS Cascade 5 specification：​​layers explainer：​​layers on MDN：​​Layers：​​CSS Cascade Layers：​​子网格（subgrid）

浏览器支持：

在​​subgrid​​之前，另一个网格中的网格无法与其父单元格或网格线对齐。每个网格布局都是独一无二的。许多设计师在他们的整个设计上放置一个网格，并不断地在其中对齐项目，这在CSS中是做不到的。

在​​subgrid​​之后，网格的子网格可以将其父网格的列或行作为自己的列或行，并将其自身或子网格与它们对齐！

在下面的demo中，​​body​​​元素创建了一个经典的三列网格，中间列为​​main​​​，左边和右边的列称为​​fullbleed​​​。然后，​​body​​​ 中的每个元素，​​