FE Bits Vol.30 | TypeScript 6.0 与 Next.js 16.2 发布、Safari 26.4 新特性

今天是 2026 年 3 月 29 日，星期日。

个人动态

首先是我的年终总结终于憋出来了

• 2025，说走就走的旅行记录：年终总结中的游记部分拆分发布，记录 2025 年旅行足迹
• 2025，跳出舒适圈的一年：关于抑郁、成长与记录的个人年终总结

然后是一些碎碎念：

• B 站视频《全！修！耗时两月用 AI 动画原创我推的孩子完美结局》分享

对的对的，这就是 AI 的正确用法，AI 就是用来补足遗憾的呜呜呜

bilibili.com

全！修！耗时两月用AI动画原创我推的孩子完美结局 从爱开始的故事，就用爱结束吧！_哔哩哔哩_bilibili

全！修！耗时两月用AI动画原创我推的孩子完美结局 从爱开始的故事，就用爱结束吧！共计2条视频，包括：正片、未后期处理的小彩蛋：aieeeeeee，露比？！露比为何？！等，UP主更多精彩视频，请关注UP账号。

https://www.bilibili.com/video/av116286709307444

• 爱酱日常 - 主动 push 妹妹学习

• 妲喵一翻出了马克笔就搁这儿 cosplay 苹果呢（乐呵）看到门上写了个这个莫名其妙好笑

这期依旧短短的～

社区动态

• TypeScript 6.0 正式发布：作为连接 5.9 与 7.0（Go 语言重写版）的过渡版本，带来配置默认值更新、实用新特性及多项弃用警告

• Next.js 16.2 发布跨平台 Adapter API：引入稳定的 Adapter API，与 OpenNext、Netlify、Cloudflare 等平台合作，解决多平台部署兼容性问题

• Safari 26.4 发布，支持 CSS Grid Lanes 与 WebTransport：带来 44 项新特性与 191 项修复，核心亮点包括 CSS Grid Lanes 瀑布流布局、WebTransport 低延迟通信协议及 Keyboard Lock API

• X 上的 Cheng Lou：“My dear front-end developers……”：Cheng Lou 发布了一个纯 TypeScript 实现的、用户态（userland）、快速、准确且全面的文本测量算法，旨在彻底变革 Web UI 布局，摆脱对 CSS 和 DOM 测量的依赖，从而解锁更高效、更复杂的界面设计。

  • 项目代码已在 GitHub 上开源 chenglou/pretext
  • 一个非常有趣的书记舞示例：finally the web has become interesting again

文章

• New to the web platform in March：2026 年 3 月 Web 平台新功能概览，涵盖 Chrome 146、Firefox 149、Safari 26.4 的最新更新，包括 CSS 滚动触发动画、Grid Lanes、JS Iterator.concat 与 CloseWatcher 等

• 纯 CSS 实现双圆动态连线与距离计算：利用 CSS Anchor Positioning、三角函数与容器查询实现双圆动态连线与距离计算的纯 CSS 解决方案

• Shadow DOM Focus Delegation 正确使用指南：深入探讨 Web Components 中 delegatesFocus 属性的作用与最佳实践

• 可滚动容器内下拉菜单失效问题解析与修复：解析下拉菜单在可滚动容器中失效的根本原因，并提供 Portal、Anchor Positioning、Popover API 等多种解决方案

• 理解债：AI 生成代码的隐性成本：探讨过度依赖 AI 生成代码所带来的理解债，强调人类对系统深层理解的重要性

• React 设计选择背后的深层约束：SolidJS 作者 Ryan Carniato 揭示 React 延迟状态提交与 Effect 依赖数组设计背后的异步约束本质

• When All You Can Do Is All or Nothing, Do Nothing – CSS Wizardry：在无法精准判断优化条件时，对于 loading=lazy 和 fetchpriority=high 等性能提示，选择不作为（Do Nothing）往往是更安全和更优的选择。

• Iterator.concat：Chrome 146 与 Safari 26.4 共同支持的迭代器连接方法，通过连接现有迭代器创建新迭代器，已成为 Baseline Newly available

• CloseWatcher 接口：Firefox 149 新增支持，允许开发者实现通过设备原生关闭机制（Esc 键、Android 返回键）关闭的组件，行为与内置对话框和弹窗一致

CSS 新特性

• CSS 滚动触发动画正式到来：Chrome 146 新增基于滚动位置的声明式动画控制，通过 trigger-scope 属性隔离触发器名称，将动画工作卸载到 worker thread 以提升性能

• 探索 CSS corner-shape 与滚动驱动动画结合：介绍如何将 CSS 新属性 corner-shape 与滚动驱动动画结合，实现动态边角形状效果

• CSS 新特性大合集：逐步取代 JavaScript UI 库：介绍 Anchor Positioning、Popover API、Scroll-Driven Animations 等 10 余项 CSS 新特性，可替代约 322 kB 的 JavaScript 代码