简单的了解下 css 在 2022 年有哪些新特性

2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面，合作目标是实现 14 个功能。

概述

本文是在 Google IO 2022上发表的演讲的文字形式。这里不会对每个功能进行深入的讲解，而是对每个功能进行简要概述，提供广度而不是深度。

下面是这些 CSS 功能的概览：

浏览器兼容性

将这么多 CSS 功能设置为合作发布的主要原因是来自 Interop 2022 的努力，下面就来看看 Interop 2022 和 Compat 2021 分别做出了哪些努力。

1. Compat 2021

2021 年的目标是由开发人员通过调查获得的反馈来推动的，旨在稳定当前功能、改进测试套件并提高浏览器在五个功能方面的通过分数：

1. sticky 定位
2. aspect-ratio 尺寸
3. flex 布局
4. grid 布局
5. transform 定位和动画

测试分数全面提高，显示出更高的稳定性和可靠性。

2. Interop 2022

今年，浏览器们齐心协力，讨论了他们打算开发的功能和优先事项。他们计划为开发者提供以下 web 功能：

1. 级联层@layer
2. 颜色空间和方法
3. 容器查询
5. 表单兼容性
6. 滚动
7. 子网格subgrid
8. 排版
9. 视口单位
10. Web 兼容

2022年的新功能

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

1. 级联层（@layer）

浏览器支持：

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

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

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

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

相关资源：

• CSS Cascade 5 specification： https://www.w3.org/TR/css-cascade-5/#layering
• Cascade layers explainer： https://css.oddbird.net/layers/explainer/
• Cascade layers on MDN： https://developer.mozilla.org/docs/Web/CSS/@layer
• Cascade Layers： https://developer.chrome.com/blog/cascade-layers/
• Hello, CSS Cascade Layers： https://www.bram.us/2022/02/13/hello-css-cascade-layers/

2. 子网格（subgrid）

浏览器支持：

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

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

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