酷！
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
