AI 摘要：本文介绍了 CSS 实验性新属性 text-grow 和 text-shrink，它们旨在用一行代码解决文本与容器宽度匹配的经典布局问题。文章详细解释了其语法、可选值和工作原理，同时也指出了当前存在的开放性问题和可访问性考量，并鼓励开发者参与相关讨论。

1. 新属性介绍与语法
• 介绍了实验性 CSS 属性 text-grow 和 text-shrink，它们可以简洁地让文本宽度适配容器。
• 详细解析了语法结构：text-grow: <fit-target> <fit-method>? <length>?;，并解释了 <fit-target> (如 per-line, consistent)、 <fit-method> (如 scale, font-size) 和可选 <length> 参数的含义。

2. 开放问题与社区讨论
• 指出了该属性在可访问性（如用户放大字体时）和具体行为（如最后一行、行高、内联图片的处理）上仍存在待解决的问题。
• 汇总了社区（如 Una Kravets, Donnie D’Amato）对该技术适用场景（如更适合打印样式）的讨论和思考，并提供了参与 W3C GitHub 议题讨论的链接。

3. 发展脉络与展望
• 回顾了从过去依赖 FitText.js 等复杂方案到如今一行 CSS 可能解决问题的技术演进。
• 整体表达了对这一新属性简化前端开发工作流的期待，同时保持了对其成熟度审慎乐观的态度。

CSS-Tricks

Fit width text in 1 line of CSS | CSS-Tricks

The Chrome team recently prototyped a working solution for fitting text to the width of a container in CSS using a text-grow property.

AI 摘要：本文是 Chrome 团队对 2025 年即将到来或已部分实现的 CSS 新特性的全面总结。文章涵盖了从交互增强（如无 JavaScript 的对话框控制、兴趣触发器）、UI 组件现代化（如完全可自定义的 select 元素、原生 CSS 轮播）、布局与定位革新（如锚点容器查询、滚动状态查询），到 CSS 语言能力提升（如 if() 条件语句、自定义函数、增强的 attr() 函数）等多个方面。这些特性旨在让开发者能够用更声明式、更简洁且高性能的代码构建更丰富、更易访问的 Web 体验。

1. 交互与行为增强
• Invoker Commands**：通过 commandfor 和 command 属性，无需 JavaScript 即可声明式地控制 <dialog> 和 [popover] 元素的显示、隐藏等操作，并支持自定义命令。
• Dialog Light Dismiss：为 <dialog> 元素新增 closedby 属性，实现类似 Popover 的“轻关闭”行为（点击外部或按 ESC 键关闭）。
• Interest Invokers：通过 interestfor 属性，为按钮或链接提供声明式的悬停/聚焦触发 UI（如工具提示），并可设置 interest-delay 控制延迟。
• ToggleEvent.source：在 ToggleEvent 中新增 source 属性，用于识别触发 popover/dialog/details 切换操作的具体元素。
• DOM State-Preserving Move：新的 moveBefore() DOM API，在移动元素（如 iframe、视频）时能保持其内部状态（播放、焦点等），不会重新加载。

2. UI 组件与控件
• Customizable select：通过 appearance: base-select 解锁对 <select> 元素的完全 CSS 定制，包括下拉列表、选项样式，并支持在 <option> 内使用 HTML 内容。
• ::scroll-marker/button()**：新增 CSS 伪元素，用于创建原生的、可访问的轮播导航按钮和标记点，无需 JavaScript。
• scroll-target-group：将一组锚点链接转换为滚动标记组，结合 :target-current 伪类实现“滚动侦测”高亮效果。
• text-box features：通过 text-box-trim 和 text-box-edge 属性，基于字体的视觉边界（如大写字母高度）精确控制文本垂直对齐，实现完美视觉居中。

3. 布局、定位与滚动
• Anchored container queries：结合 CSS 锚点定位，使用 container-type: anchored 和 @container anchored(fallback: ...) 查询，让元素能根据其定位回退状态（如从底部翻转到顶部）自适应样式。
• Scroll-state queries：通过 container-type: scroll-state，让子元素能查询父容器是否处于“可滚动”、“吸附”或“固定”状态，并据此应用样式。
• scrollIntoView() container：scrollIntoView 方法新增 container: 'nearest' 选项，确保只滚动最近的祖先滚动容器，而非整个视口。
• Stretch sizing keyword：新的 stretch 尺寸关键字，让元素在考虑外边距的情况下填满包含块，不同于 100%。
• corner-shape：新的 corner-shape 属性，提供除圆角外的多种边角形状（如斜面、凹口、圆弧、方圆形），并支持 superellipse() 函数进行精细控制。

4. CSS 语言与表达能力
• Tree counting functions：新增 sibling-index() 和 sibling-count() CSS 函数，用于获取元素在兄弟节点中的索引和总数，简化交错动画等效果。
• Advanced attr() function：增强的 attr() 函数，现在可用于任何 CSS 属性，并能将属性值解析为颜色、长度、数字等特定类型。
• if() statements：新的 CSS if() 函数，内联支持条件判断，可与 media()、supports()、style() 查询结合，简化动态样式逻辑。
• Custom Functions：支持使用 @function 定义自定义 CSS 函数，提高样式代码的复用性和可读性。
• Expanded range syntax：现在样式查询和 if() 语句中支持使用范围语法（如 >, <），允许对自定义属性值进行大小比较。
• shape() function：新的 shape() CSS 函数，用于创建复杂、响应式的裁剪路径，比 clip-path: path() 更易于维护和动画。

5. 动画与过渡
• Nested View Transition Groups：视图过渡 API 支持嵌套的 ::view-transition-group ，通过 view-transition-group: nearest 属性在过渡期间保留 3D 变换和裁剪效果。

