开关。切换。无论您想称它们为什么，它们都已存在了一段时间，并且一直是许多表单界面的主要组成部分。它们甚至被烘焙到许多 CSS 框架中，包括 Bootstrap 和 Foundation。
很容易用二进制术语来思考它们：开和关。关和开。单击以更改状态，然后就可以了，对吧？我的意思是，它只是一个带有样式化视觉表示的复选框。
好吧，Adrian Roselli 向我们展示了还有更多需要考虑的地方。而且，不仅如此，他还展示了我们如何可以设计不足它们
我将只提供样式来将标准复选框视觉上转换为视觉开关。没有 ARIA，没有脚本，没有特殊功能。一个渐进增强型复选框，如果 CSS 文件未加载，它将继续工作
这里有很多东西需要消化。他关于可访问性的方法涵盖了从悬停、活动、聚焦和禁用状态到明暗模式下的对比度，以及介于两者之间的许多方面。特别关键的是他在上面引文中提到的渐进增强。
我认为 Adrian 帖子最有趣的事情是他的方法是多么灵活，可以处理任何情况，包括颜色方案和书写模式。他还注意到了不确定的复选框，既不开也不关，但可能介于两者之间。我们有一个 用于此的 CSS 伪选择器，鉴于它是一个纯粹的视觉状态，无法在 HTML 中设置，需要通过 JavaScript 注册，它可以保证发布自己的帖子。有趣的是，对于开关，可以考虑一个“介于两者之间”的状态，Adrian 用于默认状态“飞行模式”的用例非常引人注目。
为了确保前端设计良好，我们需要做很多工作，我认为这篇帖子是我一段时间以来见过的最好的例子，说明为什么我们的工作 不是要解决的问题，更多的是更好地理解我们工艺工具的挑战。