发布时间：2026 年 7 月 17 日
欢迎再次阅读 Baseline 月度摘要。2026 年 6 月，field-sizing成为基准新可用功能，允许表单控件自动调整为适应其内容。与此同时，大量 CSS、HTML 和 Web API 功能达到了“Baseline 广泛可用”状态，开发者社区也发布了重要更新。
针对 Web 平台状态的基准提醒
现在，借助 Web 平台状态信息中心上的 Baseline 提醒，您可以更轻松地跟踪 Web 功能何时实现互操作。通过 GitHub 账号登录后，您可以订阅功能通知，以便在功能成为“Baseline 新近可用”功能、“Baseline 广泛可用”功能或获得新的浏览器实现时收到通知。您可以将订阅配置为按月、按周或立即发送电子邮件更新或自定义 RSS Feed。您可以将提醒范围限定为已保存的搜索内容（例如所有 HTML 功能），创建自定义简报，生成可分享的功能列表，或配置 Slack 网络钩子以通知工程团队。
如需了解详情，请参阅基准提醒简介。
“Baseline 新近可用”功能
本部分中的功能自 2026 年 6 月起在核心浏览器集中受支持，现在已进入“Baseline 新近可用”阶段。
field-sizing
field-sizing CSS 属性可控制表单元素（例如 <textarea>、<input> 和 <select>）的尺寸调整行为，这些元素通常具有固定的默认尺寸。借助 field-sizing: content 表单控件，您可以自动展开或收缩控件以适应其内容，从而减少对自定义 JavaScript 自动调整大小脚本的需求。
如需了解详情，请参阅 MDN 参考页面，了解字段大小调整。
“Baseline 广泛可用”功能
以下功能已进入“Baseline 广泛可用”阶段，这意味着它们现在具有广泛的兼容性，可在您的项目中使用。
:has() 伪类
借助 :has() CSS 父级选择器，您可以根据元素的后代或后续同级元素来设置元素的样式。借助此功能性伪类，您无需使用 JavaScript 检查 DOM 结构，即可直接在 CSS 中实现条件布局模式。
如需了解详情，请参阅 MDN 上有关 :has 伪类的页面。
HTMLIFrameElement.loading
<iframe> 元素上的 loading 属性可为嵌入式框架启用延迟加载。通过指定 loading="lazy"，浏览器会延迟加载屏幕外的 iframe，直到它们滚动到视口附近，从而节省网络带宽和初始网页加载开销。
如需了解详情，请参阅 HTMLIFrameElement.loading 的 MDN 参考。
CanvasRenderingContext2D.reset()
二维画布上下文中的 reset() 方法会清除绘制上下文状态，从而将转换、剪切路径、线条样式和填充样式等属性重置为默认值。这样一来，无需手动清理属性即可干净地重复使用画布上下文。
如需了解详情，请参阅 CanvasRenderingContext2D.reset 的 MDN 文档。
cap 长度单位
cap 字体相对单位对应于元素字体的名义大写字母高度。借助它，您可以根据大写字母的高度对齐元素并调整元素大小，从而实现精确的排版布局。
如需了解详情，请参阅 MDN 长度单位参考文档。
counter-set 个房源
counter-set CSS 属性用于将 CSS 计数器设置为指定值，是 counter-reset 和 counter-increment 的补充。在处理编号列表、文档大纲或自定义计数器序列时，它可提供控制功能。
如需了解详情，请参阅 MDN 上有关 counter-set 的页面。
createImageBitmap()
createImageBitmap() 静态方法可从各种图片来源（包括 <img>、<canvas>、Blob 或 ImageData）创建异步位图图片。由于它在主线程之外解码图片，因此在处理复杂的画布图形时，不会阻塞界面性能。
如需查看实现详情，请参阅 MDN 文档中的 createImageBitmap。
<easing-function> 数据类型
<easing-function> CSS 数据类型描述了过渡和动画的数学变化率曲线。除了 ease-in 或 cubic-bezier() 等标准关键字之外，它还支持 linear() 等函数来构建自定义的弹簧或反弹效果。
如需了解如何在 MDN 参考文档中使用 easing-function，请点击相应链接。
& 嵌套选择器
使用内置 CSS 嵌套时，& 嵌套选择器可将子规则选择器明确锚定到其父选择器。这样可确保在定义嵌套的悬停、焦点或伪类状态时，清晰明了且特异性规则正确。
如需了解详情，请参阅 MDN 上有关嵌套选择器的指南。
使用 rel="preload" 进行自适应预加载
<link rel="preload"> 元素上的 media 属性可实现关键素材资源的自适应预加载。通过将 rel="preload" 与媒体查询相结合，浏览器可以在加载生命周期的早期阶段仅下载与用户视口宽度或显示特征相匹配的资源。
如需了解如何使用该属性，请参阅 MDN 文档中有关 rel="preload" 的说明。
HTMLMediaElement.preservesPitch
<audio> 和 <video> 元素上的 preservesPitch 属性用于控制浏览器在更改 playbackRate 时是否调整音频音调。将其设置为 false 可在加快或减慢媒体播放速度时进行音调转换。
如需了解详情，请参阅 HTMLMediaElement.preservesPitch 的 MDN 页面。
:dir() 伪类
:dir() CSS 伪类根据文本方向性（例如 ltr 或 rtl）匹配元素，匹配从 HTML 属性（如 dir）或计算出的文本上下文继承的方向。
如需了解详情，请参阅 MDN 上有关 :dir 伪类的页面。
pow() 数学函数
pow() CSS 函数可直接在 CSS 声明中计算指数幂值，将底数提升为指数（例如 pow(2, 3)）。这可简化自适应缩放和网格数学关系。
请参阅 MDN 上有关 pow 函数的参考文档，了解详情。
CSS mask 属性
mask CSS 简写属性使用图片或渐变作为剪切层来隐藏元素的部分内容。它结合了 mask-image、mask-position 和 mask-repeat 等子属性，以创建复杂的视觉遮罩效果。
如需了解详情，请参阅 MDN 上有关 mask 属性的页面。
@media (scripting)
scripting 媒体功能用于测试客户端脚本（例如 JavaScript）是否已在浏览器上下文中启用并可用。这样，渐进增强样式就可以定位到具有或不具有有效 JavaScript 的环境。
如需了解详情，请参阅 MDN 中有关脚本媒体功能的参考文档。
URL.canParse()
URL.canParse() 静态方法用于检查给定的字符串是否为有效的可解析网址（带有可选的基本网址），且不会抛出异常，从而简化了在实例化 URL 对象之前的运行时网址验证。
如需了解实现详情，请参阅 MDN 文档中关于 URL.canParse 的说明。
Storage Access API
Storage Access API 提供了一种机制，以便嵌入在第三方 <iframe> 中的跨网站内容请求获取未分区的 Cookie 和存储空间访问权限，从而实现跨网域边界的身份验证和有状态互动。
如需了解详情，请参阅 MDN 上有关 Storage Access API 的页面。
大功告成
如果您认为我们遗漏了任何与 Baseline 相关的内容，请告诉我们，我们会确保在未来的版本中添加相应内容！如果您有任何疑问或想针对 Baseline 提供反馈，可以在我们的问题跟踪器中提交问题。