架构基础
1.三角函数
在 CSS 中，可以编写数学表达式 。位于基址的 calc() 函数用于执行计算三角函数。
Chrome 111 中将这些函数联接起来就是三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2()
也就是说你可以通过其中的两项算出第三项
例如：你可以通过l长度和sine算出a,b的长度，那么就可以得到该点相对原点的偏移距离，从而进行定位。
参考示例：
2.:nth-child() 和 :nth-last-child() 伪类选择器
让你在使用 :nth-*() 时可以用 of S 语法预先过滤所选数据
例如:nth-child(2 of .highlight) 从符合条件的标签 .highlight 的所有孩子中，选择第二个孩子。
这与 .highlight:nth-child(2) 相反，后者选择具有 .highlight 类并且也是第二个子元素的元素。
容器查询
能够将媒体查询的功能作用到一个div上
使用方法：
先在父级容器上设置 container-type，或使用 container 简写形式同时为其指定类型和名称：
.card-container {
container: card / inline-size;
}
将 container-type 设置为 inline-size 会查询父级的内嵌方向尺寸。
通过 @container 将样式应用于其任何子级：
.card-child {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card-child {
grid-template-columns: 1fr;
}
}
2.样式查询
直接查询父级，可直接编写@container style
@container style(--theme: balack) {
.card {
background-color: wheat;
border-color: brown;
}
}
设置非直接父级元素的样式，则需要为该元素提供 container-name，并在样式查询中引用它
@container cards style(--dateId: value) {
.card {
...
}
}
// cards
3:has()：系列选择器
<div class="everybody">
<div>
<div class="a-good-time"></div>
</div>
</div>
<div class="everybody"></div>
.everybody:has(.a-good-time) {
animation: party 21600s forwards;
}
// 会选择一个具有a-good-time 类的后代的元素
交互
视图转换
可以提取现有的 CSS 动画或使用 Web Animations API 构建的动画，并将其与滚动条的滚动偏移量相结合
滚动结束事件
document.onscrollend = event => {…}
滚动条驱动动画
离散型动画
display: none 之间添加动画效果
@starting-style
规则以新的 Web 功能为基础，用于在 display: none 之间添加动画效果。此规则可用于为元素指定“before-open”样式，让浏览器在元素打开网页之前可以查询到该样式。
下面以popover为例：弹出时加入动画starting-style
组件
弹出式窗口
opover API 可帮助您构建叠加在页面其余部分的元素。这些内容可能包括菜单、选项和提示。若要创建简单的弹出式窗口，您可以向弹出的元素添加 popover 属性和 id，然后使用 popovertarget="my-popover" 将其 id 属性与调用按钮相关联。Popover API 支持：
拆分option内容
今年，Chrome 和 Safari 对 HTML 做出了另一项细微更改，即能够在 元素中添加水平规则元素（ 标记），从而在视觉上拆分您的内容。以前，将 标记放入 select 中根本不会呈现。但今年，Safari 和 Chrome 都支持此功能，从而更好地分隔 元素中的内容。
:user-valid 和 :user-invalid伪类
:user-valid 和 :user-invalid 伪类选择器与现有的 :valid 和 :invalid 伪类类似。但交互比较好
示例：
本文档简化版本，详细内容点击https://developer.chrome.com/blog/css-wrapped-2023?hl=zh-cn#scrollend-screencast
