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

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 中的潜力，作为未来更简便的替代方案。

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…

AI 摘要：随着 Web 技术的飞速发展，传统的“像素级完美”这一源于印刷时代的理念已成为开发的阻碍。本文指出，由于屏幕尺寸的多样性、内容的动态变化以及对无障碍性的要求，追求绝对的像素匹配会导致代码臃肿和系统脆弱。作者 Amit Sheen 建议开发者与设计师应转向关注“设计意图（Design Intent）”，利用设计令牌（Design Tokens）、流体布局和现代 CSS 特性，构建更具弹性和逻辑性的 Web 体验，而非死磕静态图像中的绝对坐标。

Smashing Magazine

Rethinking “Pixel Perfect” Web Design — Smashing Magazine

Amit Sheen takes a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.

AI 摘要：文章深入探讨了使用 CSS 动画化 SVG 的基础知识与进阶技巧。作者 Hope Armstrong 首先解释了 SVG 的优势及多种嵌入方式，指出内联（Inline）方式是实现 CSS 控制的最佳选择。随后展示了如何通过 transition 和 keyframes 属性操作 SVG 特有的属性（如 fill、stroke 等），并重点解析了路径绘制动画（Line drawing animation）的实现原理。最后，文章强调了在制作动画时需兼顾无障碍访问（Accessibility）以及选择合适工具的重要性。

LogRocket Blog

How to animate SVG with CSS: Tutorial with examples - LogRocket Blog

Animate SVGs with pure CSS: hamburger toggles, spinners, line-draw effects, and new scroll-driven animations, plus tooling tips and fallbacks.

AI 摘要：本文主要研究了在 Web 视图过渡 (View Transitions) 期间保持视频/音频播放的技术细节。作者指出，单页面视图过渡 (Same-Page View Transitions) 能够原生支持 (Just Works™) 状态保持，类似于 .moveBefore() 的效果；而多页面视图过渡 (Multi-Page View Transitions) 由于页面卸载则无法直接维持状态。不过，通过利用 pageswap 和 pagereveal 事件配合 sessionStorage 存储视频进度，可以“伪造”出一种近乎无缝的过渡体验。文章还提到了 Astro 框架在此方面的实现以及未来浏览器原生支持跨页面状态保存的可能性。

1. 同页面视图过渡 (Same-Page View Transitions)
• 在单页面环境下，使用 document.startViewTransition 操作 DOM 时，浏览器会自动保留 <video>、<audio> 甚至 <iframe> 的播放状态。
• 这种机制与新兴的 moveBefore() 方法类似，能够确保视频在元素变换位置或样式时持续播放而不中断。

2. 多页面视图过渡 (Multi-Page View Transitions) 的挑战
• 在传统的多页面架构 (MPA) 中，当页面卸载并加载新页面时，所有状态都会丢失，即便新旧页面包含相同的视频元素也无法自动衔接。
• 讨论了 Astro 等框架的实现原理，它们通常通过将页面导航转化为类似单页面应用 (SPA) 的体验来避开这一限制。
• 引用了 Chrome 团队关于跨页面状态保存的讨论，指出这不仅是视图过渡的需求，更是更通用的页面导航状态持久化方案。

3. 手动实现跨页面的“状态伪造”方案
• 使用 CSS 的 @view-transition { navigation: auto; } 启用多页面过渡。
• 为新旧页面的视频元素指定相同的 view-transition-name。
• 利用 JavaScript 监听 pageswap (页面离开前) 和 pagereveal (新页面显示时) 事件，通过 sessionStorage 存取视频的当前播放时间 (currentTime)。
• 虽然在切换瞬间会有轻微的音频/视频停顿 (Blip)，但视觉和逻辑上能达到较好的衔接效果。

4. 扩展应用与工具
• 该技术同样适用于 YouTube 等第三方 <iframe> 嵌入视频，只需结合相应的 Iframe 播放器 API (Iframe Player API) 提取和还原数据。
• 推荐参考 Chrome 官方演示和作者提供的 CodePen 示例进行深度学习。

AI 摘要：本文介绍了 Chrome 145 及更高版本对 CSS 视口单位（Viewport Units，如 vw、vh ）的一项重大改进：当根元素 html 设置为 overflow: scroll 或 scrollbar-gutter: stable 时，100vw 会自动扣除滚动条所占的空间。这一改进通过 CSS 工作组（CSSWG）的决议，解决了传统 100vw 导致不必要水平溢出的顽疾，同时通过限制生效条件规避了布局死循环（Cycles）问题。

1. 核心改进与生效条件
• Chrome 145+ 版本开始，视口单位将能够“感知”滚动条（Scrollbar-aware）。
• 只有在 html 元素上强制显示滚动条（overflow[-y]: scroll）或预留滚动条空间（scrollbar-gutter: stable）时，该特性才会生效。
• 该改进同样适用于 vh（对应水平滚动条）以及视口单位的小、大、动态变体（sv*, lv*, dv*）。

