#优质博文 #前端 #新动态 #Chrome #CSS
从 Chrome 145 开始，在满足特定条件时，100vw 终于能够自动减去滚动条宽度，解决了长期以来因视口单位导致的网页多余水平滚动问题。该改进同样适用于 vh（对应水平滚动条）以及视口单位的小、大、动态变体（sv*, lv*, dv*）
Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)

AI 摘要：本文介绍了 Chrome 145 及更高版本对 CSS 视口单位（Viewport Units，如 vw、vh ）的一项重大改进：当根元素 html 设置为 overflow: scroll 或 scrollbar-gutter: stable 时，100vw 会自动扣除滚动条所占的空间。这一改进通过 CSS 工作组（CSSWG）的决议，解决了传统 100vw 导致不必要水平溢出的顽疾，同时通过限制生效条件规避了布局死循环（Cycles）问题。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. 核心改进与生效条件
• Chrome 145+ 版本开始，视口单位将能够“感知”滚动条（Scrollbar-aware）。
• 只有在 html 元素上强制显示滚动条（overflow[-y]: scroll）或预留滚动条空间（scrollbar-gutter: stable）时，该特性才会生效。
• 该改进同样适用于 vh（对应水平滚动条）以及视口单位的小、大、动态变体（sv*, lv*, dv*）。

2. 视口单位的历史局限性
• 传统视口单位（Viewport Units）在计算时不考虑经典滚动条（Classic Scrollbars）的宽度。
• 设置 width: 100vw 时，其宽度包含滚动条，导致在有垂直滚动条的情况下，页面会出现不必要的水平滚动条。

3. 布局死循环（Cycles）的挑战
• 解释了为什么不能简单地在所有情况下减去滚动条宽度：这会导致“增加滚动条 -> 减小视口宽度 -> 内容重新布局 -> 滚动条消失”的死循环。
• 通过限制在滚动条“无条件存在”或“预留空间”的情况下生效，可以有效规避此循环。

4. 行业标准与 Web 兼容性
• 详细介绍了 CSS 工作组（CSSWG）关于此问题的讨论和决议历程。
• 引用 HTTP Archive 的数据分析，证明此项改动对现有网站的破坏性极低（仅约 0.0003% 的网站可能受到影响）。
• 强调了目前仅 Chromium 系浏览器支持此特性，尚无纯 CSS 的特性检测方法。

5. 最佳实践建议
• 建议开发者在 CSS Reset（样式重置）中为 html 根元素添加 scrollbar-gutter: stable。
• 相比 overflow-y: scroll，scrollbar-gutter: stable 可以在不强制显示滚动条背景的情况下激活“感知滚动条”的视口计算特性。

Bramus View more posts

Bram.us

Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)

From Chrome 145 onwards, 100vw will automatically subtract the size of the (vertical) scrollbar from it if you have forced the html element to always show a vertical scrollbar (using overflow[-y]: scroll) or if you reserve space for it (using scrollbar-gutter:…

#优质博文 #前端 #工程化 #Rolldown #Vite #新动态

Rolldown 正式发布 1.0 发布候选版本（RC），作为 Vite 未来的核心打包工具，它在保持 Rollup 兼容性的同时，凭借 Rust 实现了 10-30 倍的速度提升。此 RC 标志着 API 的稳定性。在 1.0 之前不会有任何破坏性改动。

Announcing Rolldown 1.0 RC

author VoidZero Team

void(0)

Announcing Rolldown 1.0 RC

Rolldown 1.0 RC is here: A Rust-powered bundler that combines the best features of prior tools with unmatched speed and compatibility

#优质博文 #JavaScript #前端 #新动态
jQuery 4.0.0：时隔近十年，jQuery 发布了 4.0.0 正式版，带来了大量现代化改进，包括移除对旧版浏览器（IE 10 及更早版本）的支持、引入新特性以及优化内部实现

AI 摘要：本文宣布了 jQuery 4.0.0 正式版的发布。恰逢 jQuery 诞生 20 周年，该版本移除了对 IE 10 及以下旧版浏览器的支持，将源码从 AMD 迁移至 ES Modules (ES 模块)，引入了 Trusted Types (可信类型) 以增强安全性，并清理了大量过时的 API 和内部方法。虽然包含一些重大变更，但团队提供了迁移指南和插件，旨在让大多数用户能平滑升级。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 社区动态与版本概览
• 庆祝 jQuery 诞生 20 周年（2006-2026）。
• 这是近 10 年来的首个主要版本，包含重大变更但尽量保持升级平滑。
• 提供 升级指南 和 jQuery Migrate 插件 协助过渡。

2. 浏览器支持变更
• 移除 IE 10 及更早版本的支持，计划在 jQuery 5.0 移除 IE 11。
• 移除 Edge Legacy (旧版 Edge)、旧版 iOS (11 以下)、Firefox (65 以下) 及 Android 浏览器支持。

3. 架构现代化与安全性
• 源码迁移：从 AMD 迁移至 ES Modules (ES 模块)，改用 Rollup 打包，兼容现代构建工具。
• 安全增强：支持 Trusted Types (可信类型)，确保符合 require-trusted-types-for 等 CSP (内容安全策略) 指令。
• 异步加载：大多数异步脚本请求改用 <script> 标签以避免 CSP 错误。

4. API 变更与瘦身
• 移除过时 API：删除了 jQuery.isArray, jQuery.trim, jQuery.now 等已有原生替代方案（如 Array.isArray, String.prototype.trim）的方法。
• 原型链清理：从 jQuery 原型中移除了本用于内部的数组方法（如 push, sort, splice）。
• 移除魔法行为：删除了部分未公开的内部参数和过于复杂的“神奇”行为，Gzip 压缩后的体积减小了约 3 KB。

5. 事件与规范对齐
• 事件顺序对齐：Focus (聚焦) 事件顺序现在遵循 W3C 规范（顺序为：blur, focusout, focus, focusin），不再覆盖原生行为。
• Slim Build (精简版) 优化：进一步移除了 Deferreds (延迟对象) 和 Callbacks，体积缩减至约 19.5 KB (Gzipped)。

6. Ajax 与功能增强
• 支持二进制数据：允许通过 Ajax 传输 FormData 等二进制数据。
• 脚本执行逻辑：除非明确提供 dataType，否则不再自动执行脚本；不执行失败的 HTTP 响应脚本。

Jquery

jQuery 4.0.0 | Official jQuery Blog

jQuery: The Write Less, Do More, JavaScript Library

#新动态 #Astro #Cloudflare #前端 #开源
好啊，Astro 被 Cloudflare 收购了。
The Astro Technology Company joins Cloudflare | Astro

AI 摘要：Astro 框架背后的公司 The Astro Technology Company 宣布加入 Cloudflare，此举旨在确保 Astro 能够获得充足资源并重新聚焦于核心框架的开发。Astro 将继续保持开源、MIT 许可，并支持所有部署目标，包括 Cloudflare 之外的平台。这次结合是基于双方对“内容驱动型网站 (content-driven websites)”未来发展的共同愿景，Cloudflare 提供基础设施支持，而 Astro 则专注于构建高效的框架，共同推动 Web 技术进步，并已将重心回归到 Astro 6 和未来路线图的开发中。

author Fred Schott

Astro

The Astro Technology Company joins Cloudflare | Astro

The Astro Technology Company is joining Cloudflare! Astro remains open-source, MIT-licensed, and platform-agnostic. With Cloudflare's support, we're focusing 100% on building the best framework for content-driven websites. Astro 6 beta is available now.

#优质博文 #Chrome #浏览器 #新动态
这个真的好耶！Chrome 145 实验性支持垂直标签页，2026 了 Chrome 终于把这个学过来了啊！
Chrome 145 adds Experimental Support for Vertical Tabs

AI 摘要：Chrome 145 引入了一项实验性功能——垂直标签页 (Vertical Tabs)，允许用户将浏览器标签页显示在侧边而非顶部。该功能目前处于 Beta 阶段，用户可以通过访问 chrome://flags/#vertical-tabs 启用相关旗标，重启浏览器后，再通过右键标签栏选择“Move Tabs To The Side”来激活，从而体验更高效的标签页管理，并且支持将侧边栏折叠。

以下是方便搜索索引的大纲(AI 生成)，请读原文：

1. Chrome 145 新功能介绍
• Chrome 145 实验性地增加了对垂直标签页 (Vertical Tabs) 的支持。
• 垂直标签页功能可以将标签页显示在浏览器侧边，而非传统顶部。
• 该功能还支持将标签栏折叠成最小形式，以节省屏幕空间。
2. 垂直标签页的启用步骤
• 用户需首先在 Chrome 145 (当前 Beta 版) 中启用一个功能旗标 (feature flag)。
• 具体步骤包括导航至 chrome://flags/#vertical-tabs。
• 将该旗标的下拉菜单设置为“Enabled”。
• 重启 Chrome 浏览器。
• 右键点击标签栏，并选择“Move Tabs To The Side”以应用垂直标签页布局。

author Bramus!

Bram.us

Chrome 145 adds Experimental Support for Vertical Tabs

Vertical Tabs are available behind a flag in Chrome 145 (current beta)

#Vite #前端 #新动态
What’s New in ViteLand: December 2025 Recap

AI 摘要：本文总结了 ViteLand 生态在 2025 年 12 月的主要更新和社区动态，重点介绍了 Oxc 在代码校验和格式化方面的显著性能提升，以及 Vite、Vitest、Rolldown 各自的项目进展。同时，文章还预告了即将举行的相关技术活动，并展示了社区中涌现出的基于 ViteLand 工具的创新项目和迁移案例，表明整个生态正朝着更快速、更统一的方向发展。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. Oxc 的性能突破
• Oxlint 和 Oxfmt 在代码校验和格式化方面提供比 ESLint 和 Prettier 更快的速度（分别快 50-100 倍和 30 倍）
• Oxlint 已推出 1.0 版本，并新增了类型感知校验（type-aware linting）和兼容 ESLint 的 JS 插件
• Oxfmt 新增了对嵌入式语言和实验性导入排序的支持
• Bun、Vue、Preact、date-fns、Inquirer.js、Shopify、Miro、Airbnb 等多个项目已迁移至 Oxc
• Oxc 团队计划在 2026 年推出对动态配置（dynamic configs）的支持
• Oxc 在性能优化方面持续投入，实现了语义分析性能的提升

2. Vite 项目更新
• 发布了多个 Vite 8 beta 版本，修复了 bug 并提升了稳定性
• Vite 8 beta 提供了第二版原生插件（native plugins），改进了动态导入（dynamic import）和导入 glob（import glob）插件的对齐

3. Vitest 项目更新
• 新增实验性的 OpenTelemetry 支持，用于分析测试性能瓶颈
• Vitest UI、CLI 和 VS Code 扩展支持分析和分解导入，识别减慢测试速度的依赖
• 支持通过 experimental.fsCache 缓存转换后的文件，加速后续测试运行

4. Rolldown 项目更新
• 支持通过手动指定 tsconfig 来使用 TypeScript 项目引用（TypeScript project references）
• 优化了默认的代码块（chunking）算法，减少了生成的代码块数量
• 提供了 postBanner 和 postFooter 选项，用于在打包后的代码前后追加内容
• 插件的 resolveId 钩子支持通过 importerId 进行过滤，提高性能

5. 社区动态与合作
• Framer 发布了关于使用 Rolldown 改进性能的案例研究
• TypeScript.fm 和 Syntax.fm 播客讨论了 ViteLand 项目的更新和发展预测
• Ninja Squad 撰写了关于使用 Vitest 浏览器模式测试 Angular 的文章
• 社区涌现出多个基于 Oxc 和 Rolldown 的新工具和迁移案例，如：
• oxlint-plugin-complexity：用于校验代码复杂度的 Oxlint 插件
• Roll(down)phobia：基于 Rolldown 的包大小分析工具
• RSC Explorer：使用 Vite 8 和 Rolldown 构建的 RSC（React Server Components）工具
• Facetpack：使用 Oxc 替换 Babel 的 React Native 工具。
• MonkeyType：迁移到 Oxlint 以获得更快的类型感知校验速度
• create-better-t-stack：从 Biome 迁移到 Oxlint 和 Oxfmt
• Ultracite：提供基于 Oxc 的预设配置
• rollipop：完全基于 Rolldown 的 React Native 构建工具

author Alexander Lichter

void(0)

What’s New in ViteLand: December 2025 Recap

Our December 2025 recap features big Oxc releases: Oxfmt alpha builds and Oxlint's type-aware linting alpha, plus updates across Vite, Vitest, Rolldown, and community highlights.

#优质博文 #前端 #CSS #浏览器 #新动态
What's new in DevTools, Chrome 144

AI 摘要：Chrome 144 的 DevTools 发布包括 DevTools MCP 服务器更新（支持复用浏览器会话的 auto connection）、Network 面板重命名为 Request Conditions 并新增对单个请求的节流（throttling）、在 Styles 面板中可编辑 @font-face 与 @font-feature-values、以及 Elements 面板下在 shadow root 与 document root 可见 adopted stylesheets；文章同时回顾了 2025 年 DevTools 在 AI 助手、性能面板重构与 Web 平台调试工具方面的一系列改进，并提供了预览版本与反馈渠道信息。

author Matthias Rohmer

Chrome for Developers

What's new in DevTools, Chrome 144  |  Blog  |  Chrome for Developers

Chrome DevTools MCP server, individual request throttling, adopted stylesheets and 2025 highlights.

#优质博文 #前端 #新动态 #PWA #浏览器
A first look at the Web Install API
ref: The Web Install API is ready for testing

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

author Chris Coyier

Frontend Masters

A first look at the Web Install API

Bruce Lawson:

#优质博文 #CSS #前端 #新动态
What’s !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More | CSS-Tricks

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

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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 开发者辛勤工作的感谢。

author Daniel Schwarz

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!

#优质博文 #css #可视化 #AI #前端 #新动态
经群友提醒想起来看到了这个，打不过就加入。
蚂蚁集团 AntV 团队推出新一代声明式信息图表（Infographic）生成与渲染框架，旨在通过 AI 驱动让数据叙事更简单。
GitHub： antvis/Infographic
官网： https://infographic.antv.vision/ai/

AI 摘要：AntV Infographic 是一个专为 AI 时代设计的声明式信息图表渲染引擎。它采用简洁的声明式语法，支持 AI 流式输出（Streaming Output）与实时渲染，并内置了超过 200 种信息图表模板、组件和布局。该框架不仅提供高质量的 SVG 输出，还拥有丰富的主题系统（包括手绘风和渐变色）以及配套的在线编辑器，极大提升了信息展示的效率，让开发者和 AI 能够更轻松地创作专业级别的数据故事。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心特性（Core Features）
• AI 友好（AI-friendly）：语法与配置专为 AI 生成进行了优化，提供简洁的提示词（Prompts），并支持 AI 流式输出的即时渲染。
• 开箱即用（Ready to use）：内置约 200 个信息图表模板、数据项组件和布局方案，可快速构建专业作品。
• 主题系统（Theme system）：支持手绘、渐变、图案等多种预设主题，并允许深度自定义。
• 内置编辑器（Built-in editor）：提供可视化编辑器，方便对 AI 生成的结果进行二次微调。
• 高质量 SVG 输出：默认采用 SVG 渲染，确保视觉保真度且易于后期编辑。

2. 快速上手与集成（Installation & Quick Start）
• 通过 NPM 轻松安装：使用 npm install @antv/infographic 即可引入项目。
• 声明式语法：演示了如何通过简单的配置项和类 YAML 的文本语法快速渲染出一个带箭头的步骤列表图。
• 极简 API 设计：通过 new Infographic() 实例化并调用 render() 方法即可完成渲染。

3. 流式渲染技术（Streaming Rendering）
• 高容错语法：设计了具备高容错性的信息图表语法，即使在 AI 文本生成的过程中也能实时解析。
• 动态预览：支持将 AI 输出的每个片段（Chunks）实时渲染到界面上，提供丝滑的生成体验。

4. 社区动态与许可（Community & License）
• 社区交流：鼓励通过 GitHub Discussions 和 Issues 进行交流反馈。
• 开源协议：项目采用 MIT 协议开源。

GitHub

GitHub - antvis/Infographic: 🦋 An Infographic Generation and Rendering Framework, bring words to life with AI!

🦋 An Infographic Generation and Rendering Framework, bring words to life with AI! - antvis/Infographic

#优质博文 #React #前端 #新动态
Waku 1.0 (alpha) — Waku

AI 摘要：Waku 是一个专注于静态与动态混合渲染的 React 框架，现已发布 1.0-alpha 版本并标记公共 API 为稳定状态。该框架特别适合构建营销网站、博客、文档站和轻量级电商等大部分静态内容但包含少量动态路由的场景。Waku 提供灵活的路由配置方式（文件路由和配置路由），支持在布局、切片和页面级别独立设置渲染配置，可实现静态渲染、动态渲染或混合渲染。团队后续将专注于 bug 修复和兼容性改进，并为每个版本提供发布说明和迁移指南。

Waku

Waku 1.0 (alpha) — Waku

Waku's public APIs are now marked as stable.

#优质博文 #前端 #性能优化 #调试 #新动态
Chrome DevTools 144 版本可以让你单独对每个网络请求限速。
Throttle individual network requests

AI 摘要：Chrome DevTools 在 144 版本中引入了“Individual Request Throttling”功能，允许开发者为单个网络请求设置独立的限速（throttling）或阻断（blocking）条件。这一改进使得在不影响整个页面加载速度的情况下，测试特定资源（如第三方 API 或大型图片）在慢速网络条件下的表现成为可能。新功能整合在“Request conditions”面板中，用户可以自定义限速模式和 URL 匹配规则，并清晰地在“Network”和“Performance”面板中识别被限速或阻断的请求，从而更精准高效地进行前端性能调试。

Chrome for Developers

Throttle individual network requests  |  Blog  |  Chrome for Developers

Use the Request conditions tab to block specific URLs or apply custom network throttling profiles to individual resources.

#前端 #新动态 #标准化
Vote for the web features you want to see | web.dev：现在，你可以通过点赞 (upvote) 来影响你最想看到的 Web 特性啦！
WebDX 社区组织推出了一项新功能，允许开发者直接通过“点赞 (upvote)”来表达对特定 Web 特性的需求，以帮助浏览器厂商优先考虑开发。虽然点赞多不代表直接采纳，但开发者的需求将成为浏览器厂商决策的重要参考因素。

web.dev

Vote for the web features you want to see  |  Blog  |  web.dev

Have you ever wished you could just poke the browser vendors and say, "Hey, I need this!"? Well, now you can.

#新动态 #前端 #播客
微软推出 VS Code Insiders 播客：由 Visual Studio Code 官方团队打造，深度访谈开发者、产品经理以及社区贡献者，解密新特性、实验工具和 AI 驱动的工作流。

想知道世界上最受欢迎的代码编辑器背后究竟发生了什么吗？ VS Code Insiders Podcast 将为你揭开神秘面纱，带你深入了解塑造 Visual Studio Code 未来的功能、决策和人员。

Visualstudio

Introducing the VS Code Insiders Podcast

The VS Code Insiders Podcast is your insider's guide to the features, decisions, and people shaping the future of Visual Studio Code.

#前端 #新动态 #shadcn #组件库
shadcn 推出 shadcn/create，可以打造专属的 shadcn/ui
立即体验：访问 https://ui.shadcn.com/ 点击 +新建项目

https://fixupx.com/i/status/1999530424234643716

shadcn (@shadcn)：隆重推出 shadcn/create – 打造专属的 shadcn/ui
全面定制。自由选择组件库、图标、底色、主题、字体，打造与众不同的视觉体验。
现已支持 Next.js、Vite、TanStack Start 及 v0 版本。

从最初的提交开始，shadcn/ui 的目标就是为您提供可靠的默认设置：间距、颜色标记、动画效果、无障碍支持，让您在此基础上自由发挥。
调整代码。添加新组件。更改颜色。
借助 npx shadcn create，这一切变得更加轻松。
从组件库开始：Radix 或 Base UI。
我们为Base UI重构了所有组件，保留相同抽象层级。它们与现有组件完全兼容，甚至支持远程注册库中的组件。
添加组件时，我们会自动检测库类型并应用对应转换规则。
同时新增5种视觉风格，助您打造独特设计：
1. Vega——经典shadcn/ui风格
2. Nova——紧凑布局的缩减间距
3. Maia——柔和圆润，间距充裕。
4. Lyra——方正锐利，与单线字体完美搭配。
5. Mira——紧凑型，专为高密度界面设计。
这远不止主题切换。
您的配置不仅改变颜色，更会重写组件代码以匹配设置。字体、间距、结构乃至所用库，一切皆可适配您的偏好。
全新命令行工具将自动完成所有配置。
立即体验：访问 https://ui.shadcn.com/ 点击 +新建项目
特别鸣谢 @base_ui 团队打造的卓越组件库。他们的成果让我们得以在保持抽象层完整的前提下轻松构建所有内容。意义重大。

Shadcn

The Foundation for your Design System - shadcn/ui

A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

#趣站 #CSS #WebGL #前端 #新动态 #动画
Shopify Editions Winter 2026

这是每半年固定发布，用于介绍 Shopify 又做了哪些功能更新的网站！之前是 summer2025 网站。

性能和兼容性可能相对一般，但做了完整的移动端适配，纯炫技网页，浓缩了超多细节和彩蛋和 CSS 新特性。

彩蛋 1：点击钥匙，会弹出一个新的无边框窗口来进行解锁。应该用到了跨窗口通信

以前有一个类似的尝试用 three.js 实现了这个跨窗口的粒子动画有用到这个类似的场景，我猜应该是和这个一个原理，GitHub 仓库

彩蛋2：解锁后这个窗口还能跟着原来的页面滚动。
彩蛋3：点击帽子

技术解析：

https://x.com/jh3yy/status/1999131244345405664
jhey ʕ•ᴥ•ʔ(@jh3yy)：今年的版本页面真是太棒了——有太多精彩的细节了 👨‍🍳

很荣幸能参与其中，团队表现出色 👏

除了令人惊叹的 WebGL 技术之外，还巧妙地运用了 CSS 容器查询、计数器、过渡/动画和 SVG！

Shopify

Shopify Editions | Winter '26

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.

#前端 #安全 #新动态 #React
React 在研究 React2Shell 过程中披露了两个新的 RSC 漏洞：CVE‑2025‑55184 与 CVE‑2025‑67779（高危 - 拒绝服务）以及 CVE‑2025‑55183（中危 - 源代码泄露）。这些缺陷可被恶意 HTTP 请求触发，导致服务器无限循环或泄露服务器函数内部代码。React 已在 19.0.3、19.1.4、19.2.3 版本中修复，受影响的框架与打包器（如 Next、React‑Router、Vite 等）亦需同步升级。

• 拒绝服务（高危）： CVE-2025-55184 与 CVE-2025-67779 (CVSS 7.5) 可被恶意 HTTP 请求触发，导致服务器无限循环
• 源代码暴露（中等）： CVE-2025-55183 (CVSS 5.3) 可能会泄露服务器函数内部代码，源代码中硬编码的 secret 可能会被暴露，运行时 secret 如 process.env.SECRET不受影响。

官方解释称：

重大漏洞披露后，往往会发现后续漏洞。当一个重大漏洞被披露后，研究人员会仔细检查相邻的代码路径，寻找变种的利用技术，以测试初始缓解措施是否可以被绕过。
这种模式在整个行业中普遍存在。例如，在 Log4Shell 之后，随着社区对原始修复程序的审查，又报告了其他 CVE。额外的披露可能会令人沮丧，但这通常是健康应对机制的标志。

只有源代码中的 secret 才能被泄露。
源代码中硬编码的 secret 可能会被暴露，但运行时 secret 如 process.env.SECRET不受影响。
暴露代码的范围仅限于服务器函数内部的代码，这可能包括其他功能，具体取决于捆绑器提供的内联支持程度。
一定要核对生产包。

https://nextjs.org/blog/security-update-2025-12-11

Next 用户可以使用 npx fix-react2shell-next 进行升级。

react.dev

Denial of Service and Source Code Exposure in React Server Components – React

The library for web and native user interfaces

#优质博文 #前端 #CSS #浏览器 #新动态
New in Chrome 143

AI 摘要：Chrome 143 正式发布，本次更新带来了对锚点定位元素（anchor positioned elements）的新式容器查询（anchored fallback container queries），改进了背景图像定位语法（side-relative background-position），并新增对 font-language-override 的支持，使开发者可精确控制字体替代语言标签。在提高 CSS 表现力的同时，也强化了排版的一致性与多语言支持。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. CSS 新特性
• Anchored fallback container queries：新增 @container anchored(fallback)，可基于元素定位的备用状态（position-try-fallbacks）设置不同样式，用于调整锚点元素的连线或动画表现。
• Side-relative background positioning：现在可在 background-position-x/y 长属性中直接使用相对边位置语法（如 left 30px、bottom 20px），提高图像定位灵活性，该特性现已进入 Baseline 新可用级别。
• Font language override：新增 font-language-override 属性，允许为 OpenType 字形替换指定自定义四字语言代码，从而覆盖系统语言设置，便于实现多语言、特殊字体排版控制。

2. 版本信息与资源链接
• 详细更新内容见 Chrome 143 release notes。
• 开发者工具更新详情：What's new in Chrome DevTools (143)。
• 功能状态更新在 ChromeStatus.com。
• Chrome release calendar 提供未来版本发布时间表。

3. 社区与后续更新
• 推荐订阅 Chrome Developers YouTube channel 获取最新视频提示。
• 关注 Chrome 团队在 X 或 LinkedIn 的最新发布。
• 官方将于 Chrome 144 发布时继续更新新功能说明。

author Rachel Andrew

Chrome for Developers

New in Chrome 143  |  Blog  |  Chrome for Developers

CSS anchored fallback container queries, side-relative positioning for background position longhands, and more.

#优质博文 #前端 #AI #工程化 #bun #新动态
Bun 被 Anthropic 收购。
Bun is joining Anthropic

AI 摘要：Bun 宣布被 Anthropic 收购，将作为 Claude Code、Claude Agent SDK 等产品的核心基础设施。Bun 保持开源与 MIT 许可证，团队与路线图不变，继续专注于高性能 JavaScript 工具和 Node.js 兼容性建设。此次加入为 Bun 带来长期稳定性与更充足资源，也让团队处于 AI 编码革命的前线，加速产品迭代，助力 AI 驱动的开发模式未来。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 加入 Anthropic 的背景与不变之处
• Anthropic 收购 Bun，旨在让其成为 Claude Code 与未来 AI 编程工具的运行基础。
• Bun 将继续开源（MIT 许可）、在 GitHub 公开开发，保持原团队管理与代码维护。
• 路线图不变，持续聚焦高性能 JavaScript 工具与 Node.js 替代能力。

2. 与 Anthropic 合作后的变化
• 更紧密参与 Claude Code 与 Claude Agent SDK 的性能优化，让工具更快更轻。
• 获得 AI 工具一手开发动态，Bun 能优先适配未来 AI 编程需求。
• 加速发布周期，强化生态深度。

3. Bun 的起源与演进
• 起点是开发浏览器 voxel 游戏时的性能瓶颈，促生对编译与运行时系统的探索。
• 从 esbuild 移植 JSX/TypeScript 编译器到 Zig，用 JavaScriptCore 构建自有运行时。
• 2022 年发布 Bun v0.1，集打包器、编译器、运行时、测试与包管理于一体。
• 后续版本：
• v1.0（2023 年）正式稳定，融资并扩张团队；
• v1.1 补齐 Windows 支持；
• v1.2 强化 Node.js 兼容与扩展数据库客户端；
• v1.3 加入前端开发服务器、Redis/MySQL 驱动，生产应用激增。

4. AI 编码工具的崛起与契合
• 2024 年后 AI 编码工具突飞猛进，Bun 的单文件可执行特性非常适合 CLI 与 Agent 分发。
• Claude Code、FactoryAI、OpenCode 等关键 AI 工具均基于 Bun。
• 团队自用 Claude Code 实现自动提交与错误修复，提升开发效率。

5. 可持续性与发展方向
• Bun 至今无直接营收，原计划构建云产品，但 AI 生态发展已重塑商业逻辑。
• 加入 Anthropic 避免了 VC 变现压力，转而获得长期稳定支持与核心地位。
• 与其在未来 AI 开发趋势之外摸索，不如进入中心参与制定。

6. 未来展望与愿景
• 目标成为 AI 时代的标准运行时，让 Bun 承载“AI 驱动软件开发”的基础层。
• Anthropic 为其提供长期资源、战略支持与招聘扩展。
• 持续对社区开放、保持 Node.js 兼容、加速工具链性能提升。
• 预期形态类似「Claude Code <> Bun」关系，类比于「Chrome <> V8」等组合。

author Jarred Sumner

Bun

Bun is joining Anthropic

Bun has been acquired by Anthropic. Anthropic is betting on Bun as the infrastructure powering Claude Code, Claude Agent SDK, and future AI coding products & tools.

#优质博文 #webgpu #前端 #浏览器 #新动态
WebGPU 现在也是全面支持了，但是 Safari 是 iOS 26 才支持，而且 Safari 移动端给的显存嘛……少少的。

WebGPU is now supported in major browsers

AI 摘要：文章宣布 WebGPU 正式在 Chrome、Edge、Firefox 与 Safari 上全面支持，这标志着网页端高性能计算和 3D 图形的新时代。WebGPU 不仅替代 WebGL，更在性能与设计层面跃升，支持现代 GPU 功能、Compute Pipeline（通用计算管线）和 Render Bundles（渲染指令集复用）等特性，为游戏、AI 推理、视频处理和物理仿真提供桌面级性能。文章还介绍了各浏览器与操作系统的支持情况以及生态圈的成熟度，包括 Babylon.js、Three.js、ONNX Runtime、Transformers.js 等框架的支持，并感谢各大公司与开发者的多年协作。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. WebGPU 的意义与特性
• WebGPU 是 WebGL 的继任者，提供更现代、更高效的 GPU 接口。
• 设计包含符合 JavaScript 习惯的 API 与现代着色语言（Shader Language）。
• 支持 Compute Pipeline，让网页端可以执行机器学习推理、模型训练、视频处理等高性能任务。
• Render Bundles 能记录并重用渲染命令，提高性能、降低 CPU 开销。
• 示例：Babylon.js 的 Snapshot Rendering 通过 Render Bundles 提升渲染性能约 10 倍。

2. 浏览器与系统支持现状
• Chrome / Edge：在 Windows（Direct3D 12）、macOS、ChromeOS 自 v113 起支持；Android 自 v121 起支持。
• Firefox：Windows 自 v141 起支持，macOS ARM64 自 v145 起支持。
• Safari：在 macOS、iOS、iPadOS、visionOS 的版本 26 中支持。
• Linux、Android 及部分平台的支持仍在持续开发中，可查看 Implementation Status。

3. WebGPU 生态系统的成长
• 主流框架已支持 WebGPU，包括 Babylon.js、Three.js、PlayCanvas、ONNX Runtime、Transformers.js、React Native WebGPU、TypeGPU、Unity WebGPU。
• 底层引擎如 Dawn (Chromium) 与 wgpu (Firefox) 可独立使用，方便跨平台开发。
• 借助 WebAssembly (Wasm)、Emscripten、Rust web-sys 等工具，可将原生 GPU 应用移植至 Web。

4. 致谢与社区协作
• WebGPU 的成功来自 W3C GPU for the Web Working Group 的多年协作。
• 感谢多家公司与贡献者，包括 Apple、Google、Intel、Microsoft、Mozilla 等。
• 特别致谢开发者 Corentin Wallez、Ken Russell、Thomas Lucchini 等。

author François Beaufort

web.dev

WebGPU is now supported in major browsers  |  Blog  |  web.dev

Read about the biggest web graphics launch since WebGL. WebGPU is supported across major browsers, bringing unparalleled performance to the web.