一个 HTML 开关控件

主要观点:

  • Safari 17.4 引入新 HTML 表单控件“开关”,此前该控件未内置在 web 平台中,现满足广泛需求而添加。
  • 设计该控件遵循添加其他新表单控件的方式,包括外观符合操作系统默认、向后兼容、标记和 API 熟悉、可访问、可样式化、支持多种语言及垂直渲染等。
  • 介绍开关与复选框的区别,开关适用于用户理解为“开”或“关”的设置,复选框适用于用户理解为可选择项。
  • 提及实验性的“::thumb”和“::track”伪元素,目前未正式发布以给标准化过程更多时间,且希望其能适用于其他 HTML 控件。

关键信息:

  • 开关示例 HTML 代码如style部分设置自定义颜色,两个input分别为普通开关和带特殊颜色的开关。
  • 开关在移动平台和多种 UI 框架中受欢迎,添加该控件考虑多方面因素。
  • 可在 Safari 技术预览中尝试新 web 平台功能,若遇到问题可提交 WebKit 错误报告,也可通过社交媒体分享想法。

重要细节:

  • 开关默认外观符合操作系统,用户可以多种方式操作“滑块”,使用 ARIA switch角色确保可访问性,有垂直渲染支持。
  • 样式方面,使用appearance: none可完全控制外观,accent-color可应用于“轨道”背景,appearance: auto样式控制较有限。
  • 实验性伪元素可让开发者更精细控制开关的各个部分,目前暂未正式发布。
阅读 15
0 条评论