Safari 和 WebKit 的新功能

一句话判断

过去一年 Safari 发布了 162 个新 Web 平台特性——Container Queries、:has() 伪类、Cascade Layers、dialog 元素等重量级功能全部到齐。

这场 Session 讲了什么

这是 Safari 年度更新汇总，覆盖过去七个版本（Safari 15 到 16）的所有新功能。Session 按类别组织：HTML、CSS、Web Inspector、Web API、JavaScript/WebAssembly、安全与隐私。

HTML 的新增：<dialog> 元素提供原生弹窗支持（配合 ::backdrop 伪元素）；inert 属性让元素及其子元素不可交互（对辅助技术也生效）；loading="lazy" 原生懒加载图片。

CSS 的三大架构级特性：Container Queries 让组件可以根据容器尺寸自适应布局；Cascade Layers 让你控制样式的优先级层级；:has() 伪类实现了期待已久的父选择器。

Web Inspector 改进了 Flexbox 检查器和 JavaScript 调试体验。Web API 方面新增了 Web Animations API 的更多支持、Media Session API、和一系列性能 API。

值得深挖的点

• Container Queries 的实用价值：比 Media Queries 更适合组件化开发。组件不需要知道页面布局，只要知道自己的容器有多大。定义 container-type 和 container-name，然后用 @container 规则写样式。
• :has() 不仅仅是父选择器：可以检查兄弟元素、表单状态、属性值。比如 form:has(input[type="checkbox"]:checked) 可以根据复选框状态改变表单样式，完全不需要 JavaScript。
• Cascade Layers 的工程价值：在大型项目中，可以用 Layer 分离设计系统、框架代码和项目自定义代码。Layer 之间的优先级由声明顺序决定，不受选择器特异性影响。
• inert 属性的无障碍意义：不仅禁用鼠标和键盘交互，还会对屏幕阅读器隐藏元素。做轮播图、弹窗时用 inert 标记非活动内容，比 aria-hidden 更彻底。

代码片段

/* Container Queries */
.card-container {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 250px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* :has() 伪类 */
/* 检查表单中是否有紧急标记的复选框被选中 */
.message-box:has(input[type="checkbox"].urgent:checked) {
    border-color: red;
    background-color: #fff0f0;
}

/* Cascade Layers */
@layer reset, framework, custom;

@layer reset {
    * { margin: 0; padding: 0; }
}

@layer framework {
    .btn { padding: 8px 16px; }
}

@layer custom {
    .btn { padding: 12px 24px; }
    /* custom layer 优先级最高 */
}

<!-- dialog 元素 -->
<dialog id="requestForm">
    <form method="dialog">
        <p>请填写申请信息</p>
        <button type="submit">确认</button>
    </form>
</dialog>

<!-- inert 属性：轮播图中非活动幻灯片 -->
<div class="carousel-slide" inert>
    <!-- 这个幻灯片不可交互，屏幕阅读器也会跳过 -->
</div>

<!-- 原生懒加载 -->
<img src="hero.jpg" alt="首屏图片" />
<img src="item-1.jpg" loading="lazy" alt="列表图片" />

最佳实践

• 新项目开始使用 Container Queries 替代部分 Media Queries
• 用 :has() 减少维护状态相关的 JavaScript 代码
• 在 CSS 架构中引入 Cascade Layers 管理样式优先级
• 弹窗使用 <dialog> 元素，获得原生焦点管理和无障碍支持
• 通过 Safari Technology Preview 提前测试新特性

还有什么值得关注

• “Safari 16 的 Web Inspector 改进” 在 Web 标准社区反响很好
• CSS 的 subgrid 在后续版本中也会加入
• Web Animations API 的完善让复杂动画不再依赖 JavaScript 库
• 过去一年 Web Platform Tests 的通过率显著提升