前端&AI技术双周刊-2026.07.03

前端技术

• CSS @function 的变量作用域机制
  文章解释 CSS @function 的作用域模型: 函数会从调用处解析变量，而不是像自定义属性那样沿 DOM 继承链取值。这个细节决定了库作者如何封装复杂样式逻辑，也提醒使用者注意变量来源、默认值和组合边界。

• Safari 27 可定制 select 最佳实践
  Safari 27 支持可定制 select 后，WebKit 提醒开发者不要只在 option 里放图标或色块，而要保留文本内容。这样才能兼顾可用性、无障碍、搜索匹配和旧浏览器回退，是新 HTML/CSS 能力落地时很实际的兼容性建议。

• Anchor Positioning 改进卡片点击区域
  文章用 CSS Anchor Positioning 改进卡片点击区域，解决整卡可点与次级操作共存时常见的 dead zone 和交互冲突。这个模式贴近真实产品 UI，也展示了 Anchor Positioning 不只是定位弹层，还能改善基础组件交互。

• 使用 View Transition 实现动画 dialog
  文章讲解如何用 View Transition API 给

  元素实现打开和关闭动画，并顺带介绍 Invoker Commands API 以及改善模态默认行为的小技巧。它把原生

  、命令式触发和页面转场组合成更完整的 UI 模式。

• Grid Lanes 布局的无障碍风险
  文章指出 Grid Lanes 很容易破坏键盘 Tab 顺序，从而不满足 WCAG 2.4.3。即使 flow-tolerance 能缓解问题，也不是万能解法。对使用现代 CSS 布局的团队来说，这是新布局能力与无障碍合规之间的关键提醒。

• 现代 CSS 主题能力实战
  文章展示如何用 light-dark()、contrast-color() 和 style queries，仅从一个品牌色推导暗色模式、可读文字颜色和组件级调色板。它说明 CSS 原生主题能力正在变得足够实用，可以减少前端主题系统中的 JavaScript 和设计 token 胶水代码。

• TanStack Table v9 内存优化实践
  TanStack Table v9 在大表格场景中通过把方法放到共享原型上，而不是给每个对象重复创建函数，大幅降低内存占用。文章包含 benchmark 和重构过程，对任何需要维护大量 JS 对象的组件库、数据表格和前端状态模型都有启发。

• HTML model 元素引入 3D 内容
  Apple 在 WWDC26 介绍 HTML 元素，展示如何把交互式 3D 内容带入 iOS、iPadOS、macOS 和 visionOS 网页。对电商展示、空间计算、产品预览和沉浸式 Web 体验来说，这是值得关注的原生 Web 平台方向。

• 现代 CSS 原生动效工具箱
  文章系统回顾现代 CSS 能力，包括 3D、scroll-driven animations、view transitions 等原生特性如何组合出更丰富的 Web 体验。它的价值在于提醒开发者，许多过去依赖重 JS 的交互动效，如今可以用浏览器平台能力更轻地实现。

• 拆解 View Transition 伪元素树
  文章逐层拆解 View Transition API 在过渡期间生成的伪元素树，说明每一层为什么存在、如何被选择器命中，以及怎样微调不同阶段的截图与动画。对理解 View Transition 的底层模型比直接套代码更有帮助。

• 3D View Transition 失效原因解析
  文章解释为什么 3D View Transition 经常失效: View Transition 伪元素树没有真实父节点，导致 perspective 无处依附。作者给出可操作的修复思路，适合正在尝试复杂页面转场、3D 动画和浏览器原生动画 API 的前端工程师。

AI资讯

• Claude Sonnet 5 发布并强化 Agent 能力
  Anthropic 发布 Claude Sonnet 5，主打更强的 agent、工具使用、编码和知识工作能力，定位接近 Opus 4.8 但成本更低。它已在 Claude 全套餐、Claude Code 和 Claude Platform 可用，开发者可通过 claude-sonnet-5 调用，是近期主流模型更新中非常关键的一项。

• Claude Fable 5 恢复全球可用
  Anthropic 宣布 Claude Fable 5 恢复全球可用，并说明围绕网络安全能力、模型访问控制和 jailbreak 严重度评分框架的后续调整。该事件展示了前沿模型发布已不只是产品节奏问题，还牵涉模型安全、政府测试、访问治理和行业标准。

• Claude Tag 支持 Slack 委派任务
  Anthropic 推出 Claude Tag，让团队可以在 Slack 中通过 @Claude 委派任务，并让 Claude 基于频道上下文、连接工具和代码库协作完成工作。它强调多人协作、长期记忆、主动跟进和异步执行，是企业级 agent 从个人助手走向团队成员的典型案例。

• Claude Science 工作台面向科研开放
  Anthropic 发布面向科研人员的 Claude Science 工作台，整合科研常用工具、数据库、计算资源和可审计产物，支持 genomics、single-cell、proteomics、cheminformatics 等场景。它把 agent 从通用聊天推进到可复现科研工作流，对 AI for Science 产品形态很有参考价值。

