本周读一读 State of CSS 2022 介绍的 CSS 个性。
概述
2022 曾经反对的个性
@layer
解决业务代码的 !important 问题。为什么业务代码须要用 !important 解决问题？因为 css 优先级由文件申明程序无关，而当初大量业务应用动静插入 css 的计划，插入的机会与 js 文件加载与执行工夫无关，这就导致了款式优先级不固定。
@layer 容许业务定义款式优先级，层越靠后优先级越高，比方上面的例子，override 定义的款式优先级比 framework 高：
@layer framework, override;@layer override { .title { color: white; }}@layer framework { .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(30deg 0% 20%);}三个参数别离示意：角度 [0-360]，混入红色比例、混入彩色比例。角度对应在色盘不同角度的地位，每个角度都有属于本人的色彩值，这个函数非常适合直观的从色盘某个地位取色。
lch, oklch, lab, oklab, display-p3 等
lch(lightness, chroma, hue)，即亮度、饱和度和色相，语法如：
.text { color: lch(50%, 100, 100deg);}chroma(饱和度) 指色彩的娇艳水平，越高色调越娇艳，越低色调越黯淡。hue(色相) 指色板对应角度的色彩值。
oklch(lightness, chroma, hue, alpha)，即亮度、饱和度、色相和透明度。
.text { color: oklch(59.69% 0.156 49.77 / 0.5);}更多的就不一一枚举阐明了，总之就是色彩表达方式多种多样，他们之间也能够相互转换。
color-mix()
css 语法反对的 mix，相似 sass 的 mix() 函数性能：
.text { color: color-mix(in srgb, #34c9eb 10%, 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 s calc(l - 20%));}如下面的例子，咱们将 --color 这个变量在 hsl 色彩模式下，将其 l(lightness) 亮度升高 20%。
渐变色 namespace
当初渐变色也反对申明 namespace 了，比方：
.text { background-image: linear-gradient(to right in hsl, black, white);}这是为了解决一种叫 灰色死区 的问题，即渐变色如果在色盘穿过了饱和度为 0 的区域，两头就会呈现一段灰色，而指定命名空间比方 hsl 后就能够绕过灰色死区。
因为 hsl 对应色盘，突变的逻辑是在色盘上沿圆弧方向绕行，而非间接穿过圆心（圆心饱和度低，会出现灰色）。
accent-color
accent-color 次要对单选、多选、进度条这些原生输出组件失效，管制的是它们的主题色：
body { accent-color: red;}比方这样设置之后，单选与多选的背景色会随之变动，进度条示意进度的横向条与圆心色彩也会随之变动。
inert
inert 是一个 attribute，能够让领有该属性的 dom 与其子元素无奈被拜访，即无奈被点击、选中、也无奈通过快捷键选中：
<div inert>...</div>COLRv1 Fonts
COLRv1 Fonts 是一种自定义色彩与款式的矢量字体计划，浏览器反对了这个性能，用法如下：
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);@font-palette-values --colorized { font-family: "Bungee Spice"; base-palette: 0; override-colors: 0 hotpink, 1 cyan, 2 white;}.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 变量，形容一些修饰符:
@property --x { syntax: "<length>"; initial-value: 0px; inherits: false;}下面的例子把变量 x 定义为长度类型，所以如果谬误的赋值了字符串类型，将会沿用其 initial-value。
scroll-start
scroll-start 容许定义某个容器从某个地位开始滚动：
.snap-scroll-y { scroll-start-y: var(--nav-height);}:snapped
:snapped 这个伪类能够选中以后滚动容器中正在被响应的元素：
.card:snapped { --shadow-distance: 30px;}这个个性有点像 IOS select 控件，高低滑动后就像个左轮枪一样转动元素，最初停留在某个元素上，这个元素就处于 :snapped 状态。同时 JS 也反对了 snapchanging 与 snapchanged 两种事件类型。
:toggle()
只有一些内置 html 元素领有 :checked 状态，:toggle 提案是用它把这个状态拓展到每一个自定义元素：
button { toggle-trigger: lightswitch;}button::before { content: " ";}html:toggle(lightswitch) button::before { content: " ";}下面的例子把 button 定义为 lightswitch 的触发器，且定义当 lightswitch 触发或不触发时的 css 款式，这样就能够实现点击按钮后，黑脸与黄脸的切换。
anchor()
anchor() 能够将没有父子级关系的元素建设绝对地位关系，更具体的用法能够看 CSS Anchored Positioning。
selectmenu
selectmenu 容许将任何元素增加为 select 的 option：
<selectmenu> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option></selectmenu>还反对更简单的语法，比方对下拉内容分组：
<selectmenu class="my-custom-select"> <div slot="button"> <span class="label">Choose a plant</span> <span behavior="selected-value" slot="selected-value"></span> <button behavior="button"></button> </div> <div slot="listbox"> <div popup behavior="listbox"> <div class="section"> <h3>Flowers</h3> <option>Rose</option> <option>Lily</option> <option>Orchid</option> <option>Tulip</option> </div> <div class="section"> <h3>Trees</h3> <option>Weeping willow</option> <option>Dragon tree</option> <option>Giant sequoia</option> </div> </div> </div></selectmenu>总结
CSS 2022 新个性很大一部分是将 HTML 原生能力裸露进去，赋能给业务自定义，不过如果这些状态齐全由业务来实现，比方 Antd <Select> 组件早已实现自定义下拉选项与款式，既然 HTML 没有提供自定义能力，就依照其交互用 DIV + JS 模仿一套实现进去，定制空间更大。
但也有很多能力依赖浏览器实现，或者自身更适宜实现在 CSS 侧，比方 @scope、subgrid、对色彩的解决等。
探讨地址是：精读《State of CSS 2022》· Issue #442 · dt-fe/weekly
如果你想参加探讨，请 点击这里，每周都有新的主题，周末或周一公布。前端精读 - 帮你筛选靠谱的内容。
关注 前端精读微信公众号
<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
版权申明：自在转载-非商用-非衍生-放弃署名（创意共享 3.0 许可证）