AI 摘要：本文作者 Nic Chan 分享了一个早年客户案例，客户是一家服务型设计公司，却执意要模仿大型 SaaS 企业的“劝退式联系页面”（fuck off contact page）——一种通过隐藏真实支持渠道来减少咨询量的设计。作者分析了这种页面为何与客户（服务型公司）获取线索的根本目标相悖，并反思了项目中出现这一问题的根源：折扣报价导致客户不尊重专业意见、未能有效教育客户理解设计流程（如线框图）的价值，以及双方缺乏信任。文章最终倡导设计师应通过公开分享价值观来吸引理念一致的客户。

AI 摘要：本文详细介绍了如何在 Vercel 平台上为 Astro 静态网站配置按需增量静态再生成 (On-Demand ISR)。文章首先解释了 ISR 和按需 ISR 的概念及其适用场景，然后通过一步步的代码示例，指导读者如何初始化项目、添加 Vercel 适配器并配置 ISR 参数、创建动态页面，以及最关键的部分——如何通过一个受保护的 API 端点来手动触发缓存失效和页面重建，从而实现对静态内容更新时间的精细控制。

1. 概念解析
• 什么是 ISR：解释增量静态再生成 (ISR) 的概念，即无需重新构建或部署整个网站即可更新静态内容（如博客文章或 GET API 端点）。
• 什么是按需 ISR：对比传统基于 TTL（生存时间）的 ISR，说明按需 ISR 允许在 TTL 到期前手动使缓存失效并触发重建，从而更精确地控制内容的新鲜度。
• 适用场景：列举按需 ISR 的典型用例，如不常更新但更新后需立即生效的内容，或渲染成本高（计算、时间、外部 API 费用）的频繁访问内容。

2. 项目配置
• 初始化 Astro 项目：使用命令行工具创建一个包含 Tailwind CSS 和 React 的 Astro 项目，并初始化 Git。
• 添加 Vercel 适配器：通过 astro add vercel 命令添加适配器，并在 astro.config.mjs 文件中配置 ISR 参数，包括设置 bypassToken（用于授权缓存失效的密钥）和 exclude（排除 API 路由不被缓存）。

3. 实现与验证
• 创建动态页面：在首页添加一个显示服务器渲染时间戳的组件，用于验证缓存效果。部署后，刷新页面时间戳不变，且响应头 x-vercel-cache 显示 HIT，证实页面来自缓存。
• 实现按需失效端点：创建一个受保护的 API 端点 (/api/invalidate)，该端点接收 POST 请求，内部向目标路由发送带有 x-prerender-revalidate 头（值为 bypassToken）的 HEAD 请求，以触发缓存失效和重建，并验证响应头确认操作成功。
• 测试：通过 curl 命令调用该 API 端点，成功使首页缓存失效，再次访问首页时看到新的时间戳，证明按需 ISR 生效。

Shawn's Blog

On-Demand ISR For Astro on Vercel | Shawn's Blog

Here's how to set on-demand incremental static regeneration for an Astro website when deploying to Vercel.

AI 摘要：本文来自 Temani Afif 的 CSS 小贴士系列，介绍了除 html {} 与 :root {} 外，还能选中 <html> 元素的几种“隐藏”选择器，如嵌套选择器 &、:scope、:has()、:not() 等，并通过组合操作符展示了多种有趣写法。虽然这些技巧在实际开发中不一定实用，但它们揭示了 CSS Selector 机制的底层逻辑与灵活性，是一次颇具趣味性的语法探索。

1. 根元素的经典选择方式
• 介绍了我们熟知的两种方式：html {} 与 :root {}
• 提出问题：是否存在其他隐藏选择器可用于选中 <html> 元素

2. 嵌套选择器（Nesting Selector &）
• 在非嵌套上下文中，& 等效于 :scope
• 可直接用作选择 <html> 元素

3. :scope 选择器
• 当没有定义作用域根节点时，:scope 默认代表整个文档根，即 <html>
• 示例代码展示了如何直接使用 :scope { ... } 来作用于全页面样式

4. :has() 选择器的新奇用法
• <html> 是唯一同时包含 head 与 body 的元素，可利用结构特征进行反向匹配
• 示例：:has(head) 或 :has(body) 都能命中 <html>

5. :not() 与组合筛选
• <html> 是唯一没有父节点的元素，可利用 `:not(* *)`（排除有祖先的元素）进行匹配
• 加入子代组合符 > 可形成如 :not(* > *) 的结构，用“CSS 符号表情”形式趣味收尾

6. 组合选择器的实验与调侃
• 展示 :is() 、:where() 与多重 & 的奇怪组合写法（如 &&&&）
• 指出这些写法在逻辑上可行但缺乏实际用途，更多是对 CSS Selector 灵活性的探索

7. 结语与扩展阅读
• 作者认为这些“隐藏选择器”是有趣但不实用的实验
• 附带更多 CSS Tips，如 Direction-Aware CSS Shapes 与 Direction-Aware Arrow Shape using corner-shape，扩展了方向感知样式的应用视角

Css-Tip

The Hidden Selectors of The HTML Element

Discover alternative selectors for the html element beyond the classic `:root{}` and `html{}`

AI 摘要：本文由 Vercel 的 Lydia Hallie 撰写，介绍如何利用 Vercel 的 Build Output API 构建一个基于 React 的简易 Web 框架，支持静态渲染（Static Rendering）、增量静态再生（Incremental Static Regeneration, ISR）、服务端渲染（Server-Side Rendering, SSR）、边缘函数（Edge Functions）和自动图片优化等功能。文章不仅讲解框架涉及的文件结构和构建流程，还展示如何将每种渲染模式映射为 Vercel 可识别的输出，从而部署到无服务器（Serverless）和 Edge 环境。虽然该示例为教学版，但完整演示了现代框架实现高性能与可扩展架构的关键思路。

