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

@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:\"\uD83C\uDF1A \"; html:toggle(lightswitch)button::before{ content:\"\uD83C\uDF1D \";
上面的例子把 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>
还支持更复杂的语法，比如对下拉内容分组：
<selectmenuclass=\"my-custom-select\"> <divslot=\"button\"> <spanclass=\"label\">Choose a plant</span> <spanbehavior=\"selected-value\"slot=\"selected-value\"></span> <buttonbehavior=\"button\"></button> </div> <divslot=\"listbox\"> <divpopupbehavior=\"listbox\"> <divclass=\"section\"> <h3>Flowers</h3> <option>Rose</option> <option>Lily</option> <option>Orchid</option> <option>Tulip</option> </div> <divclass=\"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 侧。