Safari憋了2年的滤镜功能，被1个Demo扒光了底裤

浏览器厂商有个默契：新功能上线，文档写得像天书，开发者看得直挠头。Safari团队最近干了件反常的事——把feComposite元素的支持打包进更新，然后扔给前端工程师Jen Simmons一个任务：做个Demo，得让人一眼看懂这玩意儿能干啥。

结果她交出的作业，让圈内人有点意外。三个彩色圆环，边缘泛着柔和的光晕，鼠标一碰还能互动。没有一行废话，没有技术名词轰炸，就是把新特性的效果摊在桌面上。

这个Demo的聪明之处在于：它解决了一个真实存在的痛点。

做过SVG滤镜的开发者都懂，发光效果以前是个体力活。你得手动调模糊、调叠加、调透明度，参数稍微偏一点，光晕要么脏得像油渍，要么淡到看不见。feComposite的作用，相当于给浏览器发了一张"快捷指令"——告诉它怎么把多个滤镜层叠在一起，省掉中间那些试错环节。

Safari这次更新，本质上是在填坑。Chrome和Firefox早就支持这类操作，苹果迟到两年，现在终于把作业补上了。

1个下拉菜单，把原生控件撕碎了重做

Chris Bolson的自定义选择器，第一眼会让人怀疑是不是看错了标签。它长得完全不像浏览器自带的那个灰框框，倒像是某个设计团队打磨了三个月的成品。

交互细节很克制：选项展开时有弹性动画，选中后没有突兀的闪烁，键盘导航的反馈也做了视觉提示。整个流程顺下来，你会忘记这是个HTML select的替代品——而这恰恰是最高级的伪装。

原生控件的尴尬在于，它太"正确"了。无障碍支持完善、系统一致性拉满，但视觉设计像是被锁死在2010年。Bolson的解法很直接：保留所有底层能力，把表皮整个换掉。ARIA属性一个没落，屏幕阅读器照样能读，只是人类用户看到的界面终于跟上了时代。

这种"借壳上市"的思路，在大型产品里越来越常见。不是推翻重建，而是在标准接口上包一层体验更好的壳。

水果射击选单：当表单控件变成小游戏

Temani Afif走了另一条路。他的选择器把选项做成了悬挂的水果，用户要用准星射击来"炸开"目标。击中苹果，选中"苹果口味"；打中香蕉，对应选项高亮。

听起来像是为了炫技而炫技？实际体验后会发现，这个设计有它的场景。面向儿童的配置页面、活动营销的报名表单、任何需要降低填写焦虑的场合——游戏化外壳能消解"又要填表"的抵触感。

技术实现上，Afif用了CSS动画配合JavaScript的状态管理。水果的摇晃是CSS关键帧，爆炸粒子用Canvas绘制，选中后的数据回传还是走标准表单提交。花哨的是面子，里子依旧规矩。

这类Demo的价值在于拓宽边界：原来select元素可以被解构到这个程度，而不必担心兼容性崩盘。

数据表格的噩梦，Chrome打算亲手终结

Bramus在Chrome Canary里挖到的新功能，直指一个折磨前端多年的问题——大型表格的固定行列。

做过后台系统的开发者都经历过：表格横向滚动时，首列的姓名或ID必须钉在原地；纵向滚动时，表头不能跟着溜走。实现这个需求，目前的主流方案是position: sticky配合一堆z-index调试，复杂表格还要动态计算偏移量，维护起来像在做数学题。

Chrome正在实验的API，试图把这套逻辑收进浏览器底层。开发者只需要声明哪些行列需要固定，渲染和同步的工作交给引擎处理。

Bramus的测试页面放了一个千行级别的表格，固定三列左栏、固定表头、交叉区域高亮。滚动时没有出现以往常见的闪烁或错位，帧率稳定在60fps。

这个功能还没进稳定版，但信号很明确：浏览器厂商开始正视企业级场景的体验债务了。

纯CSS造电视：按钮能按，天线能转，连雪花屏都还原了

Ben Evans的CSS艺术每次出现，都会刷新人们对这项技术的认知边界。这次的电视机模型，从外壳纹理到旋钮阻尼感，全部用HTML和CSS搭建。

