浏览器|广州蓝景分享—CSS 2022新特性( 二 ) 广州市|var

因为 hsl 对应色盘，渐变的逻辑是在色盘上沿圆弧方向绕行，而非直接穿过圆心（圆心饱和度低，会呈现灰色）。
【浏览器|广州蓝景分享—CSS 2022新特性】accent-color

accent-color 主要对单选、多选、进度条这些原生输入组件生效，控制的是它们的主题色：
body{ accent-color: red;
比如这样设置之后，单选与多选的背景色会随之变化，进度条表示进度的横向条与圆心颜色也会随之变化。
inert
inert 是一个 attribute ，可以让拥有该属性的 dom 与其子元素无法被访问，即无法被点击、选中、也无法通过快捷键选中：
<div inert>...</div>

COLRv1 Fonts
COLRv1 Fonts 是一种自定义颜色与样式的矢量字体方案，浏览器支持了这个功能，用法如下：
@importurl(https://fonts.googleapis.com/css2?family=Bungee+Spice); @font-palette-values--colorized { font-family: \"BungeeSpice\"; base-palette: 0; override-colors: 0hotpink 1cyan 2white; .spicy{ font-family:\"Bungee Spice\"; font-palette: --colorized;
上面的例子我们引入了矢量图字体文件，并通过 @font-palette-values --colorized 自定义了一个叫做 colorized 的调色板，这个调色板通过 base-palette: 0 定义了其继承第一个内置的调色板。
使用上除了 font-family 外，还需要定义 font-palette 指定使用哪个调色板，比如上面定义的 --colorized 。
视口单位
除了 vh、vw 等，还提供了 dvh、lvh、svh ，主要是在移动设备下的区别：
dvh: dynamic vh 表示内容高度，会自动忽略浏览器导航栏高度。
lvh: large vh 最大高度，包含浏览器导航栏高度。
svh: small vh 最小高度，不包含浏览器导航栏高度。
:has()
可以用来表示具有某些子元素的父元素：
.parent:has(.child){
表示选中那些有用 .child 子节点的 .parent 节点。
即将支持的特性
@scope
可以让某个作用域内样式与外界隔绝，不会继承外部样式：
@scope(.card) { header{ color:var(--text);
如上定义后， .card 内 header 元素样式就被确定了，不会受到外界影响。如果我们用 .card { header {来定义样式，全局的 header { 样式定义依然可能覆盖它。
样式嵌套
@nest 提案时 css 内置支持了嵌套，就像 postcss 做的一样：
.parent { &:hover { // ...
prefers-reduced-data
@media 新增了 prefers-reduced-data ，描述用户对资源占用的期望，比如 prefers-reduced-data: reduce 表示期望仅占用很少的网络带宽，那我们可以在这个情况下隐藏所有图片和视频：
@media(prefers-reduced-data:reduce) { picture video{ display: none;
也可以针对 reduce 情况降低图片质量，至于要压缩多少效果取决于业务。
自定义 media 名称
允许给 @media 自定义名称了，如下定义了很多自定义 @media：
@custom-media--OSdark (prefers-color-scheme:dark); @custom-media--OSlight (prefers-color-scheme:light); @custom-media--pointer (hover)and(pointer:coarse); @custom-media--mouse (hover)and(pointer:fine); @custom-media--xxs-and-above (width >=240px); @custom-media--xxs-and-below (width <=240px);
我们就可以按照自定义名称使用了：
@media(--OSdark) { :root{ …
media 范围描述支持表达式
以前只能用 @media (min-width: 320px) 描述宽度不小于某个值，现在可以用 @media (width >= 320px) 代替了。
@property
@property 允许拓展 css 变量，描述一些修饰符: