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 时，您可以跟踪滚动条的整体进度，如以下演示所示。当您滚动到页面底部时，文本会逐个字符地显示。