2. 视口单位的历史局限性
• 传统视口单位（Viewport Units）在计算时不考虑经典滚动条（Classic Scrollbars）的宽度。
• 设置 width: 100vw 时，其宽度包含滚动条，导致在有垂直滚动条的情况下，页面会出现不必要的水平滚动条。

3. 布局死循环（Cycles）的挑战
• 解释了为什么不能简单地在所有情况下减去滚动条宽度：这会导致“增加滚动条 -> 减小视口宽度 -> 内容重新布局 -> 滚动条消失”的死循环。
• 通过限制在滚动条“无条件存在”或“预留空间”的情况下生效，可以有效规避此循环。

4. 行业标准与 Web 兼容性
• 详细介绍了 CSS 工作组（CSSWG）关于此问题的讨论和决议历程。
• 引用 HTTP Archive 的数据分析，证明此项改动对现有网站的破坏性极低（仅约 0.0003% 的网站可能受到影响）。
• 强调了目前仅 Chromium 系浏览器支持此特性，尚无纯 CSS 的特性检测方法。

5. 最佳实践建议
• 建议开发者在 CSS Reset（样式重置）中为 html 根元素添加 scrollbar-gutter: stable。
• 相比 overflow-y: scroll，scrollbar-gutter: stable 可以在不强制显示滚动条背景的情况下激活“感知滚动条”的视口计算特性。

Bram.us

Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)

