Web 样式演变日益受到“Interop”的推动,这是一个涉及 Google、Apple、Microsoft 和 Mozilla 等主要浏览器厂商的协作项目。Interop 的目标是确保新 Web 技术获得通用的浏览器支持。这一协作的一个成功案例是 CSS Subgrid,它在加入 Interop 路线图后的一年内,就在现代浏览器中获得了近 100% 的支持。随着行业为 Interop 2027 做准备,开发者们开始看到下一代 CSS 能力的预览。

一张显示 2023 年全年中 CSS Subgrid 浏览器支持快速增长的折线图。
CSS Subgrid 的快速采用展示了 Interop 项目在实现通用浏览器支持方面的成功。www.joshwcomeau.com

此图说明了浏览器厂商之间为了实现 CSS Subgrid 而进行的成功协作,该功能在一年内获得了近 100% 的支持。

其中最显著的转变之一是 CSS 函数的引入。与 JavaScript 类似,这些函数允许开发者定义自定义逻辑,例如在复杂的动画中将极坐标转换为笛卡尔坐标。另一个重大进展是形状能力的扩展,超越了标准的圆角。提议中的 `corner-shape` 属性引入了诸如“squircle”(使用超椭圆算法)、“bevel”(45 度对角角)以及“notch”或“scoop”切口等选项。与之前使用 `clip-path` 的方法不同,这些属性实际上修改了元素的 border-box,确保边框、轮廓和盒阴影能够正确遵循新的形状。

五个展示不同角形状形的方框,包括圆角、squircle、bevel、notch 和 scoop。
提议的 corner-shape 属性引入了多样化的几何选项,如 squircles 和倒角。www.joshwcomeau.com

提议的 corner-shape 属性引入了诸如 'squircle'、'bevel' 以及 'notch' 或 'scoop' 切口等选项。

一张带有 squircle 风格角和圆形切口的绿色卡片,卡片底部勾勒出一枚金币的轮廓。
将新的 corner-shape 属性应用于具有复杂切口 UI 元素的实际示例。www.joshwcomeau.com

与之前使用 clip-path 的方法不同,这些属性实际上修改了元素的 border-box,确保边框、轮廓和盒阴影能够正确遵循新的形状。

进一步的改进针对布局和可访问性。“Level 2”锚点定位 API 将包含新的容器查询,用于检测目标元素(如工具提示)是否已翻转到备选位置,从而允许更精确的 UI 调整。此外,提议中的 `reading-flow` 属性旨在将复杂网格或 flexbox 布局中元素的制表顺序与它们的视觉顺序对齐,这对依赖辅助技术的用户来说是一个重大胜利。虽然像 `inherit()` 函数这样的某些功能仍处于早期提案阶段,但这些发展标志着 CSS 环境正朝着更具程序化和几何灵活性方向迈进。