html - 在实时网站上使用 "Checkbox"hack

Question

所以最近有很多关于 CSS 的“Checkbox Hack”的例子。

Css-Tricks 对 hack 的作用有很好的解释:

The "Checkbox Hack" is where you use a connected label and checkbox input and usually some other element you are trying to control

Source & more information of the hack.

最近让我喜欢这个 hack 的是 CoDrops 实验，它带有单选按钮到 create filter functionality with just CSS.太棒了。

黑客可以做一些非常了不起的事情，而这些事情需要 JavaScript 而不是。问题是复选框和单选按钮只能用于表单，所以语义不好。但是我不认为使用在大多数浏览器中兼容的“hack”和移动设备的解决方法有什么问题，如果它意味着更少的 JavaScript 和更好的性能的话。

您认为这种 hack 在实时网站上使用“可以”吗，即使它的语义很糟糕，或者您认为可以使用吗？

Answer 1

阅读您链接到的网站上的大黄色免责声明:

Disclaimer: Some of this stuff crosses the line of what you "should" do with CSS and introduces some bad semantics. It's still wicked fun to play with and cool that it's possible, but in general functional behavior should be controlled by JavaScript.

我不会说这本身就是一个“hack”。这一切都非常有效，例如，您还可以使用 + 相邻选择器或 :focus 做很多其他疯狂的事情。但是，它绝对可以用于一些“hacky”的东西。

例如，如果它可以帮助用户完成表单:那就太好了。请记住，对 :checked 的支持不是通用的，因此如果您网站的可用性依赖，请通过 javascript 寻求替代解决方案/填充程序。

如果您只是为了行为/展示而将复选框元素添加到您的标记中，那么是的 - 您应该避免它。如果您已经有了该元素，而您只是改善它的用户体验，那就太好了。