2023年Chrome CSS好用新功能,网格、布局和动画

314 阅读4分钟

Chrome团队总结的2023 CSS发展总结。

随着技术的发展,web端功能也越来越强大,一些原本Web平台无法实现的功能现在也都可以实现,除了原生移动端和桌面端,浏览器端越来越被大家重视起来。本文总结了一些有意思的新功能分享给大家。

子网格

借助 CSS subgrid,您可以创建更复杂的网格,并在子布局之间实现更好的对齐。它允许另一个网格内的网格将外部网格的行和列作为自己的行和列,方法是使用 subgrid 作为网格行或列的值。

subgrid 非常适合用来根据彼此的动态内容对齐同级。这可让文案撰写人员、用户体验作者和翻译人员尝试创建“适合”布局的项目副本。借助 subgrid,可以调整布局以适应内容。

首字母

今年年初在 Chrome 110 中推出 initial-letter 属性,这是一项虽然小巧但功能强大的 CSS 功能,可用于为首字母的放置位置设置样式。您可以将字母的位置调整为放下或抬起。该属性接受两个参数:第一个表示将字母放在相应段落中的深度,第二个表示将字母放在上方字母的升高。您甚至可以结合运用这两种方式,如以下演示所示。

text-wrap: 自动文本布局

作为开发者,您不知道标题或段落的最终大小、字体大小,甚至是语言。有效且美观处理文本换行所需的所有变量均在浏览器中提供。由于浏览器了解所有因素(例如字体大小、语言和分配区域),因此非常适合用于处理高级、优质文本布局。

这就需要我们采用两种新的文本换行技术,一种称为 balance,另一种称为 pretty。balance 值旨在创建一个和谐的文本块,而 pretty 旨在防止孤立字符并确保健康的断字。传统上,这两项任务都是手动完成的,将这项工作交给浏览器,让它支持任何翻译的语言,非常方便实用。

相对颜色语法

相对颜色语法 (RCS) 是对 color-mix() 的补充,用于创建颜色变体。它比 color-mix() 更强大,但同时也是不同的颜色处理策略。color-mix() 可能会混入白色来调亮颜色,通过 RCS 可以精确访问亮度通道,并能够在通道上使用 calc(),以编程方式降低或提高亮度。

调整容器查询大小

如需使用此功能,请先在要查询的元素上设置元素,然后与媒体查询类似,使用带有尺寸参数的 @container 来应用样式。除了容器查询,您还可以获得容器查询大小。在以下演示中,容器查询大小 cqi(表示内嵌容器的大小)用于调整卡片标头的大小。

:has() 选择器

近 20 年来,开发者一直要求在 CSS 中使用“父级选择器”。利用 Chrome 105 中随附的 :has() 选择器,现在已能做到这一点。例如,使用 .card:has(img.hero) 会选择以主打图片作为子级的 .card 元素。

由于 :has() 接受相对选择器列表作为其参数,因此您可以选择比父元素更多的内容。使用各种 CSS 组合器,可以在 DOM 树中向上,也可以进行横向选择。例如,li:has(+ li:hover) 会选择当前悬停的 

  •  元素之前的 
  •  元素。

    三角函数

    Chrome 111 增加了对三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持,使其适用于所有主流引擎。这些函数对于动画和布局来说非常方便。例如,现在您可以更轻松地在以所选中心为中心的圆圈上布置元素。

    滚动条驱动的动画

    滚动条驱动的动画是 Chrome 115 中推出的一项令人兴奋的功能。借助此类动画,您可以提取现有的 CSS 动画或使用 Web Animations API 构建的动画,并将其与滚动条的滚动偏移量相结合。当您上下滚动(或在水平滚动条中左右滚动)时,关联的动画会以直接响应的方式向前和向后拖动。

    使用 ScrollTimeline 时,您可以跟踪滚动条的整体进度,如以下演示所示。当您滚动到页面底部时,文本会逐个字符地显示。