• Google 发布 ADK Go 2.0
  Google 发布 ADK for Go 2.0，新增图式工作流引擎、人类参与审批、动态编排和统一节点运行时。它把多 agent 应用中的分类、分支、并发、重试和恢复抽象成可观察、可恢复的图结构，更接近生产级 agent 工程需求。

• OpenAI 与 Broadcom 推推理芯片
  OpenAI 与 Broadcom 发布面向 LLM 推理优化的 Jalapeño 芯片，强调从模型、内核、服务系统到硬件的全栈协同。对开发者来说，这意味着前沿模型的成本、延迟和可用性竞争正在延伸到专用推理基础设施。

• Gemini 3.5 Flash 成为稳定模型
  Google AI 官方模型页将 Gemini 3.5 Flash 标为稳定模型，定位是面向 agentic 与 coding 任务的持续前沿性能模型。它和 Gemini 3.1 Flash-Lite、Gemini 3.1 Pro 以及图像、音频、视频模型一起出现在新版模型矩阵中，说明 Gemini API 正在按多模态和 agent 场景重新组织能力边界。

• 美团开源 LongCat-2.0 编程模型
  美团 LongCat 团队正式发布并开源 LongCat-2.0，这是面向 agentic coding 的万亿参数大模型，采用 1.6T 总参数、约 48B 平均激活，并原生支持 1M 超长上下文。官方强调它在 5 万卡国产算力集群上完成训练和推理，围绕代码理解、生成、执行与真实 agent 工作流做了架构优化。

• Google 发布 Nano Banana 2 Lite
  Google DeepMind 推出 Nano Banana 2 Lite，定位为最快、最高效的 Gemini Image 模型，主打更低成本和高速图像生成与编辑。官方页面强调它适合快速视觉探索、实时应用和大规模生成场景，同时保留 Nano Banana 系列的角色一致性、精细编辑和真实世界知识能力。

• OpenClaw 推出移动端原生应用
  OpenClaw 2026.7.1-beta.1 发布说明中提到原生应用刷新，iOS 采用 iOS 26 视觉系统，改进导航、设置、Chat、Talk 和 onboarding 流程，同时扩展 Apple 与 Android 端本地化。这个更新说明本地优先的个人 AI agent 正在从桌面和聊天渠道走向移动端远程控制。

• OpenAI 预览 GPT-5.6 Sol 模型
  OpenAI 预览 GPT-5.6 Sol，定位为下一代模型，并在 GeneBench-Pro 等高难度科学推理任务中展示了更强的长程分析与判断能力。它表明前沿模型能力评估正在从问答和代码生成扩展到复杂科研工作流和高阶决策。

• Google 分享 Agent 质量评估闭环
  Google 分享面向 coding agent 的质量飞轮方法，把数据准备、推理运行、AutoRaters 评分、失败分析和优化迭代串成一套流程。它提醒团队构建 agent 时不能只靠少量样例和 vibe check，而要把评测、监控和迭代做成工程闭环。

扩展阅读

• Hugging Face 用 AI 辅助每周发版
  Hugging Face 分享如何把 huggingface hub 从 4 到 6 周一次发布改造成每周发布，用开源工具和开放权重模型自动生成发布说明草稿，同时在人类判断最关键的位置保留审核。它不是简单的 AI 替代人工，而是展示了维护者如何把机械步骤自动化、把判断留给人。

• 面向 AI 的 Web 改进应惠及所有用户
  文章围绕 Safari 团队反对 WebMCP API 展开，认为与其增加 AI 专用 Web API，不如修复底层语义、可访问性和用户真正需要的能力。它提供了一个很好的技术治理视角: 面向 AI 的 Web 改进也应该让所有用户受益。

• 编码 Agent 的无障碍测试短板
  文章指出大多数编码 Agent 在无障碍方面并不可靠，AI 只会加速团队已有流程，而不能替代 a11y 判断、测试和人工责任。它适合提醒前端团队在引入 AI 编码时，把无障碍要求写进流程和评审，而不是事后补救。

• AI 让代码变便宜但理解更昂贵
  文章讨论 AI 让代码生成变得更便宜之后，真正稀缺的反而是理解、判断和控制复杂度。它把开发者价值从“写出更多代码”重新拉回到“理解系统和做正确取舍”，很适合作为 AI 编程时代的工程文化阅读。

资源推荐

• ForesightJS 4 用户意图预测库
  ForesightJS 4 是一个预测用户意图的 Web 库，可根据指针和键盘信号提前预取内容，从而改善导航体感。新版加入 React 和 Vue 包以及声明式组件，对追求交互响应速度和预加载策略的前端应用有直接实用价值。

• FullCalendar 7 日历组件方案
  FullCalendar 7.0 是成熟 JavaScript 日历库的重要版本，支持 React、Vue、Angular 和原生 JavaScript，并提供类 Google Calendar 的日历交互体验。对于需要排期、预约、运营日历或后台管理日程模块的前端项目，它仍是高完成度的可选方案。

• React 2026 常用库与工具清单
  Robin Wieruch 更新 2026 年 React 库与工具清单，覆盖项目中常见的状态管理、数据请求、表单、路由、测试、UI 和工具链选择。它不是单一库发布，而是一个实用索引，适合团队在新项目选型或老项目体检时快速查漏补缺。