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.