🎨 CSS 高级 attr() 函数：该功能扩展了现有的 attr() 函数，允许使用除 <string> 之外的类型，并在所有 CSS 属性中使用。例如，可以使用 data-* 属性的值，并通过 type() 函数将其解析为 <color> 等类型，从而实现更灵活的样式控制。如果解析失败，则可以使用回退值。

🔄 CSS 滚动状态容器查询：这项新功能允许开发者根据容器的滚动状态来设置其后代的样式。可以查询的状态包括 stuck（粘性定位）、snapped（滚动贴靠对齐）和 scrollable（是否可以滚动）。通过使用 @container 规则，可以实现根据滚动状态改变 UI 的效果，例如当导航栏粘附在顶部时改变其背景颜色。

📏 CSS text-box、text-box-trim 和 text-box-edge：这组属性提供了对文本垂直对齐方式的更精细控制。text-box-trim 属性用于指定文本框需要裁剪的边缘，text-box-edge 属性用于指定如何进行边缘裁剪。这些属性允许开发者使用字体度量来精确控制垂直间距，从而实现更美观的文本排版。

🚀 其他更新：除了上述主要更新外，Chrome 133 还包括 Animation.overallProgress，用于表示动画的进度；Node.prototype.moveBefore，用于在 DOM 树中移动元素；FileSystemObserver 接口，用于通知文件系统的更改；以及 PublicKeyCredential.getClientCapabilities() 方法，用于确定用户的客户端支持哪些 WebAuthn 功能。

原创 Google 2025-03-21 17:31 北京

Chrome 133 带来了多项更新，包括 CSS 高级 attr() 函数、CSS 滚动状态容器查询以及更精细的文本垂直对齐控制，提升了网页开发的灵活性和控制力。

CSS 高级 attr() 函数允许使用除 <string> 之外的类型，并可在所有 CSS 属性中使用。
CSS 滚动状态容器查询允许您根据容器的滚动状态，使用容器查询来设置容器后代的样式。
CSS text-box、text-box-trim 以及 text-box-edge 可用于更精细地控制文本的垂直对齐方式。
还有更多其他内容。

CSS 高级 attr() 函数

<div data-foo="blue">test</div>

div {  color: attr(data-foo type(<color>), red);}

CSS 滚动状态容器查询

stuck：粘性定位容器粘附在滚动框的某个边缘上。
snapped：滚动贴靠对齐的容器，目前处于水平或垂直贴靠状态。
scrollable：滚动容器是否可以按查询方向滚动。

.stuck-top {  container-type: scroll-state;  position: sticky;  top: 0px;
  > nav {    @container scroll-state(stuck: top) {      background: Highlight;      color: HighlightText;    }  }}

CSS text-box、text-box-trim 以及 text-box-edge

h1 {  /* trim both sides to the capital letters */  text-box: trim-both cap alphabetic;
  /* trim both sides to the lowercase letter x */  text-box: trim-both ex alphabetic;}

更多内容

Animation.overallProgress 为您提供一种便捷且一致的方式，用以表示动画在其迭代过程中的进度，且不受时间线类型的影响。

Node.prototype.moveBefore 允许您在 DOM 树中移动元素，而无需重置元素的状态。

FileSystemObserver 接口会向网站通知文件系统的更改。

PublicKeyCredential getClientCapabilities() 方法让您可以确定用户的客户端支持哪些 WebAuthn 功能。

持续关注

阅读原文

跳转微信打开