最近前端圈子里头最热闹的事儿，莫过于各大浏览器扎堆发布新特性了。Chrome 143、Firefox 146、Safari 26.2，一个个跟赶集似的，全把压箱底的好东西往外掏。瞅着这些新玩意儿，心里头就一个想法：以前那些非得靠JavaScript才能折腾出来的效果，现在看来，纯CSS怕是真要支棱起来了。
让CSS干掉JS的老活儿
以前要实现一个根据元素位置自动弹出的面板，脑子里头蹦出来的第一反应绝对是监听滚动、计算位置、手动调整。这套活儿整下来，代码量感人，还得提防各种边界情况。现在Chrome 143里头的锚定容器查询，算是把这摊子事儿给整明白了。就拿一个悬浮菜单来说，完全不需要写一行JavaScript去算它的上下左右，直接给菜单定义一个锚点，告诉浏览器“你给老子跟着那个按钮”，剩下的事儿交给CSS就行。这玩意儿本质上是把元素间的相对位置关系变成了CSS可以感知的东西，就跟给元素装了个GPS似的，想往哪儿飘就往哪儿飘。可能有人会担心兼容性，但既然Chrome都上了，其他浏览器跟进也就是个时间问题。
写CSS不再怕变量满天飞
有个东西叫@scope，Firefox 146这回给它整成基线特性了。这玩意儿说白了就是给CSS加了个“作用域”的概念。以前写样式最头疼的就是命名冲突，生怕一个类名改动了把页面其他地方搞崩。现在好了，直接给一块DOM区域套个@scope，里头的样式就像被关进小黑屋，再猛的样式也影响不到外面。比如说一个卡片组件，直接在组件根元素上定义@scope，所有的子元素样式都写在这个作用域里头，想怎么玩就怎么玩，再也不用担心污染全局。
还有个叫@custom-media的也在搞试验，这玩意儿简直就是为媒体查询量身定做的变量。比如想定义一个“平板竖屏”的场景，直接@custom-media --tablet (width <= 1024px) and (orientation: portrait)，后面用到的地方直接写@media (--tablet)，代码复用率直接拉满。
输入框也能自己撑开自己了
Safari 26.2带了个field-sizing属性，专治输入框高度不听话的毛病。以前写一个文本域，高度要么写死，要么得用JS监听输入内容动态调整。现在一个field-sizing: content甩上去，输入框就学会了自己根据内容撑开。这就跟聊天输入框一样，打一行字就长高一点，用户体验上去了，代码量还下来了。可能有人要问了，这玩意儿跟textarea的rows属性有啥区别？区别大了，rows是死的，内容超出还得滚动条，field-sizing是活的，内容变多它就变高，这才是真正的自适应。
文字修饰的控制权终于给全了
Firefox 146在文字装饰上也下了功夫，搞了个text-decoration-inset。以前给文字加下划线，位置和粗细基本没得调，看着总觉得差点意思。现在好了，这个属性可以控制下划线离文字多远、多宽。想象一下设计稿里头的下划线特别细，离文字还特别近，以前可能得用边框模拟或者改字体，现在直接一个属性搞定。
还有那个hyphenate-limit-chars，虽然Safari还在憋着没放出来，但Chrome和Firefox已经能用了。这玩意儿专门管单词断行的事儿。比如英文里头“light-er”这种断法看着就离谱，用这个属性可以规定连字符左右两边至少得留几个字母，这样“lighter”就不会被断成“light-er”这种智障效果了。
颜色选择终于不用纠结了
颜色格式这事儿，搁以前就是RGB走天下，后来HSL火了一阵，现在oklch()成了香饽饽。为啥？因为这玩意儿看着直观啊，l代表亮度，c代表彩度，h代表色相，调起来跟玩调色板似的。而且它还有个绝活儿，就是能保证颜色的感知一致性，同样的亮度调整在不同色相下看起来是均匀的。设计系统里定义主题色，用oklch()准没错，改个亮度就能搞出一整套配色方案，不用像以前那样到处调RGB数值。
随机数和兄弟索引让CSS更灵活
Safari 26.2带了个random()，虽然目前还只有它家支持，但这苗头已经够让人兴奋了。CSS里头能直接生成随机数，这意味着什么？意味着可以纯CSS搞随机动画、随机位置、随机颜色，以前这些活儿全得靠JS，现在CSS自己就能搞定。
还有sibling-index()和sibling-count()，这俩货能让元素知道自己排老几，总共有多少兄弟。比如要给一组列表项交替着色，以前得靠JS循环，现在直接background: hsl(0, 0%, calc(100% - (sibling-index() * 10%)))，效果就出来了。
HTML属性也开始卷起来了
这回最让人惊喜的其实是HTML的command和commandfor，这俩属性现在已经是基线特性了，所有浏览器都支持。以前点个按钮弹出对话框，得写onclick事件，调用showModal方法，代码虽然不多，但总归是JS。现在直接给按钮一个command="show-modal"，再给个commandfor="dialog的ID"，完事儿。这就是声明式编程的威力，把交互逻辑直接写在HTML里，JS只负责核心业务逻辑。
还有个hidden=until-found也挺有意思，元素默认隐藏，但浏览器全局搜索的时候能找到它并自动展开。这个特性在做搜索高亮、锚点定位的时候特别好使，不用再写一堆JS去监听搜索事件了。
伪元素也能响应鼠标了
以前想给::before或者::after加个手型光标，那是不可能的，光标只能设在元素本体上。现在Safari 26.2开了这个口子，伪元素也能设置cursor了。这听起来是个小改动，但在做自定义按钮、自定义交互元素的时候特别有用，不用再为了一个小箭头去套一层额外的元素。
其实回过头看这两年CSS的发展，明显感觉到一个趋势：浏览器厂商们正在把以前只有JS能干的事儿，一个一个搬到CSS和HTML里。这背后的逻辑也很简单，声明式的代码比命令式的更容易维护、性能更好、上手门槛也更低。对于写前端的人来说，这意味着可以少写很多样板代码，把精力真正花在业务逻辑和用户体验上。