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 作用范围的重要性。

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 动画实现平滑的旋转效果，确保各色段始终保持等分且分隔线垂直于边框。

AI 摘要：本文是 Node.js 核心贡献者 Joyee Cheung 关于 require(esm) 功能实现细节的深度解析。文章聚焦于该功能在落地过程中，为兼容现有生态系统而必须解决的几个关键互操作性问题：包括如何处理“伪 ESM (faux-ESM)”包的 __esModule 标记、如何通过特殊导出 "module.exports" 支持非对象字面量的 CommonJS 导出、如何引入 "module-sync" 导出条件来支持双包 (dual package) 的平滑迁移，以及如何通过 process.getBuiltinModule() 避免不必要的顶层 await。文章揭示了看似简单的功能背后，为保持生态稳定性和性能所付出的复杂工程努力，并强调了社区协作在推动此类停滞计划中的关键作用。

1. 伪 ESM (Faux-ESM) 的兼容性挑战
• 问题根源：许多为浏览器打包的库在 Node.js 端发布的是转译后的 CommonJS 代码（即“伪 ESM”），它们依赖 __esModule 标记来模拟 ESM 的命名空间行为。
• 兼容性断裂：如果这些包直接迁移到纯 ESM，其现有的转译后消费者通过 require() 加载时将因缺少 __esModule 标记而中断。
• 解决方案评估与选择：在无法直接修改不可变的模块命名空间对象的前提下，评估了多种方案（对象拷贝、Proxy、原型继承、ESM 门面模块），最终选择了通过创建一个内部 ESM 门面模块（使用 export * from 并额外导出 __esModule）的方案，以在保证正确性（保持实时绑定、身份和可枚举性）的同时，将性能开销降至最低（约 2-4%）。

2. CommonJS 特殊导出模式的兼容
• 导出形状不匹配：CommonJS 允许 module.exports 被重新赋值为任何值（如一个类），而 ESM 的默认导出位于命名空间的 default 属性下，这导致迁移后 CommonJS 消费者无法正确获取导出值。
• 特殊导出方案：引入了名为 "module.exports" 的字符串字面量特殊导出。ESM 模块可以通过 export { Klass as "module.exports" } 来显式指定 require(esm) 应返回的值，从而无缝兼容旧的 CommonJS 消费者，而无需改变 ESM 消费者的导入方式。

3. 双包 (Dual Package) 的迁移路径
• 条件导出的演进：为了在支持旧版 Node.js（仅 CommonJS）的同时，为新版 Node.js 提供 ESM，包作者曾使用 "node" 条件指向 CommonJS。
• 新条件的引入：由于生态中已有的 "module" 条件常指向无法在 Node.js 直接运行的打包后代码，Node.js 引入了新的 "module-sync" 条件，专门用于指向可在 Node.js 中同步加载的 ESM 源文件，作为向纯 ESM 包过渡的临时方案。

4. 同步内置模块检测
• 问题背景：在 ESM 中动态检测内置模块（如 node:os ）过去只能通过异步的 import() 实现，这迫使代码使用顶层 await。
• 同步 API 的引入：为解决此问题并方便工具链（如 TypeScript），Node.js 引入了 process.getBuiltinModule() 这个同步 API，允许在 ESM 中同步获取内置模块引用，减少了对顶层 await 的依赖。

5. 底层实现与同步化
• 概念模型：require(esm) 的简化逻辑是同步地获取、链接、评估 ESM 模块，然后返回其命名空间。
• 同步化重构：实际的挑战在于与异步 import 共享的模块缓存和加载流程可能引发竞态条件。随着 Node.js 生态对同步模块加载的坚定依赖，原先为未来异步扩展设计的加载器例程被简化为完全同步，这既消除了竞态，也移除了不必要的异步开销。

6. 模块评估的可重入性保障
• 规范限制：ECMAScript 规范规定，一个正在评估中的 ESM 模块不能被再次评估。
• 循环依赖处理：当模块依赖循环跨越 ESM 和 CommonJS 边界时，Node.js 通过检测并抛出 ERR_REQUIRE_CYCLE_MODULE 错误来防止违规的重入评估。未来的 “Deferring Module Evaluation” 提案可能允许安全地跳过同步重入评估，从而支持此类循环。