2023年CSS新功能大揭秘：Chrome浏览器的更新

Chrome 团队的总结，2023年 CSS 增加了哪些功能 #css#

■ 三角函数，增加了对三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持，使其适用于所有主流引擎

■ 复杂的第 n-* 选择，借助 :nth-child() 伪类选择器，您可以按索引选择 DOM 中的元素

■ 增加了对 @scope 的支持，这是一项 @ 规则，可让您将选择器的范围限定为文档的特定子树

■ 嵌套，现在，您可以将相关样式规则分组到选择器中，从而继续创建选择器。

■ 子网格，借助 CSS subgrid，您可以创建更复杂的网格，并在子布局之间实现更好的对齐

■ 排版，2023 年，网页排版取得了一些重要更新。text-wrap 属性是一个特别实用的渐进式增强

■ 首字母，在 Chrome 110 中推出 initial-letter 属性，这是一项虽然小巧但功能强大的 CSS 功能，可用于为首字母的放置位置设置样式。

■ text-wrap: 均衡和美观

■ 高清色彩空间（颜色级别 4）

■ color-mix 函数

■ 相对颜色语法，相对颜色语法 (RCS) 是对 color-mix() 的补充，用于创建颜色变体

■ 调整容器查询大小

■ 设置容器查询的样式，在使用 @container style() 时查询父元素上的自定义属性的值

■ :has() 选择器

■ 更新媒体查询

■ 为媒体查询编写脚本

■ 降低透明度的媒体查询

■ 视图转换，View Transitions API 的核心是
document.startViewTranstion 函数

■ 线性加/减速函数

■ Scroll End

■ 滚动条驱动的动画

■ 推迟时间轴附加

■ 离散属性动画

■ @starting-style CSS 规则以新的 Web 功能为基础，用于在 display: none 之间添加动画效果

■ 重叠式广告

■ 弹出式窗口，Popover API 可帮助您构建叠加在页面其余部分的元素

■ 选择中的水平规则

■ :user-valid 和 invalid pseudo class