AI 摘要：本文作者 Pablo Stanley 分享了他如何开发 Efecto 应用，在网络上实时实现图像抖动（dithering）和 ASCII 艺术效果，并结合 WebGL 着色器（shaders）模拟 CRT 显示器视觉效果的经验。文章详细介绍了抖动算法（如 Floyd-Steinberg、Atkinson 等）的原理与代码实现，多色调色板的应用，以及如何通过数学函数在着色器中绘制 ASCII 字符。此外，还探讨了扫描线（scanlines）、屏幕曲率（screen curvature）、色差（chromatic aberration）等 CRT 特效的实现，并讨论了 CPU 和 GPU 在这些效果实现中的分工，最后总结了从历史算法到现代 Web 开发的宝贵经验。

Efecto

Efecto - Free ASCII Art & Dithering Effects Tool

Transform 3D models, videos, and images with ASCII art, dithering, and halftone effects in real-time.

AI 摘要：文章探讨了新兴的 Web Install API，该 API 已在 Chromium 浏览器中进入原生试用 (Origin Trial) 阶段，并在 Microsoft Edge beta 版中展现出最完整的功能。此 API 的核心目标是民主化和去中心化网络应用的获取方式，允许网站通过简单的按钮点击直接安装 PWA (Progressive Web Apps)。虽然该 API 有望获得跨浏览器兴趣，但 Safari 可能由于其已有的“添加到 Dock (Add to Dock)”功能而成为推广的挑战。文章还简要提及了 Service Worker 技术的重要性，强调其在实现离线功能和缓存控制方面的强大作用。

Frontend Masters

A first look at the Web Install API

Bruce Lawson:

SkyWT(@skywt2003): 求教，那些看起来很漂亮的渐变背景都是怎么做出来的？
为什么我随便画几个几何图形叠加模糊，就没那么好看

Huazi(@HeyHuazi): 用现成的😂 来一些周刊提到过的
https://grainient.supply
https://patterncraft.fun
https://fffuel.co
https://uvcanvas.com/docs/components

Corey Chiu(@realcoreychiu): http://gradientshub.com 直接抄

grainient.supply

1000+ Gradients and AI-Generated Backgrounds

Grainient offers 1000+ awesome gradients, noisy textured, and AI-generated backgrounds. Subscribe for unlimited downloads and elevate your designs with our premium collection.

AI 摘要：文章深入探讨了 !important 在 CSS 自定义属性 (CSS Custom Properties) 中的行为，纠正了一个常见误解：当声明 —color: orange !important; 时，!important 修饰的是整个声明的优先级，而不是成为自定义属性 —color 值的一部分。这意味着自定义属性的值仍然是 orange，但该声明因 !important 而具有最高优先级，能够覆盖其他 CSS 规则的特异性 (specificity) 和源顺序 (source order)。通过一个具体示例，文章清晰地展示了这种行为如何导致预期之外的样式结果，强调了理解 !important 作用范围的重要性。

Frontend Masters

!important and CSS Custom Properties

This just bit me the other day so I’m going to write it down. Again, as it’s surprised me before. I just think I can maybe explain it even more clearly this time.

AI 摘要：这篇文章作为 2025 年末的 CSS-Tricks 双周回顾，总结了 CSS 领域在过去两周内的重要进展与趋势，并展望了 2026 年。内容涵盖了条件视图转换 (Conditional View Transitions) 等新兴 CSS 功能、设计系统组件可访问性 (accessibility) 标注的最佳实践、使用 CSS 和 SVG 创建卡通风格文本效果的技术，以及 Firefox 浏览器关于 AI 功能的争议。此外，文章还精选了 Bluesky 社区中关于高级 CSS 技巧和浏览器互操作性 (Interop) 项目的精彩讨论。

1. 新特性与前沿技术
• 条件视图转换 (Conditional View Transitions)：介绍了基于 URL 或 JavaScript 逻辑触发不同页面视图转换 (view transitions) 的方法，并提到了 CSS 未来可能支持导航匹配。
• CSS 与 SVG 文本效果：展示了如何利用 paint-order CSS 属性以及 SVG 技术创建类似卡通的文本效果，以及位移贴图文本效果的探索。
• Bluesky 上的高级 CSS 技巧：分享了结合 anchor positioning、attr()、container queries 和 shape() 等 CSS 功能实现的复杂效果。
• 互操作性项目 2026：强调了 Chrome、Firefox 和 Safari 之间在功能一致性方面的合作，并鼓励开发者为 Interop 2026 投票。

2. 开发实践与最佳规范 (Development Practices & Best Standards)
• 设计系统组件的可访问性标注：详细说明了如何为设计系统组件的 HTML、ARIA、键盘导航、缩放和用户偏好等方面添加详细的辅助功能注释。
• CSS 命名空间与语义化：讨论了为语义化类添加命名空间的好处，例如将 .btn 重命名为 .ui-button。
• 2025 年应学习的 CSS 特性回顾：回顾了年初推荐学习的 CSS 特性，并以 @property 为例进行自我评估。

3. 行业动态与社区洞察
• Firefox 的 AI 转型争议：报道了 Firefox 首席执行官宣布将其转型为“现代 AI 浏览器”引发的用户不满，以及 Mozilla 为此推出的“AI 停止开关”；并提及 Waterfox 作为 Firefox 的无 AI 分支。
• CSS 社区在 Bluesky 上的活跃度 ：肯定了 Bluesky 作为一个高质量开发者社区的价值，并引用了社区成员对 CSS 开发者辛勤工作的感谢。

CSS-Tricks

What’s !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More | CSS-Tricks

2026 is almost upon us. I know we’re all itching to see the clock strike midnight (cue The Final Countdown by Europe), but not without recapping the best CSS-related things that happened over the last two weeks!