2026 年 3 月 Web 广泛可用 API

2026年3月广泛可用的12个浏览器API：哪些可部署到生产环境

截至2026年3月，12个浏览器API已达到广泛可用状态——这意味着在所有主流浏览器中已稳定支持至少2.5年。这简化了实施决策：检查Can I Use和用户指标可确认是否适合生产环境。重点在于CSS属性、HTTP头部和JavaScript事件，以优化性能、排版和数据管理。

关键功能列表：

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• 设备方向事件
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• 溢出媒体查询
• 存储管理器
• 更新频率媒体查询
• subgrid

Clear-Site-Data：本地数据的完全重置

HTTP头部Clear-Site-Data允许服务器发起清除浏览器存储：缓存、cookies、localStorage、IndexedDB、service workers。它用于登出、用户切换或从损坏缓存中恢复时。

语法和指令

指令用双引号指定，以逗号分隔：

Clear-Site-Data: "cache"
Clear-Site-Data: "cache", "cookies"
Clear-Site-Data: "*"

关键指令：

• "cache" — HTTP缓存、bfcache、WebGL着色器。
• "cookies" — 域名和子域名的cookies及HTTP认证。
• "storage" — localStorage、sessionStorage、IndexedDB、service workers。
• "executionContexts"（实验性）— 重新加载上下文。
• "clientHints"（实验性）— 重置客户端提示。
• "prefetchCache"、"prerenderCache"（实验性）— 推测规则。
• "*" — 所有数据类型。

使用示例

登出时完全清理：

HTTP/1.1 200 OK
Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"
Content-Type: text/html

仅清除cookies：

Clear-Site-Data: "cookies"

在生产环境中，此头部解决了POST /logout后残留数据的问题，包括service worker冲突和缓存包。使用"cache", "storage"的恢复页面可快速恢复状态，无需DevTools。

contain-intrinsic-size：通过包含稳定布局

contain-intrinsic-size属性为具有contain: size或content-visibility: auto的元素设置后备尺寸。它通过固定滚动高度/宽度来防止视口外渲染时的回流。

语法

contain-intrinsic-size: none;
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 300px 200px;
contain-intrinsic-size: auto 320px;
contain-intrinsic-size: auto 400px auto 250px;
contain-intrinsic-size: auto none;

值：

• none — 无替代。
• <length> — 固定尺寸。
• auto <length> — 在首次渲染后记住实际尺寸。
• auto none — 如果无可用内存，则回退到none。

示例

新闻源：

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

产品卡片：

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

此属性消除了“跳动”滚动：没有它时，不可见块高度为零，导致滚动时重新计算。auto模式在首次渲染后优化。

@counter-style：自定义列表样式

@counter-style规则使用描述符（如system、symbols、additive-symbols）定义列表的自定义编号样式。它扩展了内置样式如decimal、disc等。

语法和描述符

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

主要描述符：

• system：cyclic、numeric、alphabetic、fixed、additive。
• symbols：标记的字符串/图像。
• additive-symbols：罗马数字的权重-符号对。
• prefix/suffix：框架。
• range：允许的值。
• pad：最小长度（零填充）。
• fallback：后备样式。

示例

带圆圈字母：

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

列表火箭：

@counter-style rocket {
  system: cyclic;
  symbols: "\1F680";
  suffix: " ";
}

ul.features {
  list-style: rocket;
}

用于章节：

@counter-style chapter {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ". ";
}

.article h2::before {
  counter-increment: section;
  content: counter(section, chapter);
}

在生产环境中，@counter-style简化了编号的本地化，最小化JS/后端逻辑。确保后备和speak-as以支持无障碍访问。

设备方向事件及其他功能

设备方向事件通过DOM事件提供设备方向和加速度数据。列表补充了：hyphenate-character和hyphens用于连字符，image-set()用于响应式图像，<link rel="modulepreload">用于模块预加载，溢出/更新频率媒体查询用于性能适配，存储管理器用于配额，subgrid用于网格。

关键要点

• 广泛可用——在所有浏览器中至少2.5年的稳定支持。
• 实施前检查用户指标和Can I Use。
• Clear-Site-Data对登出和恢复至关重要。
• contain-intrinsic-size通过content-visibility稳定滚动。
• @counter-style用于无需JS的自定义排版。

— Editorial Team