1. 框架目标与核心组件
• 通过 Vercel Build Output API 构建自定义 Web 框架
• 实现静态页面、增量渲染、服务端渲染、边缘渲染和图片优化等现代框架功能
• 所有页面位于 pages/ 目录，并根据配置选择不同渲染策略（static、ssr、prerender 或 edge）

2. 页面设计与优化策略
• Landing Page：通过图片优化与 Edge 缓存提升首页首字节时间（TTFB）
• Products Page：结合静态与动态渲染，利用 ISR 实现自动再生更新
• Popular Page：借助 Edge Functions 根据用户地理位置实现个性化推荐

3. 框架实现细节
• Static Rendering：
• 使用 ReactDOMServer.renderToString 将组件预渲染为 HTML
• 输出文件结构至 .vercel/output/static，生成可 Hydrate 的 JS 包
• Incremental Static Regeneration (ISR)：
• 创建 .func 文件夹与 prerender-config.json 配置缓存过期与再生逻辑
• 增设 fallback HTML 提供渐进体验
• Serverless Functions：
• 每个动态页生成一个 Lambda（serverless）函数，用于按需（re）生成页面
• 利用 .vc-config.json 定义运行时、入口点与上下文
• Edge Server Rendering：
• 在 Edge Runtime 中使用 React 进行服务端渲染
• 动态注入 req 对象以生成个性化内容

4. 自动图片优化（Automatic Image Optimization）
• 自定义 Image 组件，将图片请求代理至 /_vercel/image
• 基于 vercel.config.js 生成 .vercel/output/config.json，统一图片格式（webp/avif）、域名和缓存策略

5. 构建与输出过程（Build Output）
• 遍历所有页面并执行对应的渲染方法
• 拷贝静态资源至 .vercel/output/static
• 自动创建 .vercel/output/config.json 配置文件
• 构建完成后可直接通过 Vercel 部署，享受边缘分发与函数服务

6. 结论
• 框架可作为理解现代渲染机制与 Vercel 部署架构的参考
• 虽非生产版本，但展示了现代框架（如 Next.js）背后的核心逻辑
• 适合框架作者或独立开发者应用 Vercel 的核心特性进行自研集成

Vercel

Build your own web framework - Vercel

Build your own web framework that deploys to edge and serverless infrastructure.

我喜欢这个解决方案，不仅因为它有效（而且效果非常好），还因为它教会了我一个谦卑的教训。

我曾一度认为 perspective-origin 是个“坏”属性。我对它抱有抵触情绪，因为我只把它看作是造成图像失真的根源。我一心只想找到制作 3D 的“正确”方法，却忽略了真正能解决问题的工具。

Cubiq 并没有这种偏见。他看到的是一个数学问题：“我需要当旋转方向为 Y 时，投影看起来要像 X。”然后他找到了控制投影的属性。

AI 摘要：本文由 Amit Sheen 撰写，讲述他如何在纯 CSS 的限制下实现具有真实 3D 深度和裁剪效果的“Deep Card”。传统做法会因 overflow: clip 扁平化 3D 空间而失败。作者在尝试数年未果后，受到 Cubiq 的启发，用 perspective-origin 动态校正视角，实现了既可保持 3D 空间又可裁剪内容的完美效果。这一方案不仅重燃了纯 CSS 的创造力，也提醒开发者，不要过早排斥某些特性，真正的创新往往在规则之外。

1. 卡片与“深度卡片”的概念
• 普通卡片是二维的，最多用阴影暗示层次；“Deep Card”试图在卡片内构建真实的体积。
• 技术目标：让元素在旋转时表现出真实景深与透视变化。

2. CSS 陷阱与规范限制
• 核心难题是 overflow: clip 与 transform-style: preserve-3d 无法共存。
• 依据 CSS Transforms Module Level 2 规范：含有分组属性的元素（如 overflow、opacity、filter）会被“扁平化”，导致 3D 效果丢失。

3. 伪 3D 的尝试（Faking It）
• 通过 scale() 与 translate() 等方式模拟透视变化。
• 优点：高性能、跨浏览器兼容；缺点：角度一大透视破碎，难以保持自然立体感。

4. 数学解法的探索之路
• 尝试为每层使用 clip-path 来动态裁剪，但计算复杂度极高，需要实时三角与投影运算。
• 作者几乎放弃时，收到开发者 Cubiq 的信息，成为突破契机。

5. 关键突破：perspective-origin 的反向运用
• 以往被认为“畸变丑陋”的属性被重新发掘。
• Cubiq 的公式通过基于旋转角度动态计算 perspective 与 perspective-origin，实现投影映射式的深度对齐。
• 结果：在被扁平化的上下文中实现了视觉上的真实 3D 效果。

6. 实现细节与代码结构
• HTML 结构：.card-container > .card > .card-content + .card-back。
• JS 监听鼠标位置，计算 --mouse-x、--mouse-y。
• CSS 关键：
• 外层提供全局 perspective。
• 内层通过 calc(cos/sin) 动态校正视角。
• overflow: clip 限定边界，translateZ() 生成深度分层。
• 注意 .card-layers 容器避免直接扁平化问题。

7. 深化与扩展效果
• 利用亮度变化、半透明叠加强化视觉深度。
• 控制 z-index 实现不同的层次呈现。
• 可添加交互，如点击翻转 180°（前后双面内容）。
• 内层动画（如视差滚动与文字 3D 动效）进一步扩展场景。

8. 启示与总结
• 结论：纯 CSS 也能实现真实的 3D 深度与裁剪效果。
• 哲思：别轻易排除技术手段，创新常源自对“禁区”的重新理解。
• 鼓励读者“go build something deep”——继续挑战 CSS 的极限。

Frontend Masters

The Deep Card Conundrum

