知鸦日报2025-10-13

CSS颜色处理近年来迎来多项更新，开发者无需掌握设计技能也能受益。现代CSS支持更简洁的颜色语法，如省略rgba()中的a，采用空格分隔的新写法，并引入相对颜色功能，基于已有颜色生成新颜色。此外，light-dark()函数简化了明暗主题切换，color()函数支持更广色域，linear-gradient()允许指定色彩空间，提升渐变效果。这些改进让开发者能更高效地处理颜色，即使仅复制粘贴也能享受到新特性带来的便利。

本文教你如何结合GSAP与自定义着色器为WebGL项目添加动感和交互性。从创建简单WebGL场景开始，逐步实现高级交互效果，包括点击反应的水波纹、滚动拖拽的动态模糊等。通过GSAP时间线与着色器参数连接，打造流畅的视觉效果，最终形成一个可滚动的动画轮播。适合开发沉浸式网页体验的开发者参考。

stretch是Chromium浏览器2025年推出的CSS关键词，用于width和height等属性，替代了非标准的-webkit-fill-available和-moz-available。它类似于100%，但忽略padding，直接匹配包含块的尺寸。虽然box-sizing: border-box也能实现类似效果，但stretch更简洁且支持动画过渡。目前仅Chromium浏览器支持，可通过@supports规则兼容其他浏览器。这一功能虽小，却极大提升了开发体验。

JavaScript在ES2024中引入了Object.groupBy()和Map.groupBy()，简化了数组分组操作。Object.groupBy()返回普通对象，适合字符串键和JSON序列化；Map.groupBy()返回Map，支持非字符串键并保持插入顺序。两者都通过回调函数生成分组键，取代了复杂的reduce()逻辑，使代码更简洁易读。Object.groupBy()键始终为字符串，而Map.groupBy()不适用于JSON序列化。现代浏览器和Node.js 21+已支持这些方法。

CSS新特性anchor positioning让元素定位更灵活！现在不仅能将工具提示固定在锚点元素上，还能确保它始终可见。更酷的是，工具提示的小尾巴也能自动调整指向锚点。代码示例展示了如何用CSS实现这一效果，包括定位逻辑和三角形箭头的动态计算。文末还附赠可交互演示，拖动锚点就能看到工具提示的智能跟随效果，调试模式还能看透其中的布局玄机~

产品设计中，用户快速决策是提升竞争力的关键。通过紧迫感、默认选项、缩短路径、实时反馈和信息简洁等设计元素，降低认知负荷，加速决策。具体设计原则包括增加紧迫感、使用默认选项和一键操作、缩短操作路径、实时反馈和信息分步呈现。这些策略帮助用户在最短时间内做出最佳选择，提升用户体验。

AI代理正从浅层架构向深层架构演变。浅层代理依赖单一循环，处理简单任务尚可，但面对复杂多步骤任务时，常因上下文溢出、目标丢失等问题失效。深层代理引入四大支柱：显式规划、子代理分层、持久内存和极致上下文工程，通过分离计划与执行、管理外部记忆和精细化指令，解决复杂任务。这一架构升级使AI代理从被动反应转向主动规划，大幅提升处理能力。

本文讲解了如何对多边线进行光滑处理，核心是将多边线的角点转换为圆弧。通过两条线段相交处的圆角算法，扩展到多边线场景，确定圆角半径的最大值并平分空间。文章还提供了核心算法和完整代码实现，展示了多边线光滑化的效果，并附上线上demo供读者实践。