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

Hello~~大家好，今天小蓝整理一些CSS样式， 2022已经支持的特性。

@layer
解决业务代码的 !important 问题。为什么业务代码需要用 !important 解决问题？因为 css 优先级由文件申明顺序有关，而现在大量业务使用动态插入 css 的方案，插入的时机与 js 文件加载与执行时间有关，这就导致了样式优先级不固定。
@layer 允许业务定义样式优先级，层越靠后优先级越高，比如下面的例子， override 定义的样式优先级比 framework 高：
@layerframework override; @layeroverride { .title{ color: white; @layerframework { .title{ color: red;
subgrid

subgrid 解决 grid 嵌套 grid 时，子网格的位置、轨迹线不能完全对齐到父网格的问题。只要在子网格样式做如下定义：
.sub-grid{ display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
@container
@container 使元素可以响应某个特定容器大小。在 @container 出来之前，我们只能用 @media 响应设备整体的大小，而 @container 可以将相应局限在某个 DOM 容器内：
// 将 .container 容器的 container-name 设置为 abc .container { container-name: abc;
// 根据 abc 容器大小做出响应 @container abc (max-width: 200px) { .text { font-size: 14px;
一个使用场景是：元素在不同的 .container 元素内的样式可以是不同的，取决于当前所在 .container 的样式。
hwb
支持 hwb（hue whiteness blackness）定义颜色：
.text{ color:hwb(30deg0%20%);
三个参数分别表示：角度 [0-360
，混入白色比例、混入黑色比例。角度对应在色盘不同角度的位置，每个角度都有属于自己的颜色值，这个函数非常适合直观的从色盘某个位置取色。
lch oklch lab oklab display-p3 等
lch(lightness chroma hue) ，即亮度、饱和度和色相，语法如：
.text{ color:lch(50%100100deg);
chroma(饱和度) 指颜色的鲜艳程度，越高色彩越鲜艳，越低色彩越暗淡。 hue(色相) 指色板对应角度的颜色值。
oklch(lightness chroma hue alpha) ，即亮度、饱和度、色相和透明度。
.text{ color:oklch(59.69%0.15649.77/0.5);
更多的就不一一枚举说明了，总之就是颜色表达方式多种多样，他们之间也可以互相转换。
color-mix()
css 语法支持的 mix ，类似 sass 的 mix() 函数功能：
.text{ color:color-mix(in srgb #34c9eb10% white);
第一个参数是颜色类型，比如 hwb、lch、lab、srgb 等，第二个参数就是要基准颜色与百分比，第三个参数是要混入的颜色。
color-contrast()
让浏览器自动在不同背景下调整可访问颜色。换句话说，就是背景过深时自动用白色文字，背景过浅时自动用黑色文字：
.text{ color:color-contrast(black);
还支持更多参数，详情见 Manage Accessible Design System Themes With CSS Color-Contrast() 。
相对颜色语法
可以根据语法类型，基于某个语法将某个值进行一定程度的变化：
.text{ color:hsl(from var(--color) h scalc(l -20%));
如上面的例子，我们将 --color 这个变量在 hsl 颜色模式下，将其 l(lightness) 亮度降低 20% 。
渐变色 namespace
现在渐变色也支持申明 namespace 了，比如：
.text{ background-image:linear-gradient(to right in hsl black white);
这是为了解决一种叫灰色死区的问题，即渐变色如果在色盘穿过了饱和度为 0 的区域，中间就会出现一段灰色，而指定命名空间比如 hsl 后就可以绕过灰色死区。