#优质博文 #CSS #前端 #新特性
Gallery of Skewed Images with Hover Effect

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

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

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 如何简化复杂动效组件的实现。

author Temani Afif

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

#codepen #demo #CSS #前端 #新特性
Can You Build A Swipe UI With Only CSS?

这个 Codepen 例子使用了现代 CSS 的 Scroll Snap (滚动捕捉) 和 Container Queries (容器查询) 特性，来实现类似原生应用的滑动操作（如左滑删除、右滑收藏）

虽然 CSS 处理了滑动交互，但浏览器默认的滚动位置通常是 0（最左边）。因为左边有一个按钮，所以默认会显示左边的红色按钮。这段 JS 代码在页面加载时，自动将滚动条位置设置到中间元素的位置，确保用户一开始看到的是正常内容，而不是操作按钮。（注：视频中是说在 Safari 上的位置）

视频讲解在这里

这种方式比传统的监听 touchmove 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

Refs:
1. Practical CSS Scroll Snapping
2. CSS scroll snap
3. https://web.dev/articles/rendering-performance#3_js_css_style_composite

codepen.io

Swiper

...

#优质博文 #CSS #前端 #布局 #新特性 #Grid
Brand New Layouts with CSS Subgrid • Josh W. Comeau

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

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

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 带来的语义与结构清晰性提升，呼吁更多实验与实践。

author Josh W. Comeau

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…

#优质博文 #CSS #前端 #新特性
How to Add and Remove Items From a Native CSS Carousel (…with CSS)

AI 摘要：本文介绍如何利用 CSS Overflow Module Level 5 的新特性（如 ::scroll-button() 与 ::scroll-marker）创建一个完全不用 JavaScript 的原生 CSS 轮播组件。通过结合 HTML 的复选框控制展示项、CSS 伪元素控制滚动行为与可视化反馈，作者实现了可动态增删轮播项、支持自动滚动、滚动锚点定位的完整组件。文章分为三步：HTML 结构设计、基础样式编写与添加按钮/标记逻辑，展示了未来 CSS 在交互与状态管理上的潜力。

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

1. CSS 新特性简介
• 概述 CSS Overflow Module Level 5 模块，引入 ::scroll-marker 与 ::scroll-button() 两个新伪元素。
• 说明这些特性如何在滚动内容中自动生成导航控件，无需脚本交互。
• 当前仅 Chrome 142+ 提供支持，但为未来原生组件交互铺路。

2. HTML 结构与逻辑绑定
• 使用 <input type="checkbox"> 控制轮播项的显示与隐藏。
• 每个复选框对应一个 <li> 滑块，可预选或取消以动态控制内容。
• 通过 .component:has(input:not(:checked)) 实现逻辑选择，隐藏未选项。
• 结构层清晰，可改造为 <form> 以实现数据序列化提交。

3. CSS 基础样式与响应式设计
• 使用 max-width 与 aspect-ratio 实现轮播容器的响应式尺寸。
• 当存在选中项时使用 display: flex; 和 min-width: 100% 水平展示滑块。
• 未选中时显示占位样式，增强组件的状态反馈。

4. 滚动控制与标记实现
• 使用 scroll-snap-type: x 与 scroll-behavior: smooth 实现平滑滑动与对齐。
• 通过 anchor-name 将轮播容器转变为锚点，利用 position-anchor 精准定位滚动按钮与标记组。
• scroll-marker-group 属性控制标记插入位置，可调节排列与间距。
• 各标记通过伪类 :target-current / :target-before / :target-after 呈现不同状态风格。
• 实际布局通过固定定位 (position: fixed) 与锚点对齐 (justify-self: anchor-center) 来分布按钮与标记。

5. 滚动按钮的添加与行为控制
• 使用 ::scroll-button(left/right) 生成左右切换箭头。
• 通过 :enabled 控制显示状态，避免无效方向交互。
• 再次利用锚点定位调整按钮相对位置，内容用 Unicode 符号构建箭头。
• 补充 scroll-snap-align: center，保证切换时对齐完整幻灯片。

6. 扩展与应用
• 相同机制可拓展至分页、标签页等滚动式界面组件。
• 展示了未来 CSS 在状态驱动组件中的可行性与可维护性。
• 示例：产品展示轮播，可根据颜色选项动态切换视图。

author Daniel Schwarz

Frontend Masters

How to Add and Remove Items From a Native CSS Carousel (…with CSS)

The CSS Overflow Module Level 5 defines specs for scrolling controls that enable users to navigate overflow content without manually scrolling (like click-and-dragging the scrollbar, the trackpad, a scrollwheel, or the like). This includes scroll buttons…

#优质博文 #css #前端 #浏览器 #新特性
Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

AI 摘要：文章介绍了 Chrome 144 对 CSS 属性 overscroll-behavior 的改进：该属性现在在“不可滚动的滚动容器”上也有效，这意味着开发者可以用简单的 CSS 代码阻止页面在对话框（<dialog>）打开时滚动。作者解释了这一特性的技术背景、过去的限制及其在不同浏览器支持上的现状，并展示了一个实现示例。

