Riley Shaw 分享了一朵梦幻般的 CSS 和 JS 花朵，花瓣如万花筒般旋转 🪷

Fabio E Zola 的这段 GLSL 动画中，闪烁的正弦波脉动着。您可以暂停动画、截屏，或从顶部的控制面板切换像素比例。

jhey ʕ•ᴥ•ʔ (@jh3yy): toggle 🌛
brought to life with CSS && SVG

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?