6个CSS新写法让你扔掉一半JS代码

前两天重构项目的时候发现...好多以前必须用JS写的交互，现在纯CSS就能搞定了😂

1️⃣先说锚点定位这个东西。以前做tooltip、dropdown这种弹出层，是不是都得上Popper.js或者Floating UI？7KB的包体积就为了定个位，想想都离谱。现在CSS原生的anchor positioning直接搞定，浏览器自动帮你算位置，还能处理边界碰撞检测✨ 代码从十几行JS变成三行CSS，我当时看到效果的时候整个人都愣住了

2️⃣然后是CSS嵌套，这个很多人可能知道但没真正用起来。不用装sass不用装less，原生就支持嵌套写法了。.card { & .title { } &:hover { } } 这种写法浏览器直接认，项目里的sass依赖可以考虑删了💪

3️⃣还有个容器查询我觉得被严重低估了。以前响应式只能看视口宽度对吧，但实际开发中组件放在侧边栏和放在主内容区宽度完全不一样啊...container query让组件根据自己父容器的大小来变化，这才是真正的组件级响应式🔥

4️⃣color-mix()这个函数也挺实用，动态混合颜色不用再写JS计算了。hover变深20%？一行CSS：color-mix(in srgb, var(--primary) 80%, black)

5️⃣话说回来，:has()选择器应该是这里面最猛的。父元素选择器啊朋友们...以前想根据子元素状态改父元素样式，必须上JS监听。现在 .form:has(input:invalid) { border-color: red } 完事了😱

6️⃣最后一个是View Transitions API，页面切换动画以前要写多少JS？现在document.startViewTransition()一行搞定丝滑过渡

这几个特性Chrome都已经支持了，不是实验性的那种。你们项目里用上了没