author Bramus!

Bram.us

Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal)…

#优质博文 #CSS #HTML #前端 #新特性
巧用CSS ::details-content伪元素实现任意展开动画

AI 摘要：回顾了 <details> 与 <summary> 元素自 2018 年以来的演进，重点介绍了新引入的 ::details-content 伪元素，使得内容展开收起可实现平滑动画；同时讲解了内容锚点（hash）自动展开机制，以及 scroll-margin-block-start 的可用技巧。

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

1. HTML <details> 元素的演进
• 从 2018 年起 <details> 结构不断完善，三角箭头改为 ::marker，与列表元素标记统一。
• 新增 name 属性，支持手风琴式（accordion）互斥展开。
• 支持内容区域 hash 匹配自动展开，实现无 JS 的动态交互。
• 引入 ::details-content 伪元素，为内容区域提供 Shadow DOM 层级的样式控制。

2. ::details-content 实现动画展开效果
• 通过 transition 联合 content-visibility、height 等属性实现收展动画。
• 详细解释 allow-discrete 特性，使离散属性如 display 支持过渡动画。
• interpolate-size: allow-keywords 让 auto 尺寸参与动画计算。
• 属于渐进增强（progressive enhancement）方案，浏览器不支持也不会出错。

3. 锚点匹配与自动展开机制
• 当 details 内容的元素被 URL hash 定位时，details 自动展开。
• 该行为与 hidden="until-found" 类似，由 content-visibility 支持。
• 通过样式调整滚动定位：scroll-margin-block-start 设置元素滚动停留位置，提升体验。

4. 浏览器支持与语法参考
• 现代浏览器几乎在同一时间点全面支持 ::details-content。
• 使用语法为 selector::details-content，适用所有常规 CSS 属性。
• 由于支持良好，可放心在生产环境渐进式增强。

author 张鑫旭

Zhangxinxu

巧用CSS ::details-content伪元素实现任意展开动画 « 张鑫旭-鑫空间-鑫生活

details元素又新支持了一个CSS选择::details-content伪元素，可以匹配内容阴影DOM，我们可以利用这个伪元素进行区域背景设置，或者实现实用的展开收起的动画效果。

#优质博文 #CSS #前端 #Chrome #新特性
Anchor Positioning is transform-aware in Chrome 144+

AI 摘要：文章介绍了 Chrome 144 对 CSS 锚点定位（Anchor Positioning）机制的改进：从这一版本起，锚点定位将基于元素的“变换后”边界框（transformed bounding box），而不是此前的“未变换”状态，这让拥有 CSS transform 的元素上浮层、提示框等组件能够准确定位。该更新遵循 CSS 工作组（CSSWG）的最新规范决议，修复了长期存在的视觉错位问题。

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

1. 功能更新背景
• Chrome 144 将 Anchor Positioning 改为对 transform 变换敏感（transform-aware）
• 之前版本锚点计算基于未变换的边界框，导致定位错误

2. 技术细节与实现变化
• 新行为参考 CSSWG 规范修订（见相关 issue 链接）
• 更新后 tooltip、浮层等会根据元素的变换后位置进行定位

3. 实例与视觉演示
• 作者通过两个锚点的对比演示了旧版与新版定位差异
• Chrome 144 截图中两个 tooltip 均能正确跟随 transform 后的锚点

author Bramus!

Bram.us

Anchor Positioning is transform-aware in Chrome 144+

Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho

#CSS #前端 #新特性 #tip

虽然发过那么多次 CSS 新特性的博文推荐，但是在项目中实际用上的没那么多，决定开个新 tag 记录一下平常真在项目里用上了的小 tip！

CSS scroll-state 用来渐进式的增强滚动容器底部的羽化遮罩时还是很好用的～

refs:
1. Adaptive Alerts (a CSS scroll-state Use Case)
2. CSS @container scroll-state 容器滚动查询
3. Chrome 133 Goodies

 /* https://github.com/parcel-bundler/lightningcss/issues/887 */
  .scroll-feather-mask {
    container-type: scroll-state;
  }
  @container scroll-state(scrollable: bottom) {
    .scroll-feather-mask::before {
      content: '';
      background: linear-gradient(to bottom, transparent 0%, var(--gradient-bg-start) 70%, var(--gradient-bg-start) 100%);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      display: block;
      height: 5rem;
    }
  }

#优质博文 #CSS #前端 #动画 #新特性
More CSS random() Learning Through Experiments

AI 摘要：这篇博文由 Chris Coyier 撰写，通过一系列小实验展示了 CSS random() 函数的潜力与趣味。作者用它生成旋转星空、滚动视差(parallax)星空及基于滚动的点阵动效，探索随机数与动画、滚动时间轴 (scroll-driven animation) 以及 steps() 函数的互动效果。虽然目前仅 Safari 技术预览版支持该功能，但文章提供了可视化演示和代码片段，展示了 random() 带来的新创意空间和未来样式系统的潜能。

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

1. 引言与 random() 函数现状
• 作者介绍 CSS random() 函数的出现与规范化
• 指出目前仅 Safari Technical Preview 支持
• 强调实验性质：探索随机性在视觉设计中的可玩性

2. 旋转星空背景（Rotating Star Field）
• 灵感来自游戏 BALL x PIT 的旋转星空视觉
• 通过一系列定位在中心的 <div> 构建星体容器
• 使用 random() 控制星距、高度与旋转角度实现随机布局
• 结合 CSS 动画让内外圈星星反向旋转，形成动态层次感
• 提供 Demo 示例

3. 滚动视差星空（Parallax Stars）
• 扩展星空概念，将运动与滚动事件绑定
• 随机分组不同星星移动速度（100px、200px、300px）制造深度感
• 利用 animation-timeline: scroll(root) 与 animation-composition: accumulate 控制滚动叠加动画
• 展示了如何通过原生 CSS 控制视觉差与滚动互动
• 提供 Demo 示例

4. 网格点水平线（Horizontal Rules of Gridded Dots）
• 探索 random() 与 steps() 的结合，用离散滚动帧创造“跳动式”动画
• 创建点阵 <div> 元素随机偏移，再在滚动中平滑对齐
• 使用 view-timeline 触发每个分隔条的独立动画范围
• 通过渐变色与对齐位置制造视觉满足的“入场”效果
• 提供 Demo 示例

5. 结语与对未来 CSS 的思考
• random() 带来动态纹理与自然随机性的设计潜力
• 讨论当前需大量 <div> 的实现代价，期望未来 CSS 原生支持“可样式化网格单元”
• 总结：CSS 的随机性为网页设计开辟更多创造性方向

author Chris Coyier

Frontendmasters

More CSS random() Learning Through Experiments

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

#优质博文 #CSS #前端 #设计 #新特性
CSS squircle corner-shape preview tool

一个可交互的小工具，实时体验 CSS 新属性 corner-shape 带来的新圆角效果。可以通过直观调整圆角参数，形成从方形到 squircle 再到圆形的连续过渡，该特性目前仍处于实验阶段，仅在最新版本的 Chrome 中支持（2025 年 11 月）

www.squircle.style

CSS squircle corner-shape preview tool

Preview CSS squircle corner-shape in real time.

#优质博文 #CSS #前端 #容器查询 #新特性
The Range Syntax Has Come to Container Style Queries and if

AI 摘要：本文介绍了 CSS 新增的范围语法（range syntax）在容器样式查询（container style queries）与 if() 函数中的应用。通过 Chrome 142 起的支持，开发者可以比较数值、CSS 自定义属性（custom properties）或从 HTML 属性中取值（attr() 函数），从而在纯 CSS 内实现条件逻辑。作者展示了使用自定义属性控制背景亮度、通过 attr() 动态生成通知徽章，以及比较单位值（如 em 与 px）的实例，并分析了 container queries 与 if() 在作用域和灵活性上的差异。

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

1. 范围语法基础与 Chrome 142 支持
• 范围语法此前已用于媒体查询（media queries）与容器尺寸查询（container size queries），现在扩展至容器样式查询（container style queries）与 if() 函数。
• Chrome 142 起支持这一功能，可比较字面值、自定义属性或 attr() 提取的数值。

2. 使用自定义属性的容器样式查询示例
• 定义自定义属性 --lightness 控制背景亮度。
• 使用 @container style(--lightness < 50%) 及相关条件设置文字颜色。
• 说明容器查询作用方向是“向上”级联，只能查找父级容器定义的属性。
• if() 函数的条件判断也能在相同选择器块内使用。
• 对比 container queries 与 if() 的应用场景：前者适合作用域可控、命名容器（container-name），后者适合快速内联逻辑。

3. 配合 attr() 函数的范围语法
• 使用 HTML 自定义属性 data-notifs 展示动态通知数值。
• 应用 @container style(attr(data-notifs type(<number>)) <= 99) 设置徽章内容和形状。
• 当通知数值超过 99 时，通过另一查询输出“99+”，并调整内边距。
• 强调必须为 attr() 指定类型（如 <number> 或 <integer>）以支持数值比较。
• 列举范围语法支持的数据类型：<length>、<number>、<percentage>、<angle>、<time>、<frequency>、<resolution>。

4. 以字面值进行范围比较
• 演示在 h1 和 span 中比较 1em 与 32px 的场景。
• 使用 if() 根据字体大小动态调整字重（font-weight）以优化可读性。
• 说明 CSS 能跨单位比较相同数据类型值，增强设计灵活性。

5. CSS 条件逻辑的演进与延伸阅读
• 范围语法扩展至 container style queries 与 if() 函数，是 CSS 条件逻辑的重要迭代。
• 可与媒体查询、功能查询（feature queries）及容器尺寸查询组合使用。
• 推荐阅读：Media queries、Container queries、Feature queries。

author Chris Coyier

CSS-Tricks

The Range Syntax Has Come to Container Style Queries and if() | CSS-Tricks

Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.