From Chrome 145 onwards, 100vw will automatically subtract the size of the (vertical) scrollbar from it if you have forced the html element to always show a vertical scrollbar (using overflow[-y]: scroll) or if you reserve space for it (using scrollbar-gutter:…

AI 摘要：这篇文章介绍了最新发布的《2025 Web 年鉴》（Web Almanac），该报告通过对 1720 万个网站的深度分析，揭示了 Web 技术的现状。亮点包括：可变字体（Variable fonts）已成为主流（约 40% 采用率），但网页可访问性（Accessibility）依然严峻，大量网站缺失焦点样式或对比度不足；同时，过去十年间移动端网页体积膨胀了超过 200%，反映出资源过度负荷（Bloat）的问题亟待解决。

1. 网页设计与 CSS 趋势
• 新的 CSS 属性 text-wrap 的 balance 和 pretty 值虽然发布不久，但已分别达到 2.67% 和 1.71% 的使用率。
• 可变字体（Variable fonts）不再是新鲜事物，桌面端（39.4%）和移动端（41.3%）已有约四成网站在使用。

2. 可访问性（Accessibility）挑战
• 颜色对比度（Color contrast）达标率极低，仅 30% 的网站符合 WCAG 准则。
• 焦点样式移除现象严重，67% 的网站违反了键盘导航必须有可见焦点指示器的规定。
• 图像描述缺失，约 44% 的网站未提供有效的替代文本（Alt attribute），其中 14% 完全缺失标签。
• ARIA 标签使用率高达 70%，但过度依赖或不当使用可能损害语义化（Semantic）HTML 的优势。

3. 性能、内容管理系统（CMS）与生态
• WordPress 依然占据市场主导地位，但增速放缓，目前正处于从扩张向稳定（Stabilization）转型的阶段。
• 网页资源肥胖（Bloat）问题显著，移动端页面体积中位数从 2015 年的 845 KB 增长至 2025 年的 2,362 KB。
• JavaScript 资源负荷极重，中位数达到 697 KB，成为网页性能的主要负担之一。

CSS-Tricks

HTTP Archive 2025 Web Almanac | CSS-Tricks

I love me some good web research reports. I'm a sucker for them. HTTP Archive's Web Almanac is one report I look forward to every year, and I know I'm not

AI 摘要：这篇文章通过拆解 Shadcn UI 框架中的 Radio Button（单选按钮）组件，指出当前前端开发中存在的“过度工程化”问题。作者发现，原本只需一行原生 HTML 就能实现的单选框，在 Shadcn 中被封装成了依赖 Radix UI、Lucide 图标库、Tailwind CSS 且长达 45 行的代码块。作者通过对比证明，利用现代 CSS（如 appearance: none 和伪元素）完全可以轻松实现自定义样式的原生单选框，从而减少 JavaScript 负载、降低认知负荷并提高性能。

AI 摘要：文章探讨了 CSS 锚点定位（CSS Anchor Positioning）API 的一种高级用法：通过动态更新 anchor-name（锚点名称），让一个定位元素（Follower）在多个潜在锚点之间平滑切换。这种“随动”模式不仅支持纯 CSS 的悬浮（hover）和焦点（focus）触发，还能结合 JavaScript 状态管理或最新的 ::scroll-marker 伪元素，实现极简且高性能的导航高亮、焦点跟随等视觉交互效果。

1. 技术核心原理 (The Technique)
• 动态锚点绑定：创建一个具有固定 position-anchor 名称的跟随元素，并在交互（如 :hover ）时将对应的 anchor-name 赋值给当前目标，实现定位目标的动态切换。
• 平滑过渡动画：利用 CSS transition 作用于 top、left 等属性，使跟随元素在不同锚点间移动时产生平滑的动画效果。
• 定位限制：目前 position-area 属性尚不支持动画过渡，因此实现平滑移动仍需依赖绝对定位属性（如 top, left, right, bottom）。

2. 实际应用案例
• 操作栏 (Action Bar)：结合 JavaScript 处理点击状态，并利用 CSS 处理悬浮和焦点态，实现一个类似“放大镜”或“高亮框”在导航项间流转的视觉效果。
• 轮播图滚动指示器 (Carousel Scroll Markers)：展示了纯 CSS 的方案，利用 ::scroll-marker 伪元素和 :target-current 伪类，在用户滚动时自动更新锚点名称，驱动指示器跟随。

3. 兼容性与进阶技巧 (Compatibility & Tips)
• 浏览器支持：该技术基于 CSS Anchor Positioning API，目前已在 Chromium 内核浏览器上线，并被列入 Interop 2025，WebKit (Safari) 也即将支持。
• 体验优化：通过伪元素技巧（Pseudo element trick）可以防止鼠标在元素间移动时因间隙导致的状态丢失。
• 性能优势：相比于传统依赖 JS 计算 getBoundingClientRect() 的方案，该方法将布局计算交给浏览器内核，性能更优且代码更简洁。

AI 摘要：本文详细讲解了如何使用 GSAP Flip 插件来实现动态网格布局的平滑切换。通过结合 HTML 的数据属性（Data Attributes）控制、CSS Grid 的灵活响应式设计以及 GSAP 的状态捕捉能力，开发者可以轻松地在不同列数和尺寸的布局间创建自然的流体动画。文章提供了从基础逻辑到进阶视觉增强（如随机错位和模糊滤镜）的完整代码实现方案。

1. HTML 结构与数据属性设计
• 导航面板：通过按钮的 data-size 属性存储目标网格尺寸（如 50%、100% 等）。
• 容器同步：网格容器使用 data-size-grid 属性与按钮状态同步，驱动 CSS 样式变化。
• 灵活项设计：每个网格项利用内联 CSS 变量 --aspect-ratio 定义宽高比，确保在布局变动时比例一致。

2. CSS Grid 响应式布局实现
• 属性选择器驱动：通过 [data-size-grid='...'] 动态调整 grid-template-columns 的列数。
• 响应式适配：利用媒体查询（Media Queries）在不同屏幕宽度下覆盖列数设置。
• 视觉优化：为图片设置 aspect-ratio 属性和滤镜过渡效果，提升交互手感。

3. GSAP Flip 核心逻辑（基础版）
• 状态捕获：在布局改变前使用 Flip.getState() 记录所有网格项的当前位置和尺寸。
• 布局触发：更新容器的 dataset 属性，瞬间改变 DOM 元素的 CSS 布局。
• 动画还原：调用 Flip.from() 让元素从旧位置平滑过渡到新位置，并使用 expo.inOut 缓动函数。
• 交互锁定：通过布尔值变量 animated 防止动画运行期间的重复点击干扰。

4. 进阶效果与视觉增强（进阶版）
• 错位动画（Stagger）：引入 stagger 参数并配合随机排序（random order），使元素不再同时移动，增加视觉律动感。
• 容器特效：在 Flip 动画执行的同时，对整个网格容器应用模糊（Blur）和亮度（Brightness）的补间动画。
• 性能考量：使用 will-change: filter 等属性优化渲染性能，确保复杂转场时的帧率稳定。

AI 摘要：Anime.js v4.3 版本正式推出了全新的自动布局（Auto Layout）功能，解决了长期以来 CSS 布局属性（如 display: flex/grid）难以实现平滑过度动画的痛点。该版本支持自动检测 DOM 位置变化、元素入场/出场动画以及子元素的交错效果。其 API 保持了以往的简洁性，支持任意缓动函数（Easing functions），并且动画过程可随时中断（Interruptible），兼容 Solid.js 等现代前端框架。

1. 核心功能亮点（Core Features）
• 支持对 display: flex、grid 以及 none 等属性进行动画化处理，实现无缝布局切换。
• 自动捕捉并平滑处理 DOM 元素的位置变化（Position changes）。
• 内置入场（Enter）与出场（Leave）动画支持。
• 提供可中断的动画（Interruptible animations）机制，确保交互响应灵敏。
• 支持子元素的交错动画（Staggered animations），提升视觉层次感。

2. 开发者资源与生态（Resources & Ecosystem）
• 确认了与 Solid.js 等框架的兼容性，具有广泛的框架适配潜力。
• 坚持 “极简 API（Dead simple API）” 的设计哲学，降低上手门槛。

1. CSS 布局与样式增强
• 使用 text-underline-offset 属性轻松控制文本下划线的距离，无需再用复杂的伪元素模拟。
• 在 Flexbox 布局中直接使用 gap 属性，告别过去需要通过处理 margin (外边距) 来设置间距的繁琐操作。
• 采用原生 CSS 嵌套 (Nesting) 和在选择器内嵌套媒体查询 (Media Queries)，使样式结构更清晰且无需预处理器。
• 利用 clamp(min, variable, max) 实现流体响应式尺寸，简化了复杂的断点计算。
• 使用 content: open-quote 结合 q 标签实现根据语言自动适配的本地化引号。

2. JavaScript 语法与交互优化
• 采用可选的 catch 绑定 (Optional catch binding)，在不需要错误对象时直接写 catch { ... }，避免定义未使用的变量。
• 指针事件 (Pointer Events) 的普及使得开发者可以用一套逻辑替代旧有的 click (点击) 和 touch (触摸) 事件的混合逻辑。
• 弃用旧的性能黑科技，如使用 ~~ 或 | 0 取整，现代引擎下 Math.floor() 的可读性更高且性能不再是瓶颈。

3. 资源优化与现代格式
• AVIF 图像格式已获得全面支持，相比 JPEG 可轻松实现 50% 以上的体积缩减。
• 提供了使用命令行工具 avifenc 批量转换图片的实用脚本示例。

AI 摘要：这篇文章介绍了 CodePen 新推出的原生工具 slideVars，帮助开发者快速为演示项目添加交互式调节面板。相比以往需要引入第三方库（如 TweakPane 或 Knobs）或编写复杂的 JavaScript，slideVars 能够自动识别 CSS 变量并生成 UI 控件。作者详细展示了从快速起步到手动配置参数、自定义单位、处理作用域（Scope）以及调整面板布局的高级用法，是提升前端 Demo 交互体验的利器。

AI 摘要：张鑫旭的这篇博文展示了如何纯粹利用 CSS 锚点定位 (CSS Anchor Positioning API) 来实现两个元素之间自动相连的折线效果。文章从回顾锚点定位的设想开始，通过具体的代码示例详细阐述了定义锚点、计算线条位置、以及利用渐变和遮罩绘制连接线的实现原理。作者也坦诚指出了当前方案在特定对齐情况下的局限性，并简要提及了更复杂的解决思路，但认为其实现成本可能已超出 JavaScript (JS) 方案。

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

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)》。

