software

2025年你可能错过的5个强大Web平台功能

发布: (2025年12月7日 GMT+8 16:22)
6 min read
原文: Dev.to

Source: Dev.to

概览

下面是每个特性的快速概述、浏览器支持情况、核心 API 细节以及实际使用场景。

1. moveBefore() — 终于实现真正的 DOM 移动

支持情况

  • Chrome 133+
  • Firefox 144+
  • Safari（开发中）

功能说明

moveBefore() 将元素移动到新位置 而不 销毁其状态。不同于 appendChild() 或 insertBefore()，它会保留：

  • 动画和过渡的进行状态
  • 焦点和激活状态
  • 全屏模式
  • Popover 的打开/关闭状态
  • Modal 的状态

示例

// 旧方式：状态会被销毁
newParent.insertBefore(element, referenceNode);

// 新方式：状态被保留 ✨
newParent.moveBefore(element, referenceNode);
if ('moveBefore' in Element.prototype) {
  mainContent.moveBefore(videoPlayer, null);
} else {
  // 老浏览器的回退方案
  mainContent.appendChild(videoPlayer);
}

真实场景案例： 在移动端将视频播放器从侧边栏移动到主内容区时保持播放不中断，从而实现响应式布局。

2. CSS Custom Highlight API — 无需 DOM 手术的高亮

支持情况

截至 2025 年 6 月的基线（Chrome、Edge、Safari、Firefox 140+）

功能说明

在 JavaScript 中定义文本范围，在 CSS 中为其设样式，且不触碰 DOM。这样可以消除因插入元素导致的布局抖动。

示例

// 查找文本并创建范围
const range = new Range();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

// 注册高亮
const highlight = new Highlight(range);
CSS.highlights.set('search-result', highlight);
::highlight(search-result) {
  background-color: #fef08a;
  color: #1e1e1e;
}

为什么重要

  • 零 DOM 变更 → 零布局抖动
  • 多个范围可以共享同一个高亮名称
  • 高亮可以跨越元素边界
  • 非常适合 “搜索即显” 的 UI

**小技巧：**单个 Highlight 对象可以包含多个 Range 实例，这样只需一个 CSS 规则就能高亮所有搜索匹配项。

3. field-sizing: content — 一行代码实现表单字段自动增高

支持情况

  • Chrome 123+
  • Edge
  • Safari 26.2+

功能说明

表单控件会自动根据内容增大或缩小，无需 JavaScript 监听 resize。

基本用法

textarea,
input,
select {
  field-sizing: content;
}

限制尺寸

textarea {
  field-sizing: content;
  min-block-size: 3lh;   /* 至少 3 行 */
  max-block-size: 12lh;  /* 最多 12 行 */
}

input {
  field-sizing: content;
  min-inline-size: 10ch;
  max-inline-size: 40ch;
}

适用元素

  • <textarea>
  • <input>（text、email、url 等）
  • <select>（下拉和多选）

渐进增强： 不支持该属性的浏览器会显示固定尺寸的字段，因此不需要 JavaScript 回退。

4. sibling-index() 与 sibling-count() — CSS 终于能感知位置

支持情况

  • Chrome 138+
  • Firefox（开发中）

功能说明

  • sibling-index() 返回元素在同级兄弟节点中的零基索引。
  • sibling-count() 返回同级兄弟元素的总数。

示例：错位动画

.card {
  animation: fade-in 0.3s ease-out backwards;
  animation-delay: calc(sibling-index() * 100ms);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
}

示例：无需事先知道数量的等宽列

.tab {
  width: calc(100% / sibling-count());
}

创意用例

  • 错位动画
  • 跨项目的动态颜色渐变
  • 基于项目数量的响应式网格布局
  • 使用三角函数实现圆形定位
/* 任意数量项目的彩虹渐变 */
.item {
  --hue: calc(360 / sibling-count() * (sibling-index() - 1));
  background: hsl(var(--hue) 70% 60%);
}

5. CSS Anchor Positioning — 无需 JavaScript 的工具提示

支持情况

  • Chrome 125+
  • Safari 26+
  • Firefox（预计 2025 年底）

功能说明

相对于已命名的锚点定位元素，并在溢出时自动翻转。

基本用法

.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;
  position-area: top;
}

隐式锚定（Chrome 133+）

<button popover>Hover me</button>
<div popover>I'm anchored automatically!</div>
[popover] {
  position-area: bottom span-left;
  margin: 0;
}

浏览器会自动在按钮和弹出层之间建立关联，省去手动设置 anchor-name 的步骤。

应该先采纳哪个？

先从 field-sizing: content 开始。

  • 零风险： 不支持的浏览器会回退到普通固定字段。
  • 零 JavaScript： 去掉自动调节大小的脚本。
  • 立竿见影的 UX 提升： 表单更具响应性。
  • 一行 CSS： 最低投入，最高回报。

随后，CSS Anchor Positioning 能为任何工具提示、下拉菜单或弹出层 UI 带来显著收益。

结语

Web 平台正变得越来越强大，许多我们过去只能用 JavaScript 解决的问题现在都有原生实现。状态保留的移动、自动尺寸的表单字段以及声明式定位不仅是锦上添花，更在性能、可访问性和可维护性上优于对应的 JS 方案。

这些特性已经在 稳定版浏览器 中上线。无需开启实验标志，也不需要 polyfill（不过对 moveBefore() 和 sibling 函数做回退仍是明智之举）。

你最期待尝试的被忽视特性是哪一个？ 在下方评论区告诉我吧。

Back to Blog

相关文章

阅读更多 »