2023css新特性总结

架构基础

1.三角函数

在 CSS 中，可以编写数学表达式 。位于基址的 calc() 函数用于执行计算三角函数。

Chrome 111 中将这些函数联接起来就是三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2()

也就是说你可以通过其中的两项算出第三项

例如：你可以通过l长度和sine算出a,b的长度，那么就可以得到该点相对原点的偏移距离，从而进行定位。

参考示例：

https://codepen.io/Awaysed/embed/abMorjr

2.:nth-child() 和 :nth-last-child() 伪类选择器

让你在使用 :nth-*() 时可以用 of S 语法预先过滤所选数据

例如:nth-child(2 of .highlight) 从符合条件的标签 .highlight 的所有孩子中，选择第二个孩子。

这与 .highlight:nth-child(2) 相反，后者选择具有 .highlight 类并且也是第二个子元素的元素。

https://codepen.io/Awaysed/embed/xxBwqGx

容器查询

能够将媒体查询的功能作用到一个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;
 }
}

https://codepen.io/web-dot-dev/embed/ZEMzNGj

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 构建的动画，并将其与滚动条的滚动偏移量相结合

https://codepen.io/Awaysed/embed/jOJabME

滚动结束事件

document.onscrollend = event => {…}

滚动条驱动动画

离散型动画

display: none 之间添加动画效果

https://codepen.io/Awaysed/embed/JjzOYKr

@starting-style

规则以新的 Web 功能为基础，用于在 display: none 之间添加动画效果。此规则可用于为元素指定“before-open”样式，让浏览器在元素打开网页之前可以查询到该样式。

下面以popover为例：弹出时加入动画starting-style

https://codepen.io/Awaysed/embed/YzgEyqv

组件

弹出式窗口

opover API 可帮助您构建叠加在页面其余部分的元素。这些内容可能包括菜单、选项和提示。若要创建简单的弹出式窗口，您可以向弹出的元素添加 popover 属性和 id，然后使用 popovertarget=“my-popover” 将其 id 属性与调用按钮相关联。Popover API 支持：

https://codepen.io/Awaysed/embed/WNmXQwe

---

拆分option内容

今年，Chrome 和 Safari 对 HTML 做出了另一项细微更改，即能够在 元素中添加水平规则元素（

---

标记），从而在视觉上拆分您的内容。以前，将

---

标记放入 select 中根本不会呈现。但今年，Safari 和 Chrome 都支持此功能，从而更好地分隔 元素中的内容。

https://codepen.io/Awaysed/embed/wvOPKKZ

:user-valid 和 :user-invalid伪类

:user-valid 和 :user-invalid 伪类选择器与现有的 :valid 和 :invalid 伪类类似。但交互比较好

使用颜色标识元素以显示验证结果:

示例：

https://codepen.io/Awaysed/embed/RwdrZgo

本文档简化版本，详细内容点击https://developer.chrome.com/blog/css-wrapped-2023?hl=zh-cn#scrollend-screencast

参考资料：

https://developer.chrome.com/blog/css-wrapped-2023?hl=zh-cn#scrollend-screencast

https://web.dev/articles/css-trig-functions?hl=zh-cn