Css-Tip

Connecting Circles With Anchor Positioning II

Connect circles with arrows and show their distance using modern CSS

AI 摘要：本文详细介绍了 HTML 中用于管理文本换行的四种主要方式：<br> 元素、<wbr> 元素、­ (soft hyphen) 字符以及   (non-breaking space) 字符。文章分析了每种方法的适用场景、优缺点，并强调了在大多数情况下，CSS 提供了更强大、更灵活的解决方案，例如使用 display 属性、overflow-wrap、text-wrap 和 white-space 等 CSS 属性来控制文本的换行和断行行为，以提升内容的可访问性、可维护性和用户体验。

Them’s the Breaks - HTMHell

A collection of bad practices in HTML, copied from real websites.

AI 摘要：Dither Image Online 是一个免费的在线工具，旨在帮助用户轻松地将普通图像转换为具有复古和像素艺术风格的抖动（dithered）图像。该工具强调其快速、实时和本地处理的特性，确保用户隐私安全。它提供了多种抖动算法，如 Bayer、Crosshatch、Halftone 和 Contour，并允许用户调整参数以获得所需效果，无需上传图片到服务器，也无需复杂的 Photoshop 操作。

AI 摘要：Chrome 144 的 DevTools 发布包括 DevTools MCP 服务器更新（支持复用浏览器会话的 auto connection）、Network 面板重命名为 Request Conditions 并新增对单个请求的节流（throttling）、在 Styles 面板中可编辑 @font-face 与 @font-feature-values、以及 Elements 面板下在 shadow root 与 document root 可见 adopted stylesheets；文章同时回顾了 2025 年 DevTools 在 AI 助手、性能面板重构与 Web 平台调试工具方面的一系列改进，并提供了预览版本与反馈渠道信息。

Chrome for Developers

What's new in DevTools, Chrome 144  |  Blog  |  Chrome for Developers

Chrome DevTools MCP server, individual request throttling, adopted stylesheets and 2025 highlights.

CSSアニメーションで作った自主制作のモーションをポートフォリオサイトにまとめてみました🐈
https://yui540.com/

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

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

nerdy.dev

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

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