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!

• 批量抓取功能 - 一次性抓取多个链接中的文档内容
• 可视化元素选择器，在页面上直接选择包含链接的区域
• 智能链接提取，自动识别并预览所有可抓取的链接
• 正则过滤 - 使用正则表达式精确筛选链接
• 匹配目标：URL / 文本 / 两者
• 过滤模式：排除匹配项 / 仅保留匹配项
• 8 个内置预设规则（排除图片、锚点、分页、登录注册、静态资源、媒体；仅保留文档、网页）
• 翻页抓取时自动应用相同的过滤规则
• 分页抓取 - 支持选择"下一页"按钮，自动翻页并收集所有链接
• 三种抓取策略：
• Fetch API：直接获取页面 HTML，速度快但无法处理 JS 渲染
• 后台标签页：在后台标签页中加载页面，支持 JS 渲染和登录态
• 当前标签页：在当前标签页中依次访问，用户可见整个过程
• 实时进度显示，支持暂停/继续/取消
• ZIP 导出 - 将所有抓取结果打包为 ZIP 文件，包含索引文件和单独的 Markdown 文档
• 内容提取功能 - 选择页面元素，提取其内容为多种格式
• 可视化元素选择器
• 多格式输出：HTML / Markdown / 纯文本
• 一键复制到剪贴板
• 模型选择改进，现在支持从 API 获取模型也支持自定义输入模型名称了。

AI 摘要：本文探讨了如何实现一个由等分彩虹色段组成的旋转边框效果。作者指出，当容器的宽高比远离正方形时，单纯使用 CSS 的 conic-gradient() 方法无法保持色段等分，且分隔线难以垂直于边框。因此，文章提出了更优的解决方案：使用 SVG 的 <rect> 元素来精确控制每个色段的形状和动画，从而获得更稳定、更完美的视觉效果。文末提供了可交互的在线演示。

1. 问题与挑战
• 传统 CSS conic-gradient() 方法在实现等分彩虹色段旋转边框时存在局限。
• 当元素宽高比非正方形时，conic-gradient() 无法保持色段大小相等。
• 该方法产生的色段分隔线无法始终垂直于边框，影响视觉效果。

2. 解决方案与技术实现
• 提出使用 SVG <rect> 元素作为更优的替代方案。
• SVG 方法可以精确控制每个色段的形状、大小和位置。
• 通过 SVG 动画实现平滑的旋转效果，确保各色段始终保持等分且分隔线垂直于边框。