#优质博文 #JavaScript #新特性 #前端 #错误处理
Error chaining in JavaScript: cleaner debugging with Error.cause

AI 摘要：本文介绍了在 JavaScript (ES2022) 中引入的 Error.cause 属性，展示它如何让错误处理更具可追溯性。作者 Matt Smith 通过实例说明了传统错误包裹的缺陷，以及 Error.cause 在保持原始堆栈信息、改进调试体验和测试断言方面的优势。最终总结出一套现代错误链最佳实践，帮助开发者构建更清晰、更稳健的错误追踪体系。

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

1. 传统错误处理的问题
• 层层调用的代码容易丢失原始错误信息；
• 以字符串拼接错误信息会破坏堆栈和错误类型；
• 导致调试困难，追踪难度高。

2. 引入 Error.cause 的改进
• 通过 new Error(message, { cause }) 保留原始错误；
• 可同时访问顶层与底层堆栈信息；
• cause 属性为非枚举属性，不污染日志或循环输出；
• 与 message、stack 一样保持一致的行为。

3. 实践与代码演示
• 示例：从 JSON.parse 到自定义函数的错误传递；
• 在日志中手动输出 err.cause 获取完整上下文；
• 适合层次式系统（如服务嵌套调用）排查问题。

4. 历史背景与 cause 出现前的替代方案
• 旧方案包括自定义字段 .originalError、字符串拼接等；
• 这些方式不统一且容易破坏原始错误结构；
• 标准化的 cause 提供更安全一致的机制。

5. 自定义错误类的支持
• 在自定义类中通过 super(message, { cause }) 传递原因；
• 适用 ES2022+ 环境即可直接使用；
• 对 TypeScript 用户，需在 tsconfig.json 中启用 "target": "es2022" 与 "lib": ["es2022"]。

6. 在测试中的应用
• 测试断言可直接验证 err.cause 类型；
• 提升测试可读性与准确性。

7. 实用技巧与注意事项
• 浏览器默认不输出层级错误链，须手动打印；
• 不建议过度使用错误链，避免干扰阅读；
• 可递归打印完整错误链（logErrorChain 与 logFullErrorChain 示例）；
• 实践场景：数据库异常→业务异常→服务异常的多层错误追踪。

8. 环境支持与现代用法总结
• 支持于现代浏览器与运行环境（Chrome 93+、Node.js 16.9+、Deno、Bun 等）；
• 推荐实践：
• ✅ 使用 Error(message, { cause })
• ✅ 支持内建与自定义错误类型
• ✅ 改善日志和调试体验
• ✅ 对 TypeScript 进行正确配置
• ⚠️ 记得手动输出或递归追踪错误链。

author Matt Smith

Allthingssmitty

Error chaining in JavaScript: cleaner debugging with Error.cause - Matt Smith

Use JavaScript's 'cause' property to chain errors, preserve context, and simplify debugging. Cleaner stack traces, better test assertions.

#优质博文 #CSS #新特性 #动画 #前端
Staggered Animation with CSS sibling-* Functions

AI 摘要：本文介绍了 CSS 中新引入的 sibling-index() 和 sibling-count() 两个函数，它们让我们可以直接通过纯 CSS 计算元素在兄弟节点中的相对位置，实现无需 JavaScript 的 “错位动画（staggered animation）”。通过结合这些函数与 :has() 伪类、transition 延时变量等技巧，作者演示了如何在选中某个卡片时，让它左右的卡片以时间递增或递减的顺序逐个消失，完整地展示了纯 CSS 动画逻辑与可替代 JS 的思路。

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

1. 新函数简介与基础概念
• sibling-index() 返回元素在兄弟节点中的序号，从 1 开始计数；
• sibling-count() 返回兄弟节点的总数（包含自身）；
• 二者结合可实现基于结构位置的样式或动画计算，例如递增宽度或动画延时。

2. 示例布局与核心结构
• 使用 .cards-wrapper 包裹多张 .cards 卡片，通过 flexbox 横向排列；
• 每个 .cards 内部含有覆盖整个卡片的 input[type="checkbox"]，点击后触发交互。

3. 主要的选择器逻辑

• .cards:has(:checked)：选中状态的卡片，用于高亮；
• .cards-wrapper:has(:checked) .cards:not(&)：当有选中卡片时，让其他卡片消失；
• & ~ .cards 与 .cards:not(&) 分别控制右边与左边卡片的延迟方向（递减或递增）。

4. 样式声明解析
• 高亮选中卡片：添加虚线边框；
• 让未选卡片消失：透明度降为 0，宽度缩为 0，并在动画结束后设置 display: none；
• 过渡动画：transition-behavior: allow-discrete 保障 display 的离散变化；
• 时间递减／递增：
• 右侧卡片使用 --n: calc(sibling-count() - sibling-index() + 1)；
• 左侧卡片使用 --n: sibling-index()；
• 最终延时计算：transition-delay: calc(var(--n) * 0.2s)。

5. 动画示例与完整规则组合
• 当某张卡片被选中时，其它卡片依序向外逐个消失，形成错位延迟动画效果；
• 所有规则组合后实现纯 CSS 版本的交互过渡，无需额外脚本支持。

6. 兼容方案（Fallback）
• 对不支持 sibling-* 函数的浏览器，通过 JavaScript 动态计算 --n 值；
• JS 逻辑基于监听 change 事件手动设置左右两侧卡片的延时变量；
• 保持与 CSS 核心机制一致的动画行为。

7. 扩展示例与实践思路
• 使用 sibling-index() 实现类似手风琴（accordion）式开合动画；
• 即便不带延时，也可通过该函数控制显示隐藏的顺序与方向；
• 展示纯 原生 CSS 实现复杂交互效果的潜力。

author Preethi Sam

Frontend Masters

Staggered Animation with CSS sibling-* Functions

The CSS functions sibling-index() and sibling-count() return an element’s position relative to its siblings and the total number of siblings, including itself. This is useful for styling elements based on their positions.

#优质博文 #CSS #前端 #新特性
When to use CSS text-wrap: balance vs. text-wrap: pretty

AI 摘要：本文系统介绍了 CSS 属性 text-wrap 的功能、可选值及其对文本可读性与界面美观度的影响，重点对比了 text-wrap: balance 与 text-wrap: pretty 两种排版策略在不同场景的使用。

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

1. 属性综述与支持现状
• text-wrap 于 2024 年进入“新增可用”(Newly available) 基线状态，最新版本主流浏览器支持，旧版本不兼容。
• text-wrap 控制文本如何换行，并允许开发者关闭或自定义换行行为。
• 支持的值包括：wrap、nowrap、balance、pretty、stable。

2. 各个属性值解析
• wrap：默认行为，按合理点换行，确保可读性。
• nowrap：禁用换行，文本溢出容器。
• balance：通过调整行长平衡视觉比例，提升排版对称性。
• pretty：避免“孤字行”(orphans)，平衡段落末行排版，Safari 上该属性避免出现“排版河”(typographic rivers)。
• stable：理论上用于编辑文本时防止换行重算，但目前表现与 wrap 一致，不稳定。

3. text-wrap: balance 与 text-wrap: pretty 深度比较
• 共同点：均改善可读性、排版平衡度和视觉流畅性。
• 差异：
• balance 专注行长平衡。
• pretty 注重避免孤字与断词问题，更复杂但视觉自然。
• 性能考量：两者都较为耗费计算资源。
• balance 在 Chrome 中受 6 行限制，Firefox 限 10 行，Safari 不限。
• pretty 性能影响更大但无行数限制。

4. 浏览器兼容与前瞻
• text-wrap: pretty 在当前（2025 年 9 月）仍未被 Firefox 支持，可作为渐进增强使用。
• 新值 text-wrap: avoid-short-last-lines（前称 avoid-orphans）尚无浏览器支持。
• 各浏览器在算法实现上各异，未来或将进一步优化。

5. 应用与实践建议
• 小段文本（标题、卡片内容）适合 balance。
• 段落性文字可尝试 pretty 以优化阅读体验。
• 注意性能评估与浏览器兼容性，可使用 @supports 检测。
• 结合 ch 单位设定文本宽度并不直接影响 text-wrap 效果，但两者可配合。

6. 用户体验与设计意义
• 平衡行长与避免孤字行能显著提升可读性与整体 UI 美感。
• 优化排版对可访问性 (Accessibility) 和可用性 (Usability) 均有积极效果。
• 排版优化是现代前端设计中提升用户体验的重要环节。

author Daniel Schwarz

LogRocket Blog

When to use CSS text-wrap: balance vs. text-wrap: pretty - LogRocket Blog

Compare and contrast two CSS components, text-wrap: balance and text-wrap: pretty, and discuss their benefits for better UX.

#优质博文 #CSS #前端 #layout #容器查询 #新特性
Super Simple Full-Bleed & Breakout Styles

AI 摘要：本文详细介绍了如何在单栏布局中，通过现代 CSS（如 Grid、Container Query Units、border-image、伪元素等）创建“满屏延展”与“宽度突破”元素。作者比较了旧式 100vw 方法与基于 Grid 的新式做法，指出前者因滚动条计算问题较为落后，并展示了一个简单、可扩展的 Grid 结构可同时实现全宽元素、局部扩展元素，以及带全宽背景的局部内容。文章还讨论了细节问题如 box-sizing、负 margin、嵌套结构、浮动兼容性以及是否必须使用 Grid 等，最终总结：最佳方案依情景而定，但现代 CSS 已能极大简化此类复杂布局。

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

1. 背景与问题定义
• 起因来自 Reddit 讨论：如何实现内容区中部分元素「全宽（full-bleed）」或「突破（breakout）」布局
• 对比老方法（100vw+偏移）与新方法（基于 Grid 中央列与左右对称列）
• 旧方法缺陷：100vw 不计滚动条，易引发水平滚动条
• 新方法更现代、更具弹性

2. 基础布局（The Base Grid）
• 在 body 上设定单列 Grid，最大宽度限制为 min(100%, 60em)
• justify-content: center 居中内容
• 保留 content-box 内边距空间以确保文字留白
• 所有子元素（如标题、段落、图片）自然落入此单列结构

3. 实现 Full-Bleed 元素
• 将 html 设为 container-type: inline-size ，元素用 width: 100cqw 获取可用宽度（不含滚动条）
• 使用 justify-self: center 居中
• 注意：html 上不能有 margin、padding，否则影响计算基准
• 若中间有容器层级，可通过 var(--full-w) 传递容器宽度
• 对非图片元素设置 box-sizing: border-box; padding: .5em；对图片则避免 padding
• 替代方案：用负 margin（calc(50% - 50cqw)）调整横向位置

4. 实现 Breakout 元素
• 比主栏宽，但未满屏，宽度公式为 min(100cqw, 100% + 2*4em)
• 或使用负 margin 实现，适合文本类内容
• 可通过自定义属性 --dx 调整突破值（正为扩展，负为收缩）
• 实例展示诸如 .break-elem--mini、.break-elem--maxi 等不同宽度的组合

5. Full-Bleed 背景处理
• 使用 border-image 扩展背景至全屏，如 border-image: var(--img) fill 0/ / 0 50cqw
• 支持颜色填充、渐变、图像背景等
• 针对带角度渐变或复杂背景，可通过计算 50cqw - .5*var(--grid-w) 精确控制延展范围
• 针对窄屏问题，利用 max() 考虑边距，保证背景元素真正全宽
• 实图背景的更优方案：使用伪元素 ::before 绝对定位配合 inset 实现，可支持 background-size: cover

6. 组合使用与分离视觉样式
• 可组合类 .break-elem + .full-bleed-back 实现“突破+全宽背景”效果
• 视觉样式与布局样式分离（例如 .box 仅用于颜色与边框）
• 避免边框或背景与 full-bleed 背景冲突的示例

7. 嵌套与兼容性
• figure 与 img 示例：图片全宽但说明文字保持正常列宽
• 确保 img.full-bleed-elem { display: block } 可正确工作
• 为了跨浏览器兼容 justify-self 可作用 block 元素，暂时让 figure 定义自身为 Grid

8. 浮动元素兼容性
• 若需在同一布局支持浮动（float）图片等，可增加内容包装容器
• 替代 justify-self 为 margin-left: calc(50% - 50cqw) 以保持结构适应性

9. 最后思考：Grid 是否必要
• 若布局需求简单，可用 body 的 padding/margin + limited main 替代 Grid
• 若需要间距控制、自动对齐等特性，Grid 仍具优势
• 结论：取决于上下文，现代 CSS 为设计师提供了灵活的选择空间

author Ana Tudor

#优质博文 #CSS #前端 #新特性
Detect fallback positions with anchored container queries from Chrome 143

AI 摘要：本文介绍了 Chrome 143 支持的 anchored container queries，它解决了 CSS Anchor Positioning Level 1 规范中无法识别元素使用了哪种回退定位的问题。通过 container-type: anchored 和 @container anchored(fallback: …) 的新语法，开发者可以在纯 CSS 中检测锚定元素（如 tooltip 或 popover）使用的最终定位方式，并进行样式调整，无需借助 JavaScript。

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

1. 现有问题与功能背景
• CSS Anchor Positioning API 允许元素与锚对象绑定，并定义多个回退 (fallback) 定位方案。
• Level 1 规范中，浏览器自动调整位置但 CSS 本身无法得知采用了哪种回退方式。
• 导致样式无法自适应最终的显示状态（如 tooltip 箭头方向错误），过去常需借助 JavaScript 解决。

2. 新特性：Anchored Container Queries
• 来自 CSS Anchor Position Level 2 规范的新机制，引入 container-type: anchored。
• 该属性让定位元素成为可感知锚定状态的容器 (container)。
• 使用 @container anchored(fallback: …) 查询语法，可检测当前被应用的回退选项。
• 示例展示 tooltip 根据最终定位方向自动切换箭头符号与位置，实现完全基于 CSS 的适配。

3. 应用方式与优势
• 无需监听器或手动逻辑，即可通过 CSS 自主响应布局变化。
• 对 Popover API 的支持更自然，可隐式创建锚点。
• 扩展应用包括：动态改变菜单背景色、移动边框位置、调整圆角、根据回退位置触发动画。
• 极大提升组件的鲁棒性、上下文感知能力和可维护性。

4. 相关资源与规范
• Chrome Platform Status
• Spec: CSS Anchor Positioning Level 2

author Una Kravets

Chrome for Developers

Detect fallback positions with anchored container queries from Chrome 143  |  Blog  |  Chrome for Developers

#优质博文 #CSS #前端 #动画 #新特性
Springs and Bounces in Native CSS

AI 摘要：本文系统讲解了 CSS 新增的 linear() 时间函数如何取代传统 Bézier 曲线实现物理感动画（如弹簧、反弹等）。作者展示了从手动绘制到使用工具自动生成曲线的全过程，分析了 linear() 的语法结构、性能表现及使用局限，并给出实际工程中使用变量与媒体查询的最佳实践。

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

1. 背景与问题
• 传统的 CSS 动画多依赖 cubic-bezier() 曲线控制速率，但难以模拟弹性或物理效果。
• 开发者过去往往用 JavaScript 库（如 React Spring）实现，但带来主线程阻塞与性能权衡。
• CSS 新增的 linear() 函数允许通过一系列线性分段点定义任意缓动曲线，可原生表达弹跳、振动等效果。

2. linear() 函数原理
• linear() 接受一组 0–1 范围的浮点值，各点线性连接形成曲线。
• 可超出 0–1 实现“overshoot”（超冲），营造弹性。
• 点数越多，动画越平滑；作者从 11 到 50 点的实验验证了差异。

3. 工具实战
• 推荐使用 Linear() Easing Generator 与 Easing Wizard 自动生成数据。
• 新语法支持为每个点标注时间百分比，使曲线在较少数据点下更精确。
• 工具可将弹性参数（stiffness、damping、mass）转化为 CSS 代码，并计算最优持续时间。

4. 限制与挑战
• 时间基准限制：CSS 必须定义 duration，不支持真正的物理时间动态计算。
• 中断问题（interrupts）：React Spring 可处理惯性，而 CSS 转场中断后立即反向，缺乏自然过渡感。
• 性能考量：实际测试显示即使 linear() 包含百余数据点，帧率与体积影响极小（仅增约 1.3 kB gzip），但建议通过 CSS 变量复用。

5. 实用建议与模式
• 将常用的 linear() 表达式与持续时间封装为 CSS 变量（design tokens）。
• 用 @supports 检查浏览器兼容性并提供 cubic-bezier() 回退。
• 结合 @media (prefers-reduced-motion) 照顾无障碍动效偏好。
• 在注释中记录物理参数，方便未来调整。

author Josh W. Comeau

Joshwcomeau

Springs and Bounces in Native CSS • Josh W. Comeau

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…

#优质博文 #JavaScript #前端 #新特性 #浏览器
好东西。
URLPattern is now Baseline Newly available

AI 摘要：介绍了已进入 Baseline 的新浏览器功能 URLPattern API，它为 URL 匹配和路由提供了标准、简洁且高性能的原生解决方案。过去开发者需使用复杂的正则表达式或第三方库来解析和提取 URL 参数，而 URLPattern 使得这些操作更清晰、可维护且无需额外依赖。

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

1. URLPattern 基础与核心概念
• 介绍 URLPattern API 的推出背景：取代传统正则匹配与第三方路由库。
• 提供新 URLPattern 接口，可通过 .test() 与 .exec() 操作直接匹配并提取参数。

2. 基本 URL 模式匹配
• 对比旧方法（URL + 正则）与新 API 的简化写法。
• 展示匹配 /users/:id 的例子，体现代码可读性和简洁性。

3. 提取动态参数（Dynamic Parameters）
• 传统方法依赖匿名的正则捕获组，易出错。
• URLPattern 支持命名参数，可通过结构化对象获取（如 result.pathname.groups）。
• 示例：提取书籍分类 category 与 id。

4. 复合匹配（Compose Multipart Matches）
• 传统方式需多处判断主机名与路径。
• URLPattern 原生支持同时匹配多个部分，例如 hostname + pathname。
• 示例：匹配 .cdn.com 下的 /images/ 文件。

5. 减少项目依赖（Project Dependencies）
• URLPattern 是内置能力，无需加载第三方库，减少 bundle 体积与维护成本。
• 使用浏览器原生实现，跨引擎一致且性能更优。

6. 深度用法详解（Detailed Usage）
• 多种典型场景：
• 路径匹配与参数提取：示例 /products/:category/:id 展示 .test() 与 .exec() 双用法。
• 匹配子域名与版本号：支持在 hostname 层定义变量如 :subdomain.myapp.com，适用于多子域架构。
• 通配符与正则表达式结合：通过 * 和嵌入式正则增强匹配灵活度，如 /users/:userId(d+)/assets/*.(jpg|png|gif)。

7. 实战示例：Service Worker 路由
• 利用 URLPattern 拦截 fetch 事件，根据路径实行不同缓存策略。
• 示例：
• /images/* 采用缓存优先；
• /api/* 使用网络优先。
• 显示该 API 在渐进式 Web 应用（PWA）中的现实意义。

8. 结语与扩展阅读
• URLPattern 提升代码可维护性，简化路由逻辑。
• 推荐进一步查阅 MDN Web Docs 了解完整参考。

author Jay Rungta

web.dev

URLPattern is now Baseline Newly available  |  Blog  |  web.dev

URLPattern became Baseline Newly available as of September 15, 2025.

#优质博文 #CSS #前端 #新特性 #course
Modern CSS Round-Out Tabs

AI 摘要：本文探讨了如何利用现代 CSS 的 shape() 函数与 clip-path 属性，构建出带有圆角、延展弧线的标签 (Tabs) 样式。文章从早期依赖多元素遮罩的实现方式出发，逐步演示如何使用 shape() 绘制可响应的标签形状，并通过变量 (CSS Variable) 优化灵活度。后续还包含兼容性 fallback、单方向滚动控制 overflow-inline/overflow-block 的技巧，以及对可访问性 (Accessibility) 实现的反思。

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

1. 背景与旧方案
• 作者回顾早期制作“round-out tabs”的方案，需要为每个标签使用四个额外元素来模拟圆角连接效果。
• 这种方法复杂、难维护且受限于层叠遮罩实现。

2. 使用 shape() 实现圆角标签
• 介绍 shape() 函数与 clip-path 的结合，能直接以绘图指令定义形状，无需额外 DOM 元素。
• shape() 的指令包含 from、curve、vline、hline 等步骤，用以绘制从矩形裁剪出的弧线标签外形。
• 每一步演示曲线、直线和坐标计算，使形状既可固定又可相对灵活。
• 最终实现完整闭合形状，只显示实际的标签区域。

3. 参数变量化与可动态调整
• 将固定数值（如 10px、20px）抽象为自定义属性 (--tabGirth)，以便根据变量调整标签厚度。
• 使用 Knobs 等交互工具实时修改变量值以测试视觉效果。

4. 外观与行为增强
• 添加 hover 与 active 效果，通过 translate 实现微动。
• 解决非换行标签的滚动问题，利用 overflow-inline: auto 与 overflow-block: clip 控制单方向滚动。
• 使用 filter 为 clip 后的形状添加阴影效果。

5. 浏览器兼容性与 Fallback
• 当前仍有浏览器未完全支持 shape()。
• 提供 @supports 条件判定，未支持时以 border-radius 提供圆角退化方案，保证视觉一致性。

6. 可访问性 (Accessibility) 讨论
• 使用 anchor 作为基础标签实现，并在有 JavaScript 时补上 aria 属性。
• 承认目前键盘导航功能不足，提醒开发者参考更完善的无障碍 Tabs 模式。

7. 相关与延伸参考
• 提到 Temani Afif、Ana Tudor 的圆角或内凹标题组件为现代 CSS 造型提供灵感。

author Chris Coyier

Frontend Masters

Modern CSS Round-Out Tabs

Quite a while back I made a set of “round out” tabs, where the literal tab part of the UI would connect to the content below with a rounded edge that flared out as it connected. A bit tricky of a situation, even now!

#优质博文 #CSS #前端 #color #新特性
学到很多，比如 rgb 可以不加 a。
A pragmatic guide to modern CSS colours - part one

AI 摘要：本文系统介绍了现代 CSS 颜色系统的演变与新特性，重点包括新版 rgb() 与 hsl() 的语法变化、相对颜色（relative colours）的用法、改进的亮暗主题处理方式、颜色空间（colour spaces）的应用，以及应对更广色域设备的新工具。作者旨在帮助不专注设计的开发者高效掌握现代 CSS 色彩特性，从而提高代码一致性与灵活性。

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

1. 现代 CSS 写法演进
• 从传统的十六进制与函数写法过渡到更灵活的空间分隔语法
• 新版 rgb() 与 hsl() 可直接包含透明度通道，无需“a”版本
• / 用于区分主色值与 alpha 通道，提高一致性
• 空格分隔语法引入新规范以支持更多色彩函数，如 oklch()、hwb()、color()

2. 相对颜色（Relative Colours）

• 允许从已有颜色生成新颜色，通过语法 rgb(from #ff0000 r g b) 实现
• 可结合自定义属性（CSS variables）动态调整不透明度或亮度
• 帮助快速生成同系浅色、深色变化，便于主题一致管理
• 可用于构造组件风格如提示框（toast），只需修改基础色

3. 改进的亮暗主题（Theming）
• 传统方法需在媒体查询与主题类中重复定义变量
• light-dark() 函数允许在单条声明中同时定义明亮与暗色配色
• 结合 color-scheme 可根据用户系统偏好自动切换
• 支持组件级别的独立 color-scheme 控制，增强设计灵活度

4. 颜色空间（Colour Spaces）
• 颜色空间决定浏览器如何计算与过渡颜色
• 支持在 linear-gradient() 中指定颜色空间，如 oklch、lab、hwb
• 新空间可避免传统 sRGB 中的颜色过渡失真
• “longer hue” 参数用于控制渐变方向，生成更自然或彩虹式渐变

5. 扩展色域与精准配色
• 介绍 color() 函数与广色域（wide gamut）空间 display-p3 的使用场景
• 适用于与品牌色或印刷标准（如 Pantone）匹配需求
• 浏览器会自动降级不支持的色域，保证兼容性

6. 展望与总结
• CSS 色彩能力远超以往，包括即将介绍的 color-mix()、oklch() 等函数
• 开发者无需成为设计师，也能直接在代码层面进行色彩管理与调和

author Kevin Powell

Piccalilli

A pragmatic guide to modern CSS colours - part one

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.