以下是您需要知晓的相关信息:
- CSS 高级
attr()
函数允许使用<string>
以外的类型,并可在所有 CSS 属性中使用。 - 借助 CSS 滚动状态容器查询,您可以使用容器查询根据容器的滚动状态设置容器的后代样式。
- CSS
text-box
、text-box-trim
和text-box-edge
可让您更精细地控制文本的垂直对齐方式 - 还有许多其他功能。
CSS 高级 attr()
函数
此功能在现有的 attr()
函数中添加了 CSS 级别 5 中指定的功能。这样,除了 <string>
之外,其他类型也可以在所有 CSS 属性中使用(除了对伪元素内容的现有支持之外)。
在以下示例中,div
的 color
属性的值使用 data-color
属性中的值。此属性值会使用 attr()
和 type()
解析为 <color>
。回退值设置为 red
。
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
如需了解详情,请参阅 CSS attr()
已升级。
CSS 滚动状态容器查询
使用容器查询根据容器的滚动状态设置容器的后代样式。
查询容器是滚动容器,或者是受滚动容器滚动位置影响的元素。您可以查询以下状态:
stuck
:固定定位的容器会粘附在滚动条的某个边缘。snapped
:滚动贴靠对齐的容器目前处于水平或垂直贴靠状态。scrollable
:滚动容器是否可以在查询的方向滚动。
新增了容器类型 scroll-state
,可用于查询容器。例如:
.stuck-top {
container-type: scroll-state;
position: sticky;
top: 0px;
> nav {
@container scroll-state(stuck: top) {
background: Highlight;
color: HighlightText;
}
}
}
如需了解详情并查看一些演示,请参阅 CSS 滚动状态查询。
CSS text-box
、text-box-trim
和 text-box-edge
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;
}
了解如何在 CSS text-box-trim
中使用这些新属性。
等等!
当然,还有许多其他功能。
Animation.overallProgress
可让您以便捷且一致的方式了解动画在迭代过程中的进度,无论其时间轴的性质如何。- 借助
Node.prototype.moveBefore
,您可以在 DOM 树中移动元素,而无需重置元素的状态。 FileSystemObserver
接口会通知网站文件系统的更改。- 通过
PublicKeyCredential
getClientCapabilities()
方法,您可以确定用户的客户端支持哪些 WebAuthn 功能。
如需详细了解这些功能以及 Chrome 中的许多其他新功能,请参阅完整的 Chrome 133 版本说明!
深入阅读
本文仅介绍了一些主要亮点。如需了解 Chrome 133 中的其他变更,请参阅以下链接。
订阅
如需及时了解最新动态,请订阅 Chrome 开发者 YouTube 频道,这样每当我们发布新视频时,您就会收到电子邮件通知。
一旦 Chrome 133 发布,我们会立即在此处告知您 Chrome 中的新变化!