In the world of web design, we often talk about “cards”. Those neat little rectangles that group information together are the bread and butter of modern UI. But usually, these cards are as flat as the screens they live on. Maybe they have a subtle drop shadow…

AI 摘要：本文阐述了 scrollbar-gutter: stable; 在解决页面布局因滚动条出现与否而引起的内容跳动（layout shift）问题上的便利，同时指出它在某些场景下（如 iframe 环境或元素居中对齐）会导致“空白滚动条占位”以及视觉不居中的副作用。作者进一步提出一种利用 CSS Scroll State 查询的替代方案，通过检测页面是否可滚动来动态调整内边距，为未来更灵活的滚动状态响应式设计提供了思路。

1. 引入与背景
• 提到 Zach 建议在样式表中默认使用 scrollbar-gutter: stable;。
• 该属性能为滚动条预留空间，避免内容在滚动条出现或消失时的跳动。
• 应用场景：在系统设置为“始终显示滚动条”时尤为明显。

2. scrollbar-gutter: stable; 的优点与原理
• 通过为滚动条占位，页面在加载更多内容时不会发生横向位移。
• 浏览器支持广泛，适合用于布局稳定性的优化。
• 视觉表现：用白色或暗色条带代替滚动条区域，从而避免内容的移动。

3. 使用中的缺陷与视觉问题
• 在 CodePen 等 iframe 环境中，会出现“纯白空隙”（白条）的问题。
• 在非 iframe 环境下虽无白条，但元素居中计算仍未考虑滚动条占位。
• 导致视觉上轻微偏移，尤其在内容需要精确居中时效果不佳。

4. 替代方案：基于 Scroll State 的新思路
• 介绍 CSS scroll-state 容器查询用法，通过判断页面是否可滚动来实现自定义布局调整。
• 示例代码展示了如何利用自定义 CSS 变量和 vendor prefix 控制滚动条宽度。
• 该方法灵活但依赖较新的浏览器支持，尚属实验性方案。
• 作者希望未来能有系统级变量（如 env()）能动态获取滚动条宽度，提升可用性。

5. 总结与展望
• scrollbar-gutter: stable; 简单易用，但小缺陷让人犹豫是否应作为默认。
• CSS Scroll State 提供潜在方向，让开发者更精确地应对滚动相关的布局变化。
• 未来网页布局中可能会实现更智能的滚动状态适配机制。

Frontend Masters

The Downsides of scrollbar-gutter: stable; (and one weird trick)

The esteemed Zach (Leatherpants), blogged about the virtues of scrollbar-gutter: stable;, suggesting it might be good in a starter stylesheet. (Hey, I’ve got one of those.) The thing that it solves is content-shifting. If you have a page that, upon first…

AI 摘要：本文从传统排版学出发，探讨了 “measure（行长）” 概念如何指导现代网页设计。作者建议以内容可读性为核心，用自定义 CSS 属性结合 ch 单位控制文本宽度，将 measure 延伸到多栏布局、网格系统 (Grid)、以及容器查询 (Container Query) 的设计逻辑中。通过以内容为依据而非设备尺寸来设定断点，设计者可以创造出更自然、更连贯、更具可读性的排版系统。

1. 传统排版中的 measure 概念
• “Measure” 起源于金属活字时代，指每行文本能容纳的宽度，是版面设计的核心要素。
• 好的 measure 提高阅读舒适度，差的 measure 会让读者疲劳。
• 从排版角度来看，measure 应成为布局决策的依据，而非被动的结果。

2. 使用 CSS 自定义属性定义 measure
• 使用 --measure 自定义属性并以 ch 单位（字符宽度）定义行长。
• 推荐 60–70 字符每行为理想可读长度。
• 不同字体的 x-height 与字宽会影响实际视觉行长，需通过视觉调整。

3. 保持文字可读性
• 通过 max-inline-size: var(--measure) 控制正文宽度取代 max-width。
• 运用 CSS 逻辑属性 (Logical Properties) 进行方向无关的布局。
• 有效防止“大屏长行综合症”，保持阅读舒适。

4. 设计多栏文本 (Multi-column Layout)
• 使用 column-width: var(--measure) 让浏览器自动计算可读列数。
• 单栏与多栏布局可自适应，不需媒体查询。
• measure 让版面转换更加平滑自然。

5. 用 measure 引导网格布局 (Grid System)
• 在网格定义中，将主文本区的列锁定在 measure 宽度，如 grid-template-columns: minmax(0, var(--measure)) 1fr;。
• 第一列保持理想阅读宽度，第二列灵活适配剩余空间。
• 强化内容与版面之间的连结感。

6. 以 measure 为条件的容器查询 (Container Queries)
• 打破以设备宽度设断点的思维，用内容本身触发布局变化。
• 当容器宽度小于 measure 时，布局可自动折叠至单栏。
• 创建 “内容驱动 (Content-driven)” 的响应设计，而非 “设备驱动 (Device-driven)” 布局。

7. 构建 measure 系统
• 定义多个 measure 变量（如 --measure-s, --measure-l）应对不同文本类型。
• 小 measure 用于说明文字，标准 measure 用于正文，大 measure 用于标题与引导。
• 统一的行长节奏让页面更具整体性与阅读流畅感。

8. 从 measure 出发重新理解设计
• 以 measure 为核心的设计能让排版从“试错”转变为“对话”。
• 内容与布局相互协调，带来更有意识和一致性的视觉节奏。

CSS-Tricks

Getting Creative With “The Measure” | CSS-Tricks

A good measure makes reading text comfortable, while a bad one makes it more difficult. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?

AI 摘要：作者展示了 CVE-2025-55182 漏洞的具体利用方式，说明该漏洞出现在 React Server Components 的反序列化机制中。通过伪造 Chunk 对象以及操控 then 方法触发链式调用，攻击者可以利用 Next.js 的服务端组件解析逻辑实现远程代码执行 (RCE)。文章详细讲述了漏洞的产生原理、攻击向量和具体请求示例，说明此问题的严重性与利用条件。

