对提议的 元素的增强功能

Thomas Steiner

发布时间：2025 年 5 月 12 日

提议的 HTML <permission> 元素仍处于源试用阶段，Chrome 团队正在完善它，并以我们最初的源试用奠定的基础为基础。 本文将介绍旨在为您提供更灵活的权限请求控制功能的增强功能。如需全面了解 <permission> 元素的介绍及其初始功能，请参阅我们之前的文章针对新的 HTML <permission> 元素的源试用。

后备用户体验的内容支持

在 Chrome 136 之前，<permission> 元素最初被定义为不含内容的空元素。从 Chrome 137 开始，它支持内容，这意味着现在必须使用开始标记和结束标记对其进行标记：

<permission>
  <!-- optional content -->
</permission>

此更改允许您在元素的内容中包含后备界面。如果浏览器不支持 <permission> 元素或指定了不受支持的 type 属性，则会显示这些后备内容。这样可以确保在不同的浏览器环境中实现更优雅的降级并提升用户体验。

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

更详细的程序化功能检测

为了帮助您确定对特定权限类型的支持，我们引入了一个静态方法 isTypeSupported()：

HTMLPermissionElement.isTypeSupported('geolocation');

此方法会返回一个布尔值，指示是否支持指定的权限类型。现在，您可以结合使用现有的功能检测功能 typeof HTMLPermissionElement !== 'undefined'，以编程方式确保同时支持 <permission> 元素和特定权限类型。

请注意，您还可以传递多个以空格分隔的权限类型（例如，"camera microphone"），该方法将返回整个字符串是否为有效的 "type" 值。例如，使用以下参数调用 isTypeSupported() 会返回以下结果：

  • "camera" → true
  • "geolocation" → true
  • "camera geolocation" → false（即使单独支持这些类型，也不支持它们的组合。）

更新后的活动名称

在 Chrome 136 中，我们引入了两个新事件来取代之前的事件：

  • onpromptdismiss（取代了 ondismiss）
  • onpromptaction（取代了 onresolve）

这些新事件具有更清晰的语义，并且与元素行为更好地保持一致。较旧的事件将在 Chrome 138 中被弃用，因此我们建议您相应地更新事件处理脚本。

图标支持

我们正努力在 <permission> 元素中启用图标支持，目标是在 Chrome 138 中实现。借助此功能，您可以显示与权限类型对应的预定义图标，但样式选项有限，例如颜色和大小调整。确切的 API 详细信息仍在最终确定中。

以下示例展示了默认填充颜色、其他填充颜色以及无填充颜色但有黑色轮廓的情况。

默认样式

图标的默认渲染。

图标的默认颜色与权限元素的文本颜色相同。

修改后的样式

以下示例展示了对默认样式的修改示例。

更改图标颜色

::permission-icon {
  fill: black;
}

修改了渲染效果，现在使用纯黑色图标。

图标轮廓的更改

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

带有黑色轮廓图标的修改后渲染效果。

停用相应图标

该功能推出后，相应图标将默认处于启用状态。如果您想停用该图标，可以使用以下 CSS 代码

::permission-icon {
  display: none;
}

样式指南

如需获得有关设置 <permission> 元素样式的全面指导（包括最佳实践和限制），请参阅 <permission> 样式设置指南。此资源提供了详细说明，可帮助您有效地设置应用中元素的样式。

扩展了平台和功能支持

<permission> 元素现在支持其他平台和功能：

  • Android 支持：该元素现在可在 Android 设备上正常运行，从而扩大了其在不同用户平台上的适用范围。
  • 地理定位支持：您现在可以使用 <permission> 元素和额外的 preciselocation 布尔值属性来请求 type="geolocation" 权限。虽然 preciselocation 属性仅影响提示的措辞，但我们正积极努力，以便在未来的更新中区分粗略位置信息权限和精确位置信息权限。

总结

我们一直在努力简化权限请求并提升网页上的用户体验，此次对 <permission> 元素的增强是其中一项举措。我们鼓励您试用这些新功能并提供反馈，以帮助我们完善和改进此功能。