一个 HTML 开关控件

我们非常高兴能在 Safari 17.4 中引入一个新的 HTML 表单控件：一个开关。

此示例的 HTML 大致如下

<style> .special { accent-color: papayawhip } </style>
<input type=checkbox switch checked>
<input type=checkbox switch checked class=special>

开关是移动平台和各种 UI 框架中常用的一种控件，但迄今为止，它们并未内置于 Web 平台。鉴于对这种控件的广泛需求，我们决定改变这一现状。

我们处理此问题的方式与 HTML 中添加其他新表单控件的方式一致

• 我们希望它在默认情况下具有操作系统控件的外观和感觉。它应与最终用户的偏好相匹配，并且他们应该能够以各种方式操作开关的“滑块”。
• 我们希望确保它向后兼容。不支持 <input type=url> 的浏览器会将其视为 <input type=text>。同样，不支持 <input type=checkbox switch> 的浏览器会将其视为 <input type=checkbox>。
• 我们希望标记和 API 易于熟悉。它与复选框类似，只是 :indeterminate 伪类永远不匹配。
• 我们希望控件具有可访问性。在底层，它使用 ARIA switch 角色，像操作系统中的开关一样宣布“开”和“关”状态。在 macOS 上，如果您启用“区分无颜色”，或在 iOS 上，如果您启用“开/关标签”，开关将显示辅助功能指示器。
• 我们希望控件可样式化。与 <input type=checkbox> 一样，如果您使用 appearance: none，作为 Web 开发人员，您可以完全控制其外观。我们甚至更进一步，确保在使用 appearance: none 时，所有属性都将具有其初始值。（另请参阅下文解释的实验性 ::thumb 和 ::track 伪元素，以了解此领域的计划增强功能。）使用 appearance: auto（默认值）时，对样式的控制更加有限。accent-color 属性受到支持，并将应用于开关的“轨道”背景，如上图所示。
• 我们希望控件支持多种语言，因此它开箱即支持垂直渲染。（这与我们最近如何为现有表单控件添加垂直渲染支持的做法一致。）

我们很想看看您会用它做些什么，以及您希望此控件还能实现哪些功能。

开关与复选框

通常，我们建议在最终用户将用户界面元素理解为“开”或“关”设置时使用开关。复选框则适用于最终用户将元素理解为待选择项的情况。

实验性 ::thumb 和 ::track 伪元素

在 Safari 中，如果您前往“设置”→“功能标志”，您可以启用“::thumb 和 ::track 伪元素”，这使得 Web 开发人员可以更好地控制构成开关的各个部分：其滑块和轨道。本质上，这将单个元素变成了三个，一个父元素带有两个同级子元素。

我们决定暂时不发布这些伪元素，以便为标准化流程提供额外时间来最终确定它们的工作方式。我们还希望确保在发布它们时，它们能适用于为之设计的其他 HTML 控件，例如 <input type=range>。这样，@supports(::thumb) 就将是您所需的所有功能检测。

感谢您的反馈

我们很乐意听取您对这个新 HTML 表单控件的看法。发送推文给 @webkit 分享您对此功能的想法。您可以在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。您也可以在 LinkedIn 上关注 WebKit。如果您遇到任何问题，我们欢迎您提交 WebKit 错误报告，针对此类 WebKit 功能的问题。报告问题会带来巨大的帮助。

您还可以下载最新的 Safari 技术预览版，在这些新 Web 平台功能出现在 Safari Beta 版之前进行试用。

最后，非常感谢 Lily Spiniolas 在 Apple 实习期间为这项功能付出了大量工作。她不仅在 WebKit 中原型化了一个实现，还为 HTML 标准创建了拉取请求，并仔细思考了其设计的许多方面。