Hello~~大家好，今天小蓝整理一些CSS样式，已经支持的特性。
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容器大小做出响应
containerabc(max-width:px){.text{font-size:14px;}}一个使用场景是：元素在不同的.container元素内的样式可以是不同的，取决于当前所在.container的样式。
hwb
支持hwb（hue,whiteness,blackness）定义颜色：
.text{color:hwb(30deg0%20%);}
三个参数分别表示：角度[0-]，混入白色比例、混入黑色比例。角度对应在色盘不同角度的位置，每个角度都有属于自己的颜色值，这个函数非常适合直观的从色盘某个位置取色。
lch,oklch,lab,oklab,display-p3等
lch(lightness,chroma,hue)，即亮度、饱和度和色相，语法如：
.text{color:lch(50%,,deg);}
chroma(饱和度)指颜色的鲜艳程度，越高色彩越鲜艳，越低色彩越暗淡。hue(色相)指色板对应角度的颜色值。
oklch(lightness,chroma,hue,alpha)，即亮度、饱和度、色相和透明度。
.text{color:oklch(59.69%0..77/0.5);}
更多的就不一一枚举说明了，总之就是颜色表达方式多种多样，他们之间也可以互相转换。
color-mix()
css语法支持的mix，类似sass的mix()函数功能：
.text{color:color-mix(insrgb,#34c9eb10%,white);}
第一个参数是颜色类型，比如hwb、lch、lab、srgb等，第二个参数就是要基准颜色与百分比，第三个参数是要混入的颜色。
color-contrast()
让浏览器自动在不同背景下调整可访问颜色。换句话说，就是背景过深时自动用白色文字，背景过浅时自动用黑色文字：
.text{color:color-contrast(black);}
还支持更多参数，详情见ManageAccessibleDesignSystemThemesWithCSSColor-Contrast()。
相对颜色语法
可以根据语法类型，基于某个语法将某个值进行一定程度的变化：
.text{color:hsl(fromvar(--color)hscalc(l-20%));}
如上面的例子，我们将--color这个变量在hsl颜色模式下，将其l(lightness)亮度降低20%。
渐变色namespace
现在渐变色也支持申明namespace了，比如：
.text{background-image:linear-gradient(torightinhsl,black,white);}
这是为了解决一种叫灰色死区的问题，即渐变色如果在色盘穿过了饱和度为0的区域，中间就会出现一段灰色，而指定命名空间比如hsl后就可以绕过灰色死区。
因为hsl对应色盘，渐变的逻辑是在色盘上沿圆弧方向绕行，而非直接穿过圆心（圆心饱和度低，会呈现灰色）。
accent-color
accent-color主要对单选、多选、进度条这些原生输入组件生效，控制的是它们的主题色：
body{accent-color:red;}
比如这样设置之后，单选与多选的背景色会随之变化，进度条表示进度的横向条与圆心颜色也会随之变化。
inert
inert是一个attribute，可以让拥有该属性的dom与其子元素无法被访问，即无法被点击、选中、也无法通过快捷键选中：
divinert.../div
COLRv1Fonts
COLRv1Fonts是一种自定义颜色与样式的矢量字体方案，浏览器支持了这个功能，用法如下：
importurl(