1. 漏洞背景与影响范围
• 漏洞编号为 CVE-2025-55182，影响 React Server Components 的反序列化过程
• 可在 Next.js 16.0.6 环境下触发
• 利用对象结构中的 $@ 标记机制篡改 Chunk 引用并控制反序列化流程

2. 核心利用思路 (Exploit 原理)
• 使用 $@ 引用构造伪造的 Chunk 实例
• 将 Chunk.prototype.then 作为根对象的 then 属性，使得在 Promise 处理时自动触发攻击逻辑
• 通过修改 status 为 RESOLVED_MODEL 调用 initializeModelChunk 以执行受控对象的代码路径

3. 攻击链实现与触发机制
• 攻击目标是触发 Blob 反序列化流程
• response._formData.get 被重写为 JavaScript Function 构造器，实现任意代码执行
• 构造的 multipart/form-data 请求载荷通过控制 _prefix 字段注入任意命令（例如 child_process.execSync('xcalc')）

4. 安全意义与防护思考
• 漏洞本质源于反序列化信任边界不明与模型解析机制的未过滤输入
• 需加强 React Server Components 的反序列化安全校验
• 建议暂时限制相关功能或升级框架版本

Gist

CVE-2025-55182 React Server Components RCE POC

CVE-2025-55182 React Server Components RCE POC. GitHub Gist: instantly share code, notes, and snippets.

AI 摘要：React 官方披露了一个在 React Server Components (RSC) 中的严重远程代码执行漏洞（CVE-2025-55182），影响多个版本的 react-server-dom 系列包。问题出在 RSC 的负载反序列化逻辑中，攻击者可通过构造恶意 HTTP 请求在服务器上执行任意代码。相关漏洞获评 CVSS 10.0（最高等级），已在 19.0.1、19.1.2、19.2.1 等版本修复。React 团队建议开发者立即升级，并说明了受影响的框架包括 Next.js、React Router、Waku 等。

1. 漏洞概述与影响范围
• 披露的漏洞是针对 React Server Components 的未授权远程代码执行 (Remote Code Execution, RCE) 问题。
• 漏洞编号为 CVE-2025-55182，CVSS 评分为 10.0（极高严重度）。
• 所有使用 RSC 的 React 应用，即使没有定义特定 Server Function 接口，也可能受影响。

2. 受影响版本与安全修复
• 受影响版本：19.0、19.1.0、19.1.1、19.2.0。
• 修复版本：19.0.1、19.1.2、19.2.1。
• 修复建议：立即升级至修复版本的 react-server-dom-webpack、react-server-dom-parcel、react-server-dom-turbopack。

3. 受影响的框架与构建工具
• 部分框架与构建工具依赖或内置受影响包，包含 Next.js、React Router、Waku、@parcel/rsc、@vitejs/plugin-rsc、rwsdk。
• React 团队后续将更新具体升级指令。

4. 技术细节与漏洞原理
• RSC 机制允许客户端通过 HTTP 请求触发服务器端函数。
• 漏洞源于 React 在反序列化客户端请求载荷 (payload) 时的处理缺陷，导致攻击者可执行任意代码。
• 目前细节暂未完全公开，以防在修复完成前遭滥用。

5. 漏洞披露时间线
• 11 月 29 日：由安全研究员 Lachlan Davidson 通过 Meta Bug Bounty 计划报告漏洞。
• 11 月 30 日：Meta 安全部门确认漏洞并与 React 团队协作修复。
• 12 月 1 日：完成修复并与受影响项目共同测试与部署缓解措施。
• 12 月 3 日：在 npm 发布修复版本并正式公开 CVE。

6. 致谢与归属
• 感谢安全研究员 Lachlan Davidson 的发现、报告及协助修复贡献。

react.dev

Critical Security Vulnerability in React Server Components – React

The library for web and native user interfaces

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

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 发布时继续更新新功能说明。

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 摘要：本文展示了如何利用现代 CSS 的新特性 corner-shape 创建一个具备悬停 (hover) 交互的倾斜图片库。通过使用逻辑属性和自定义变量，只需少量代码即可实现具有方向感知 (direction-aware) 的图像倾斜效果。当用户悬停图片时，相邻形态会流畅过渡，视觉上极具动感。文末还比较了使用 clip-path 的替代实现，强调虽然兼容性更好，但缺乏方向感知的智能特性。

1. 组件与功能简介
• 主题为一个倾斜 (skewed) 图片库，展示如何简单实现经典布局。
• 利用现代 CSS 新属性 corner-shape 让图片边角自动响应文字方向。
• 通过 flex 布局与 transition 结合，实现平滑扩展的悬停动画。

2. 核心实现原理
• 定义变量 --s 控制倾斜程度和形状曲率。
• 使用逻辑属性如 border-start-start-radius、border-end-end-radius 确保布局在不同书写方向中正常表现。
• 通过伪类 :hover、:has() 与相邻选择器的配合，让图片在交互时动态调整边形与间距。

3. 替代方案与兼容性
• 提供使用 clip-path 的另一种实现方法。
• 虽然 clip-path 方式浏览器支持度较高，但不具备方向感知能力。
• 建议根据实际兼容需求在项目中选择适合的实现。

4. 延伸与参考
• 推荐阅读作者的其他作品：Direction-Aware Arrow Shape using corner-shape 与 Dynamic Tooltip Position with Anchor Positioning IV。
• 这些示例共同展示了现代 CSS 如何简化复杂动效组件的实现。

Css-Tip

Gallery of Skewed Images with Hover Effect

Using modern CSS and corner-shape to add a fancy galley of images with a reveal hover effect

