2023年你可能不知道的css新特性

最近几年Web发展变化非常地大，相应的CSS的发展也可以说是神速，更值得的庆幸的是，现代Web浏览器对这些新的CSS特性支持度也非常的高。

《What's new in CSS and UI: I/O 2023 Edition》一文所列出的新特性清单有近 20 个，虽然有些是“新特性”，但其中有些特性并不怎么“新”，或许已在你的项目中，或许已接触过，只是不太了解而以。

在下面所列 CSS 新特性，其实早在以往分享的 CSS 特新性中早有出现，比如 容器查询、has() 伪类函数、动态视窗单位、首字下沉等。对于不怎么关注 CSS 的同学来说，这里所列清单都会感到是新的特性，但就我个人而言，近段时间接触的应该是 nth-of 、text-wrap:balance 、广色区域颜色空间、三角函数、视窗转换以及可定制组件中的锚点定位、离散属性过渡等。

它们主要分四个方面的，即：

1. 与下一代Web 响应式有相

比如容器查询、样式查询、:has() 伪类函数、nth-of 、经典排版技术（text-wrap: balance）、首字下沉（initial-letter）、动态视窗单位、广色域（Wide-gamut）颜色空间、color-mix() 函数 等 9 个；

2. 与 CSS基础原理相关

比如 CSS 的嵌套、层叠、作用域、三角函数 和单个变换属性等 5 个；

3 .与可定制组件相关

比如弹出层（Popover）、锚点定位、下拉选择菜单（<selectmenu>）和 离散属性过渡 等 4 个；

4.与交互相关

比如滚动驱动的动画和视图转换等 2 个；

而且这些特性已经在个别，甚至是在大部分主流浏览器已经可以看到了，让 前端 开发者的工作变得更轻松。