本机切换开关登陆在一个浏览器中。Safari 在Safari 技术预览版 185 版本中引入了这个新的 HTML 控件，然后在 186 版本中对其进行了扩展。
创建半原生 HTML 切换开关组件非常困难。它涉及使用复选框、添加“开关”ARIA 角色、使用 CSS 删除其外观，以及添加样式以使其看起来像经典开关或我们想要的任何样式 -检查此切换集合。
即使做到了这一切，有些事情还是无法避免。例如，开发人员仍然可以使用 JavaScript 将不确定属性设置到基本复选框中，这将使切换开关无效。
本机解决方案可以防止这些问题并提供更好的体验。即使它只是在一种浏览器上进行的实验并且存在一些问题（正如我们很快将描述的），这种尝试也是受欢迎的，我希望它能得到关注。
它是如何工作的？
Safari 的实现非常简单。只需将该switch属性添加到常规复选框即可完成！
<!-- this will render a checkbox --> <input type="checkbox" /> <!-- this will render a toggle switch --> <input type="checkbox" switch />
真的就是这么简单。不需要额外的 CSS、JS 或任何复杂的东西，浏览器将处理其余的事情，包括开箱即用的交互和样式。
只需将 switch 属性添加到复选框即可！
默认的可视化类似于 iOS 的切换开关，但作为该功能的一部分，Safari 包含两个伪元素 ::track， ::thumb可以轻松更新控件的外观和感觉。一目了然地添加了一些关于它们如何工作的示例（您'需要 Safari 技术预览版 185 或更高版本才能看到它们）。
对这个语法的思考
switch在复选框中添加属性会很容易，但也可能会产生误导，因为它看起来将切换开关等同于复选框。虽然这对许多人来说似乎是合乎逻辑的，但对于开关控件来说这是不公平的，因为它成为与复选框紧密耦合的“子控件”。
它们不是相同的组件：它们具有不同的值（选中/未选中与开/关），其中一个具有不确定状态（复选框，尽管从技术上讲它不是一种状态），并且应该有一个与改变（切换）。
那么为什么要把他们结合起来呢？仅仅因为他们看起来相同或行为方式“相似”？那是错误的。number按照这个逻辑，我们不应该有, date, password, email, ...类型的输入search，因为我们已经有了处理所有这些的文本输入。
<!-- We don't do this --> <input type="text" number /> <input type="text" date /> <input type="text" password /> <!-- So why do this? --> <input type="checkbox" switch /> <!-- Wouldn't this make more sense? --> <input type="switch" />
在我看来，切换开关应该是它自己的输入类型。而不是依赖于复选框的“子类型”或“子控件”。
优点和缺点
与每项技术（尤其是新技术）一样，Safari 的切换开关也有优点和缺点。以下是该组件的一些优点和缺点。
优点
- 为控件提供本机支持：不需要需要太多代码并且可能容易出错的黑客或复杂的解决方案。
- 简单的界面：易于实现（添加属性！）并且易于遵循新的伪元素（
::track和::thumb）。 - CSS 中的简单样式：通过引入两个伪元素（
::track和::thumb），更改组件的样式将变得简单。 - 开箱即用的辅助功能：语音屏幕阅读器可以正确朗读控件，无需额外的 ARIA 标签或角色。随着时间的推移，阿德里安·罗塞利进行了测试并分享了结果。
缺点
- 非标准功能：这是 Safari 的提案，尚未被其他浏览器采用或纳入标准。
- 仅限 Safari 的功能：由于这是 Safari 的新建议，因此它只能在 Safari 上运行，并且只能在浏览器的技术预览版（从版本 185 开始）中运行。
- 默认样式很粗略：切换看起来像常规的 iOS 切换，但在缩放和应用缩放时会出现一些问题。
考虑到这些缺点，可以肯定地说这不是一个可投入生产的功能。至少现在还没有。这可能是渐进增强方法的一个很好的例子（也许是他们将其设为属性而不是完整类型的原因：如果不支持，则返回到复选框），但等待查看组件如何向前移动会更好。现在还为时过早。
最后的想法
切换开关是浏览器的一个很好的补充，Safari 团队很好地将它添加到了技术预览版本中。尽管如此，实施感觉有点仓促——也许 Safari 试图在摆脱“新 IE 浏览器”标签的同时赢得开发者的青睐？
更违反直觉的事情之一是使用的语法。switch在复选框中添加一个属性会很容易，但它也不必要地关联两个控件，并且不遵循其他表单控件所遵循的相同符号。如果这是在该提案向前推进时（而不是如果）发生变化的一件事，我不会感到惊讶。因此，请注意未来的支持和可能的变化。
正如我所说，这是对表单控件的一个很好的补充。我希望它能引发关于将其添加到标准中的更深入的讨论。我期待它会变成什么样子以及在任何浏览器上使用它的可能性。