AI 摘要：本文介绍了如何编写一个高质量的 CLAUDE.md （或AGENTS.md）文件，以帮助大型语言模型如 Claude 在每次会话中准确理解项目上下文。作者强调 Claude 是无状态（stateless）的，需要通过 CLAUDE.md 主动引导项目背景和结构。文中指出主文件应聚焦通用信息、减少冗余指令、避免让模型充当代码检查工具，并提出了“渐进揭示(Progressive Disclosure)”原则来管理上下文信息。结论是：精简、聚焦、人工精心编写的 CLAUDE.md 才能真正成为助力开发的高杠杆点。

1. LLM 基础与 CLAUDE.md 的角色
• 强调 LLM 是无状态的，推理时并不会记忆过往对话。
• CLAUDE.md 文件是让模型理解代码库的唯一常驻入口，每次对话都会自动加载。
• 它的作用类似于为 Claude 提供项目结构图与工作指南。

2. CLAUDE.md 的内容原则：WHAT / WHY / HOW
• WHAT：介绍项目栈、架构与子模块结构，是 Claude 的“路线图”。
• WHY：说明项目目标与各部分用途，帮助 Claude 理解设计动机。
• HOW：告诉 Claude 如何执行任务，如构建流程、测试方式、工具链（例如使用 bun 还是 node）。
• 提醒不要塞入所有命令，应保持“够用、通用、可解释”。

3. Claude 忽略 CLAUDE.md 的原因及机制
• Claude 会根据系统提醒(<system-reminder>)判断上下文是否相关。
• 若文件含过多不相关信息，Claude 会选择性忽略。
• 这种机制是为防止用户使用 CLAUDE.md 添加无关“热修复”指令所设计。

4. 编写高质量 CLAUDE.md 的建议
• 遵循 context engineering best practices。
• 少即是多 (Less is more)：避免过多指令或与代码无关的规则。
• 研究表明 LLM 对 150–200 条指令的响应最为稳定，超过会急剧下降。
• Claude Code 的系统提示占掉约 50 条指令空间，因此应控制在极简范围内。

5. 文件长度与通用性建议
• 上下文窗口应专注于高相关的内容，而非填充冗余背景。
• 建议文件 <300 行，理想情况下 <60 行。
• 仅包含“通用适用”的指令与信息。

6. 渐进揭示 (Progressive Disclosure) 原则
• 将不同任务的指令拆分为独立的 Markdown 文件（如 agent_docs/ 目录）。
• 在主文件中只列出这些文件及简要说明，让 Claude 按需访问。
• 避免代码复制，推荐使用 file:line 引用；引用比拷贝更可维护。

7. Claude 不是代码检查工具
• 不应让 Claude 替代 linter 或 formatter。
• 代码风格应由确定性工具（如 Biome）自动处理。
• 可使用 Stop hook 或 Slash Command 将检查与格式化过程外挂给 Claude 参考，而非直接放入主文档中。

8. 避免自动生成或使用 /init
• 自动生成的文件通常内容冗余或缺乏针对性。
• CLAUDE.md 是高杠杆点，一旦草率配置，会对所有阶段输出产生负面连锁影响。
• 建议人工精雕细琢每一行指令，使其精准可靠。

9. 结论与最佳实践总结
• 明确项目的 WHY / WHAT / HOW。
• 内容简洁、普适、避免多余。
• 采用渐进式信息揭示策略。
• 使用独立工具执行语法或格式检查任务。
• 谨慎维护 CLAUDE.md——它影响整个代理（agent）表现的核心。

www.humanlayer.dev

Writing a good CLAUDE.md

`CLAUDE.md` is a high-leverage configuration point for Claude Code. Learning how to write a good `CLAUDE.md` (or `AGENTS.md`) is a key skill for agent-enabled software engineering.

AI 摘要：Bun 宣布被 Anthropic 收购，将作为 Claude Code、Claude Agent SDK 等产品的核心基础设施。Bun 保持开源与 MIT 许可证，团队与路线图不变，继续专注于高性能 JavaScript 工具和 Node.js 兼容性建设。此次加入为 Bun 带来长期稳定性与更充足资源，也让团队处于 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」等组合。

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.

AI 摘要：文章指出当前主流项目仍以传统方式使用 React Hooks（如滥用 useEffect），忽视了 React 在并发模式与异步数据处理上的演变。作者从设计理念出发，提出现代 Hook 的核心精神是“架构化的状态与逻辑管理”，强调使用 useSyncExternalStore、useDeferredValue、useEffectEvent 等新 API 优化性能和可测试性，鼓励开发者更多关注派生状态（derived state）而非副作用（side effects），并顺势迎接以数据为中心的 React 架构。

1. Hook 的角色转变与 React 的新方向
• Hooks 不只是生命周期函数重写，而是模块化、架构化的设计思想。
• React 18/19 的并发特性改变了异步数据处理逻辑，Server Components 与 use() 带来更高层数据抽象。
• 目标是构建“数据先行”的渲染流程，而非依靠组件内部副作用。

2. useEffect 的陷阱与替代方案
• 常见问题是将数据请求、派生计算塞入 useEffect，导致过度触发渲染。
• React 的最佳实践是：所有可在渲染阶段派生的内容应在渲染过程中完成，而非放入 effect 中。
• 引入 useEffectEvent 以访问最新的 state/props 而不触发额外渲染。
• 使用 useMemo、useCallback 处理纯计算逻辑，减少组件不必要的波动。

3. 自定义 Hooks：从重用到封装
• 自定义 Hook 不只是提炼通用逻辑，更是对业务域逻辑的封装。
• 示例：将 window 尺寸监听封装为 useWindowWidth，实现 UI 与逻辑分离。
• 优点包括更高的可测试性以及更干净的组件结构。