交互设计藏着巧思：旋转频道旋钮，屏幕内容切换；拉动天线，信号强度指示器随之摆动；甚至专门做了"无信号"的雪花噪点动画，用CSS随机函数模拟。

最细思极恐的是性能。整个Demo跑在单文件里，没有图片资源，没有JavaScript动画库，纯靠GPU加速的CSS变换。在低端设备上测试，发热和耗电都远低于Canvas方案。

Evans在代码注释里写了一句："这不是为了证明CSS比JavaScript更好，只是想看看不用脚本能走多远。"

滚动变焦：把视差效果做出新花样

Cyd Stumpel的Demo标题自带剧透——"疯狂变焦"。页面滚动时，中心元素以指数级速度放大，背景层却以不同速率后退，制造出类似穿越隧道的空间感。

技术拆解很干净：CSS scroll-driven animations驱动时间线，scale变换配合will-change属性优化，没有依赖任何外部库。Stumpel在博客补充说明，这个效果的灵感来自老式幻灯机的变焦镜头，但用Web技术复刻时，发现浏览器的合成器层机制反而让实现更简单。

她半开玩笑地标注："此创意开放偷师，但建议改个颜色，免得被一眼认出。"

色彩流动的数学： sibling-index()函数首次实战

Many Nicole的SVG作品，展示了CSS Color Module Level 5的两个新成员：相对颜色语法和sibling-index()函数。

相对颜色允许基于现有色值进行计算，比如"把主色的亮度提高20%"；sibling-index()则能获取元素在同辈中的序号，用来生成渐变序列。两者结合，一行代码就能让SVG路径的色彩自动流动起来，无需为每个节点手写色值。

这个Demo的代码量极小，但依赖的浏览器特性很新。Nicole在描述里加了兼容性提示：Firefox目前不支持sibling-index()，Safari需要最新技术预览版。

它更像是一份"未来代码"的样本——现在跑不起来没关系，先存着，等生态跟上。

P5.js的温柔入门：一条彩带的参数实验

Margarita的彩带动画，被不少教育者转发作为P5.js的教学案例。页面顶部暴露了一排滑块：控制节点数量、波动幅度、色彩周期、运动速度。

调整参数的过程，本质上是在直观感受算法变量的作用。把"振幅"拉到最大，彩带变成狂暴的鞭子；关掉"色彩循环"，画面退化为灰度丝带。没有教程文字，但比多数文档都有效。

这种"可玩性优先"的设计，降低了创意编程的门槛。用户先被视觉效果吸引，再主动探索背后的逻辑，学习路径比传统教程自然得多。

红蓝对抗：一个CodePen挑战赛的解题思路

Shivani的"相反方向"参赛作品，把主题具象化为两队小人的推搡。青色队和品红队从对角出发，在画面中央碰撞，个体被弹开后重新组织攻势，直到一方突破防线抵达对方腹地。

动画没有预设胜负，每次刷新都是随机演算。观看者会不自觉地站队，猜测哪边能赢——这种情感卷入，让一个简单的技术Demo有了游戏般的吸引力。

代码层面，Shivani用了CSS变量控制队伍属性，JavaScript处理碰撞检测和状态切换。性能优化做得克制：小人数量控制在30个以内，移动用transform而非left/top，确保移动端也能流畅运行。

CSS条件语句：if()函数的实用手册

Rob的教程页面，聚焦CSS Values Module Level 5的if()函数。这个特性允许在样式表里写内联条件，比如"如果容器宽度大于400px，则应用A样式，否则应用B样式"。

以前这类逻辑必须交给JavaScript或预处理工具，现在原生CSS就能处理简单分支。Rob设计了渐进式的学习路径：先看基础语法，再研究嵌套条件，最后用交互测验检验理解。

测验环节的设计很"产品经理"——答错不显示红叉，而是弹出解释框，把错误选项对应的常见误解逐个拆解。

这十个Demo散落在CodePen的各个角落，没有统一的发布节奏，也不属于某个官方项目。但把它们放在一起看，能拼出一幅前端技术的即时快照：浏览器在补全企业场景的短板，CSS在蚕食原本属于JavaScript的地盘，而"好玩"这件事，始终是驱动开发者折腾的第一动力。

最后一个问题留给看完的你：如果让你选，你愿意用"水果射击"选单填一次报名表，还是继续面对浏览器那个万年不变的灰框框？