主要观点:
- Safari 17.4 引入新 HTML 表单控件“开关”,此前该控件未内置在 web 平台中,现满足广泛需求而添加。
- 设计该控件遵循添加其他新表单控件的方式,包括外观符合操作系统默认、向后兼容、标记和 API 熟悉、可访问、可样式化、支持多种语言及垂直渲染等。
- 介绍开关与复选框的区别,开关适用于用户理解为“开”或“关”的设置,复选框适用于用户理解为可选择项。
- 提及实验性的“::thumb”和“::track”伪元素,目前未正式发布以给标准化过程更多时间,且希望其能适用于其他 HTML 控件。
关键信息:
- 开关示例 HTML 代码如
style
部分设置自定义颜色,两个input
分别为普通开关和带特殊颜色的开关。 - 开关在移动平台和多种 UI 框架中受欢迎,添加该控件考虑多方面因素。
- 可在 Safari 技术预览中尝试新 web 平台功能,若遇到问题可提交 WebKit 错误报告,也可通过社交媒体分享想法。
重要细节:
- 开关默认外观符合操作系统,用户可以多种方式操作“滑块”,使用 ARIA
switch
角色确保可访问性,有垂直渲染支持。 - 样式方面,使用
appearance: none
可完全控制外观,accent-color
可应用于“轨道”背景,appearance: auto
样式控制较有限。 - 实验性伪元素可让开发者更精细控制开关的各个部分,目前暂未正式发布。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。