4. 外部订阅与 useSyncExternalStore
• React 18 新增 useSyncExternalStore 解决数据源订阅同步、性能与 tearing 问题。
• 适用于浏览器 API（如 matchMedia）、外部状态管理库（Redux、Zustand）等。
• 提供可靠的订阅模式与一致的渲染行为。

5. 并发工具与性能优化
• 使用 startTransition 与 useDeferredValue 在高频输入或筛选操作中保持响应式体验。
• startTransition() 用于延后状态更新，useDeferredValue() 延后派生计算。
• 合理组合能避免输入滞后，同时保护性能。

6. 可测试、可调试的 Hook 架构
• 将业务逻辑封装为 Hooks，以便隔离测试并增强可维护性。
• 借助 React DevTools 检查自定义 Hook 状态流动。
• 提倡将上下文逻辑（如认证、数据提供）提炼为 provider 级 Hook，例如 useAuthProvider。

7. 数据优先的 React 应用与未来趋势
• React 正向 Server Components、Action-based 数据流演进，弱化客户端副作用依赖。
• 新 API：[use()](https://react.dev/reference/react/use)、useActionState、useEffectEvent 等用于处理并发与异步状态。
• 重点是减少 “万能 useEffect” 模式，构建清晰、声明式的数据驱动结构。

8. Hook 作为架构模式
• Hooks 体现的是一种思考方式：派生状态应在渲染时生成，副作用仅限外部交互。
• 推荐模式：小而专注的 Hooks、明确的客户端/服务端边界、结合并发机制以优化用户体验。
• React 正在从“组件驱动”走向“数据驱动”阶段，现代 Hooks 是这种转变的核心载体。

AI 摘要：本文由 Ana Tudor 撰写，灵感来自 Vivi Tseng 的 CodePen 实验，探索如何用极简的 CSS 实现一种“非正方形图片模糊扩展”效果——图片在较短边方向通过自身的模糊副本自然填补为方形背景。文章逐步从理论四行 CSS 实现入手，延伸到浏览器兼容性问题、替代方案（CSS 变量、SVG filter）以及跨浏览器处理方式，并在最后提出动态方向渐隐和计算图像纵横比的方案。整体展示了 CSS filter、backdrop-filter、container query、mask、attr() 等高级特性的组合运用。

1. 简介与问题动机
• 作者想用单个 img 元素与最少的 CSS 声明，实现非方形图片的模糊填充背景。
• 对比现有需额外元素的方案，希望找到更优雅的实现。
• 展示目标效果：图片保持比例，四周模糊延伸成方形视觉。

2. 基本实现思路（四行 CSS 方案）
• 第一步：固定 width: min(100%, 23em) 以控制尺寸。
• 第二步：设定 aspect-ratio: 1 让图片框为正方形。
• 第三步：使用 object-fit: contain 保持图片纵横比并留白。
• 第四步：用 background: filter(src(attr(src)), blur() …) 将自身模糊版本作为背景。
• 说明 filter() 与 src() 的 CSS 机制、attr() 的动态属性取参功能。

3. 浏览器支持问题（Support Sadness）
• Safari 支持 filter()，Chromium 家族支持新版 attr()，但尚无浏览器支持全部特性。
• Chrome、Firefox、Safari 当前的支持状态 bug 链接一览。
• 因此四行完美方案暂无法跨浏览器落地。

4. 实用替代办法（Current Options）
• 用 CSS 变量 --img 保存图片 URL 代替不支持的 src(attr(src))。
• Safari-only 测试用 Epiphany 浏览器可验证。
• 模糊边缘透明问题原因：blur() 会在边缘像素引入透明度。
• 使用 SVG filter + edgeMode="duplicate" 替代 CSS blur() 修复边缘透明。
• 展示最终无半透明边缘的 Safari 可运行版本 Demo。

5. 跨浏览器版本设计（backdrop-filter 方案）
• 结构：在 .wrap 容器上设置背景为图片，img 叠在上面。
• backdrop-filter: blur() 模糊容器背景，实现视觉层叠。
• 修复 inline 元素底部空隙，建议 display: grid 保持对齐。
• 完整方案兼容主流浏览器，效果与原始类似。

6. 增强与 fading 效果
• 实现图片边缘平滑过渡到模糊背景：利用伪元素 ::before。
• 采用 grid 堆叠控制层级，通过 z-index 调整前后关系。
• 利用 mask: linear-gradient() 按方向渐隐；
• 若已知方向，可用 data-orientation 属性。
• 若有已知宽高比，可利用 sign() 函数自动判定横竖。
• 特殊情况：正方形图片需中间值（--bit 标志）避免对角线渐隐。

7. 当图像比例未知（Unknown Aspect Ratio）
• 提出两种策略：
• SVG filter 模糊生成 alpha mask（Safari 专用）。
• 详细分解 feGaussianBlur 和 feComponentTransfer 原理；
• 调整 alpha 映射以强化平滑透明带；
• 结果非线性渐变更自然但控制困难。
• 纯 CSS 容器比例计算方案：
• 结构上引入额外 .rect 容器与隐藏副本 img；
• 利用 container query 的 100cqw/100cqh 算出纵横比；
• 自动生成 mask 渐隐角度，适配所有主流浏览器。

8. 拓展与实验方向
• 可在 backdrop-filter 链中加入更多视觉特效（如 sepia()、hue-rotate()）。
• 展望未来 CSS 函数全面支持后的更简洁实现。

Frontend Masters

Non-Square Image Blur Extensions

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and…

AI 摘要：Koi Security 揭露了名为 ShadyPanda 的威胁行为者在过去七年间通过伪装的浏览器扩展发动攻击，从最初的联盟欺诈到最终的远程代码执行 (RCE, Remote Code Execution) 与间谍软件(SPYWARE) 操控，总计感染了超过 430 万 Chrome 与 Edge 用户。该攻击者利用浏览器商店的信任与自动更新机制，先积累用户再通过静默更新“武器化”扩展。研究揭示，此类威胁并非单一事件，而是浏览器扩展生态系统的结构性安全缺陷——信任被系统性滥用。

1. 威胁概述与发现经过
• Koi 研究团队追踪到长达七年的浏览器扩展攻击链，命名为 ShadyPanda。
• 总计影响 430 万 Chrome 与 Edge 用户，两条主要恶意活动：一为 RCE 后门感染 30 万用户，另一为间谍软件监控 400 万用户。
• 攻击者通过合法推广与 Google 认证获得用户信任，再利用静默更新执行恶意代码。

2. 第一阶段：壁纸欺诈与联盟滥用 (2023)
• 共 145 个伪装成壁纸或效率工具的扩展程序，在 Chrome 与 Edge 市场上发布。
• 利用联盟营销注入追踪代码、窃取佣金，并通过 Google Analytics 收集与兜售浏览数据。
• 攻击者学会了三大关键经验：审核只关注初次上架；用户信任“高安装量+好评”；伪装时间越长危害越大。

3. 第二阶段：搜索劫持与主动控制 (2024 初)
• 改以控制浏览器核心行为为目标，如 Infinity V+ 劫持搜索请求、篡改结果。
• 实施 Cookie 数据外泄与实时键入监控，通过明文 HTTP 发送用户输入数据。
• 攻击者虽被多次下架，但逐渐提升隐蔽性与数据利用能力。

4. 第三阶段：长线布局与后门植入 (2018–2024)
• 多个扩展（如 Clean Master）先以合法身份运营多年，获得“精选(Featured)”与“验证(Verified)”标记。
• 于 2024 年中期推送恶意更新，触发远程代码执行框架。
• 恶意负载可每小时从 C&C (Command and Control) 服务器获取命令，具备完全浏览器访问权限。
• 收集完整浏览数据、设备指纹、加密外传；能躲避分析并执行中间人攻击 (MITM)。
• 尽管部分扩展被移除，后端基础设施仍活跃于受感染浏览器。

5. 第四阶段：间谍网络与大规模监控 (2023–今)
• Clean Master 背后的同一发行商 Starlab Technology 推出 5 款新扩展，在 Edge 市场累积超 400 万安装。
• WeTab 新标签页 alone 拥有 300 万用户，持续收集访问记录、搜索输入、点击轨迹与完整指纹。
• 数据实时传输至多个中国服务器与 Google Analytics，用于行为分析与潜在情报搜集。
• 当前仍在 Edge 市场上架，具有全面权限且可随时被“武器化”。

6. 七年战术演进与系统漏洞
• 几个阶段由浅入深：从简单的联盟欺诈到长期潜伏与数据控制。
• 共通特征：代码签名相似、基础架构重叠、混淆方式演化一致。
• 核心问题在于浏览器扩展生态的信任模型：审核仅限初期、缺乏动态监控。
• 自动更新机制成为主要攻击向量，无需钓鱼或社工即可实现大范围感染。

7. 结语与安全启示
• 根本教训：信任本身是最大的漏洞。
• 静态代码审核无法应对多年潜伏的攻击链。
• Koi Security 推出行为分析与风险评分方案，关注“扩展安装后实际行为”而非声称功能。
• 呼吁浏览器平台与企业加大对行为监测与扩展生态安全的关注。

AI 摘要：文章深入浅出地介绍了 CSS Subgrid 的原理、语法以及在实际布局中的强大应用。作者从传统嵌套 Grid 布局的局限出发，展示 Subgrid 如何让子元素共享父网格结构，从而解决嵌套布局中兄弟元素协调、行列同步、可访问性与语义等长期难题。文末作者也提醒了 Subgrid 的坑点（如行空间保留、编号重置和不支持流式网格）及兼容性策略，最后展示了灵活采用 Subgrid 逐步优化布局的思路。

1. Subgrid 基础与语法逻辑
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套元素难以精确控制。
• Subgrid 允许共享父级 Grid 的行列定义，实现层级布局的连贯性。
• 示例演示如何让 <ul><li> 等语义化标签参与同一布局网格。
• 对比 Flexbox 及嵌套 Grid 的替代方案，指出 Subgrid 提升结构语义与简洁性。

2. 新布局可能性（New layout possibilities）
• 演示艺术作品集卡片布局中跨元素对齐的问题。
• Subgrid 能让兄弟卡片实现列宽一致、响应式调整，避免文字长度影响列宽。
• 动态响应内容变化，提高布局的自适应表现与一致性。

3. 使用 Subgrid 时的坑点与避坑指南（Subgrid Gotchas）
• 行空间保留(Row reservation)： 必须显式定义跨越行数，否则子网格会被压缩成单行。
• 网格线编号重置： Subgrid 继承父网格模板但重编号，索引从 1 重新开始。
• 不支持流式网格(Fluid grid)： auto-fill / auto-fit 等流体布局参数目前无法与 Subgrid 结合。
• 浏览器兼容性： 主流浏览器 2023 起支持，但覆盖率未达 90%，需提供 Fallback。

4. 向后兼容策略（Fallback for older browsers）
• 使用 @supports not (grid-template-columns: subgrid) 提供替代布局。
• 优先保证视觉与交互体验的一致性，而非强求原样重现。
• 建议在小规模组件中逐步应用 Subgrid。

5. 实战展示与结语
• 以 Stripe Developer 网站为典范，展示多层 Subgrid 嵌套布局的极限用法。
• 鼓励开发者从小范围、局部组件开始接入 Subgrid 改造。
• 强调 Subgrid 带来的语义与结构清晰性提升，呼吁更多实验与实践。

Joshwcomeau

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid…