#优质博文 #CSS #前端 #新特性
介绍 Chrome 144 新推出的 ::search-text 伪元素，以及如何利用 CSS 相对颜色语法统一美化各种文本高亮样式。
How to Style the New ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks

AI 摘要：这篇文章探讨了 Chrome 144 新引入的 ::search-text 伪元素，它允许开发者自定义浏览器“页面内查找”（Ctrl+F）匹配到的文本样式。作者对比了 ::selection、::target-text 等多种高亮相关伪元素的功能差异，并重点分享了如何利用 CSS 相对颜色语法（Relative Color Syntax）构建一套自动适应背景、高对比度且能区分不同高亮类型的动态样式方案，旨在提升 Web 内容的可访问性与用户体验。

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

1. 核心特性：认识 ::search-text
• ::search-text 专门用于选中页面内查找（find-in-page）匹配到的文本。
• 默认情况下，Chrome 中匹配项为黄色，当前目标项（::search-text:current）为橙色。
• 该伪元素的推出让开发者能够突破浏览器默认 UI，自定义搜索反馈的视觉呈现。

2. 高亮伪元素全集概览
• ::search-text：页面查找匹配文本，包含 :current 状态。
• ::target-text：URL 文本片段（Text fragments）高亮，常用于从搜索引擎跳转后的自动定位。
• ::selection：用户通过光标手动选中的文本。
• ::highlight()：通过 JavaScript 的 Custom Highlight API 定义的自定义高亮。
• ::spelling-error 与 ::grammar-error：主要用于可编辑内容中的拼写和语法错误标记。

3. 设计思路：可访问性与动态样式
• 为什么要自定义：解决默认颜色在特定背景下对比度不足（Color contrast）的问题，并增强视觉强调。
• 技术限制：高亮伪元素支持的 CSS 属性有限，例如 background-clip 和 backdrop-filter 通常无法使用。
• 相对颜色语法（Relative color syntax）：利用 rgb(from var(--bg) calc(255 - r) ...) 实现自动颜色反转，确保高亮色始终与背景色形成强烈对比。

4. 进阶实战：区分重叠的高亮状态
• 视觉区分：当用户在搜索结果中又手动选中了文字，需要确保不同类型的高亮（如 ::selection 和 ::search-text）能被同时辨识。
• 差异化策略：通过反转不同的 RGB 通道（如只反转 R 和 G，或只反转 B）来赋予每种伪元素独特的色调。
• 透明度处理：为非当前目标的高亮添加 alpha 透明度，使它们在相互叠加时产生融合效果，方便用户识别每个高亮的起止位置。
• 兼容性与未来：提及了 contrast-color() 函数在 CSS Color Module Level 5 中的潜力，作为未来更简便的替代方案。

author Daniel Schwarz

CSS-Tricks

How to Style the New ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks

Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches…

cosine - 前端人の日常频道

#新动态 #Astro #Cloudflare #前端 #开源 好啊，Astro 被 Cloudflare 收购了。 The Astro Technology Company joins Cloudflare | Astro AI 摘要：Astro 框架背后的公司 The Astro Technology Company 宣布加入 Cloudflare，此举旨在确保 Astro 能够获得充足资源并重新聚焦于核心框架的开发。Astro 将继续保持开源、MIT 许可，并支持所有部署目标，包括 Cloudflare…

#优质博文 #前端 #新特性 #CSS #锚点定位 #course
Connecting Circles With Anchor Positioning II

AI 摘要：本文是作者关于使用 CSS 锚点定位技术连接圆圈系列的第二部分，主要关注在连接两个圆圈的箭头内部计算并显示它们之间的距离。文章展示了改进后的 HTML 结构和 CSS 变量定义，并通过交互式 CodePen 示例演示了拖动圆圈时距离实时更新的效果，但目前该功能仅支持 Chrome 浏览器。

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

1. 引言与目的
• 前言回顾：基于前一篇关于连接圆圈的实现。
• 核心改进：在箭头形状内增加计算并显示两个圆圈之间距离的功能。
2. 技术实现细节
• HTML 结构：展示了使用 div 元素分别表示圆圈 (circle) 和连接箭头 (arrow) 的基本结构，其中 arrow 元素通过 x, y 等属性引用圆圈。
• CSS 变量：定义了用于控制箭头尺寸（--r, --a, --d）、圆圈与箭头间距（--g）以及颜色（--c）的关键 CSS 变量。
3. 交互式演示与局限性
• 实时更新：通过 CodePen 演示，用户可以拖动圆圈，观察距离值如何在箭头内部实时更新。
• 多圆圈示例：提供了一个包含多个圆圈的 CodePen 演示，展示了该技术在更复杂场景下的应用潜力。
• 浏览器兼容性：目前该功能仅在 Chrome 浏览器中支持。
4. 相关资源与拓展阅读
• 前作链接：提供了《Connecting Circles With Anchor Positioning》的链接，方便读者了解原始实现。
• 其他 CSS 技巧：列举了作者的其他 CSS 技巧文章，如《Fizz Buzz using Modern CSS (no HTML)》。

author Temani Afif

Css-Tip

Connecting Circles With Anchor Positioning II

Connect circles with arrows and show their distance using modern CSS

#优质博文 #JavaScript #Temporal #日期处理 #前端 #新特性
一篇 Temporal 的介绍。
Date is out, Temporal is in

AI 摘要：本文深入探讨了 JavaScript 内置 Date 对象的诸多缺陷，包括其不一致的解析行为、缺乏时区支持以及最重要的其作为可变对象 (mutable object) 导致的意外副作用。作者提出 Temporal API 是 Date 对象的完美替代方案，Temporal 作为命名空间对象 (namespace object)，提供了更直观、更细致的日期时间处理能力，并且其所有操作都返回新的不可变对象 (immutable objects)，彻底解决了 Date 的核心问题。文章鼓励开发者提前试用 Temporal，以推动其最终标准化和广泛应用。

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

1. JavaScript Date 对象的历史与痛点
• 构造函数行为不一致：Date 构造函数 (constructor) 在处理月份、年份推断和字符串格式时存在诸多怪癖和不一致性。
• 内部机制与命名误导：Date 实际上表示的是以毫秒为单位的 Unix 时间戳 (Unix timestamp)，而非纯粹的日期，容易引起混淆。
• 功能受限：缺乏对复杂时区、夏令时 (Daylight Saving Time) 以及非公历 (Gregorian calendar) 的原生支持。
• 对性能的影响：由于 Date 的局限性，开发者常需引入大型第三方库 (third-party library) 来解决问题，导致性能开销。
2. Date 对象的核心问题：可变性 (Mutabilty)
• 原始值 (Primitive Values) 的不可变性：解释 JavaScript 中数字、布尔值等原始数据类型 (primitive data types) 是不可变 (immutable) 的，变量赋值是创建副本。
• 对象 (Objects) 的可变性：解释对象是可变 (mutable) 的，变量存储的是引用 (reference)，对对象的修改会影响所有引用。
• Date 的可变性后果：Date 对象作为构造函数创建的对象，具有可变性。对 Date 实例 (instance) 的修改会直接改变原始对象，导致意外的副作用和难以追踪的错误。
• 代码示例：通过 addDay 函数的例子，展示了 Date 对象的可变性如何导致“今天”和“明天”变成同一个日期。
3. Temporal API 的设计理念与优势
• 取代 Date 的新方案：Temporal API 被设计为 Date 对象的全面替代品，旨在提供现代、健壮的日期时间处理能力。
• 命名空间对象 (Namespace Object) 设计：Temporal 不是构造函数，而是类似 Math 的命名空间对象，包含多个更专业化的类 (classes) 和方法。
• 丰富的日期时间类型：Temporal 提供了 Duration、Instant、PlainDate、PlainDateTime、ZonedDateTime 等多种类型，能够更精确地表示日期、时间及两者结合的不同概念。
• 核心优势：不可变性 (Immutability)：Temporal 对象的所有操作方法 (methods)，例如 add() 和 subtract() ，都不会修改原始对象，而是返回一个新的 Temporal 对象，从根本上解决了 Date 的可变性问题。
• 代码示例：展示 Temporal 如何通过返回新对象来避免副作用，并使得链式调用 (chaining methods) 成为可能，大幅提升了代码的清晰度和安全性。
4. Temporal API 的当前状态与未来展望
• 标准化进展：Temporal 提案已进入 TC39 标准化过程的第三阶段 (Stage 3)，已被推荐实现。
• 浏览器支持：已在 Chrome 和 Firefox 等主流浏览器的最新版本中落地实现。
• 开发者参与：鼓励开发者试用 Temporal 并提供反馈，以帮助完善最终规范。
• 未来前景：Temporal 将为 JavaScript 带来合理、现代的日期时间处理能力，彻底改变现有 Date 对象带来的困境。

author Mat “Wilto” Marquis

Piccalilli

Date is out, Temporal is in

Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.

#优质博文 #前端 #CSS #新特性
4 CSS Features Every Front-End Developer Should Know In 2026 · January 7, 2026

AI 摘要：本文着重介绍了四个前端开发者在 2026 年前应熟练掌握的 CSS 新特性，这些功能已在 2025 年发布。它们包括 sibling-index() 和 sibling-count() 函数，用于基于兄弟元素索引实现动态动画；@container scroll-state() 查询，提供对滚动容器状态的精细控制；text-box 属性，用于精确管理文本行高和间距，实现像素级对齐；以及功能更强大且类型安全的 typed attr()，允许直接在 CSS 中使用 HTML 属性并进行类型验证。这些特性旨在显著提升 Web 界面的交互性、设计精确度和开发效率。

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

1. CSS 主题回顾与前瞻
• 回顾了 2023、2024 年的 CSS 特性推荐，强调本文是其系列主题的一部分。
• 文章重点关注 2025 年已发布并值得开发者在 2026 年掌握的 CSS 新功能。
2. sibling-index() 和 sibling-count() 函数
• 核心功能： 允许开发者将元素相对于其兄弟元素的位置（索引）作为计算值使用。
• 典型应用：
• 基于索引错开过渡动画 (stagger animations)，实现元素按序出现或消失的效果，例如结合 @starting-style 创建平滑的入场动画。
• 可以通过 calc((sibling-index() - 1) * 100ms) 使第一个元素立即开始动画。
• 其他用途： 旋转色相 (rotate hues)、自动编号等。
• 参考资源：
• MDN sibling-index()
• MDN sibling-count()
3. @container scroll-state() 查询
• 核心功能： 允许查询滚动容器的特定状态，实现基于滚动行为的渐进增强 (progressive enhancement) 样式。
• 使用前提： 需在目标容器上设置 container-type: scroll-state。
• 可查询状态：
• stuck：查询 position: sticky 元素何时被“粘住”。用途：改变导航栏样式，提示用户内容被覆盖。
• snapped：查询滚动吸附 (scroll-snap) 对齐何时激活。用途：高亮当前吸附的项，或弱化其他项。
• scrollable：查询内容何时溢出容器且可滚动，可检测滚动方向。用途：显示滚动提示，调整填充。
• scrolled：查询内容何时向特定方向滚动。用途：根据滚动方向显示/隐藏头部或导航栏。
• 参考资源：
• Chrome Blog: CSS Scroll State Queries
• MDN: Container scroll-state queries
4. text-box 属性
• 核心功能： 精确控制文本框的垂直间距，去除字体默认包含的“半行高” (half-leading) 空白。
• 解决问题： 解决 Web 字体渲染中，字体包含额外空白导致文本无法精确对齐的问题。
• 典型应用：
• 实现像素级对齐，例如将文本的基线 (baselines) 或 x-高度 (x-heights) 与网格或其他元素精确对齐。
• 示例：h1 { text-box: trim-both cap alphabetic; } 可以同时修剪顶部大写字母高度和底部字母基线处的空白。
• 未来趋势： 作者认为它最终会成为默认行为。
• 参考资源：
• Chrome Blog: CSS text-box-trim
5. typed attr() 函数
• 核心功能： attr() 函数的增强版，允许在 CSS 中直接、类型安全地使用 HTML 属性值，并支持类型检查和回退 (fallback)。
• 优势： 提供了 HTML 和 CSS 之间强大的桥梁，使得 CSS 可以根据 HTML 属性动态调整样式。
• 典型应用：
• 传递颜色： background: attr(data-bg color, black); 可以从 data-bg 属性获取颜色，如果无效则使用 black。
• 传递数字： grid-template-columns: repeat(var(--_columns), 1fr); 结合 CSS 变量从 data-columns 获取数字值。
• 类型验证： 使用 type() 函数验证属性值是否符合预设的关键字列表，例如 scroll-snap-align: attr(scroll-snap type(start | center | end));。
• 参考资源：
• Chrome Developers Blog: Advanced attr()
• Temani Afif's post

author atom@argyleink

nerdy.dev

4 CSS Features Every Front-End Developer Should Know In 2026

Toolbelt worthy, powerful, and game-changing CSS you need for 2026.

#优质博文 #CSS #前端 #新特性
@scope 已获得所有主流浏览器支持，定义了新的 CSS 作用域上下文。
MDN：@scope - CSS | MDN
文章：How to @scope CSS Now That It’s Baseline

AI 摘要：@scope CSS 规则是现代前端开发中一项重要的新特性，它允许开发者在 CSS 中定义明确的作用域，从而解决了传统 CSS 全局作用域导致的样式冲突和管理难题。文章详细阐述了 @scope 在 <style> 块和外部 CSS 文件中的不同使用方式，包括如何利用 :scope 伪类指定作用域根，以及通过 to 关键字创建“甜甜圈作用域 (Donut Scope)”来限制样式生效范围。同时，作者还探讨了 :scope 在 JavaScript DOM API 中的应用，并提出了一种平衡代码组织与性能优化的综合实践策略，旨在帮助开发者更灵活、高效地管理和应用 CSS 样式。

author Daniel Schwarz

MDN Web Docs

@scope - CSS | MDN

The @scope CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.

#优质博文 #前端 #CSS #渐进增强 #新特性 #course
一篇关于 scroll-state(scrolled) 很详细的介绍，该查询允许开发者根据用户最新的滚动方向来应用样式，从而实现响应式用户界面。
Directional CSS with scroll-state(scrolled)

AI 摘要：本文详细介绍了 Chrome 144 中新增的 scroll-state(scrolled) CSS 查询。作为 scroll-state() 容器查询 (container queries) 家族的一部分，它使开发者能够根据用户最近的滚动方向动态调整页面元素的样式。文章首先解释了其工作原理，包括如何设置 container-type: scroll-state 以及 scrolled 查询接受的不同方向值。随后，通过几个实用的案例演示了其应用，包括在用户向下滚动时隐藏顶部导航栏并在向上滚动时重新显示（使用 fixed 或 sticky 定位），以及结合滚动触发动画 (scroll-triggered animations) 实现方向性的元素进入效果。文章强调了这种新特性在渐进增强 (Progressive Enhancement) 方面的优势，展示了无需 JavaScript 即可实现复杂交互的可能性。

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

1. scroll-state(scrolled) 查询介绍
• 新特性：Chrome 144 中引入的 CSS 新查询，用于根据用户滚动方向应用样式。
• 核心功能：允许开发者基于用户最新的滚动方向来动态修改元素的样式。
2. 工作原理
• scroll-state() 查询家族：scrolled 是 scroll-state() 容器查询 (container queries) 的一个新成员，同系列还包括 stuck、snapped 和 scrollable。
• 启用方式：需在父元素上设置 container-type: scroll-state。
• 查询语法：通过 @container scroll-state(<type>: <value>) 规则块来应用基于滚动状态的样式。
3. scrolled 查询的详细说明
• 检测目标：检测最近期的相对滚动方向。
• 支持值：
• 方向性值：top、right、bottom、left。
• 逻辑方向值：block-start、inline-start、block-end、inline-end。
• 轴向速记：x、y、block、inline。
• 初始状态：none，表示容器尚未发生相对滚动。
• 动态性：浏览器会实时更新此状态，允许根据用户滚动方向（向上、向下、向左、向右）来为子元素设置样式。
4. 实际应用案例
• 案例一：使用固定定位 (fixed positioning) 实现的隐藏导航栏 (Hidey-bar)
• 功能描述：当用户向下滚动时隐藏顶部导航栏，向上滚动时重新显示。
• 优势：增加屏幕可视空间，且无需完全滚动回顶部即可访问导航。
• 渐进增强 (Progressive Enhancement)：不支持此特性的浏览器将始终显示导航栏，不影响基本功能。
• 案例二：使用粘性定位 (sticky positioning) 实现的隐藏导航栏 (Hidey-bar)
• 作者偏好方案：采用 position: sticky 实现类似的导航栏隐藏/显示功能。
• 渐进增强优势：对于不支持的浏览器，导航栏保持原有的粘性定位行为，不破坏现有用户体验。
• 用户体验：导航栏在开始滚动时动画隐藏，向上滚动时动画出现。
• 案例三：方向性滚动进入动画 (Directional scroll entry animation)
• 实现原理：结合 scroll-state(scrolled) 和实验性的滚动触发动画 (scroll-triggered animations) API，根据滚动方向改变元素的进入动画效果。
• 示例：根据是向上滚动还是向下滚动，使卡片从不同的方向（例如，从底部或从顶部）滑入视图。
• 发展前景：尽管当前的滚动触发动画 API 仍处于早期阶段并存在一些限制（如动画重播问题），但其潜力巨大，有望实现更自然的用户界面动效。

author Una

Una.im

Directional CSS with scroll-state(scrolled)

Style based on scroll direction with this new scroll-state query feature.

#优质博文 #css #锚点定位 #容器查询 #新特性
补全不足，CSS锚点定位支持锚定容器回退检测了

AI 摘要：Chrome 143+ 引入 CSS 锚点定位回退检测机制，可自动检测容器布局变化并动态切换定位方向，解决传统锚点定位在空间受限时的显示异常问题。

Zhangxinxu

补全不足，CSS锚点定位支持锚定容器回退检测了 « 张鑫旭-鑫空间-鑫生活

CSS锚定定位虽然强大，实用，但是还是有个不足，就是如果元素在边缘处触发候补定位，浏览器是无法感知的，导致很多交互效果并不能纯CSS实现，功亏一篑，现在，Chrome最新版本已经补全了这个不足，CSS锚点定位已经趋于完美，赶快学习起来吧。

#优质博文 #CSS #前端 #新特性
MDN：text-decoration-inset 兼容性：实验性，文中仅提到 Firefox 146+
text-decoration-inset is Like Padding for Text Decorations | CSS-Tricks：CSS 中的 text-decoration-inset 允许开发者像设置内边距一样裁剪文字装饰（如下划线）的左右边缘，从而实现文字装饰与文字内容的精确对齐。该属性支持 em 等相对单位，使装饰能随字体大小缩放，并且可以配合动画和过渡效果，创造出更多原生的、引人注目的文字装饰动态效果。

author Daniel Schwarz

MDN Web Docs

text-decoration-inset - CSS | MDN

The text-decoration-inset CSS property enables adjusting the start and end points of an element's text decoration so it can be shortened, lengthened, or have its position shifted with respect to the rendered text.

#优质博文 #前端 #CSS #新特性
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

AI 摘要：本文深入解读了 Chrome 团队发布的“CSS Wrapped 2025”年度总结报告，重点介绍了 CSS 在逻辑处理、状态管理和复杂交互方面的新进展。文章详细阐述了可定制的 <select> 元素、纯 CSS 实现的轮播图（Carousel）以及滚动状态查询等功能，并探讨了 CSS 中引入 if() 语句、@function 函数和 sibling-index()/sibling-count() 等逻辑处理工具，这些新特性将大大提升 CSS 的开发体验和应用能力。作者还展望了锚定容器查询（Anchored Container Queries）、嵌套视图过渡组（Nested View Transition Groups）以及文本框修剪（Text Box Trim）等未来特性，强调 CSS 正从单纯的样式语言向构建动态、强大应用的原生工具集转变，开启了一个激动人心的前端新时代。

author Brecht De Ruyte

Smashing Magazine

State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights and how they connect to the bigger evolution of modern CSS.

#前端 #优质博文 #CSS #动画 #新特性
CSS Scroll-Triggered Animations are coming to Chrome!

AI 摘要：Chrome 浏览器将在明年初推出纯 CSS 实现的滚动触发动画。这是一种基于时间，并在特定滚动偏移量（scroll offset）触发的动画，与现有的滚动驱动动画不同。这项功能有望在 Chrome 145 版本正式发布，它将替代部分 IntersectionObserver 的用途。

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

1. 新特性发布预告
• Chrome 浏览器即将支持纯 CSS 实现的滚动触发动画（Scroll-Triggered Animations）。
• 预计在明年初推出，并在 Chrome 145 版本正式发布。

2. 滚动相关动画的区别
• 滚动驱动动画（Scroll-Driven Animations）：动画进度随滚动条移动从 0% 到 100%，停止滚动则暂停，反向滚动则倒退。
• 滚动触发动画（Scroll-Triggered Animations）：在达到特定的滚动偏移量时触发，是基于时间的动画。

3. 替代传统实现方式
• 新特性将允许开发者以声明式（declaratively）的 CSS 方式实现，替代部分对 IntersectionObserver 的依赖。

4. 资源与演示
• 为 timeline-trigger 的范围（ranges）创建了一个可视化工具，解释激活范围（activation range）和活动范围（active range）的概念。
• 激活范围（activation range）是触发器被激活的区域，活动范围（active range）是触发器保持激活状态的区域，活动范围必须包含激活范围。

5. 体验方式
• 用户可以在 Chrome Canary 中启用“Experimental Web Platform Features”旗标来提前体验该功能。

author Bramus!

Bram.us

CSS Scroll-Triggered Animations are coming to Chrome!

We have Scroll-Driven Animations. Now say hi to Scroll-Triggered Animations.

#优质博文 #CSS #前端 #新特性
草案
Fit width text in 1 line of CSS

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

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

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 可能解决问题的技术演进。
• 整体表达了对这一新属性简化前端开发工作流的期待，同时保持了对其成熟度审慎乐观的态度。

author Geoff Graham

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.

#优质博文 #CSS #前端 #新特性
酷！
CSS Wrapped 2025

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

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

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 变换和裁剪效果。

author Una Kravets

#优质博文 #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 gallery 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;
    }
  }