在实时网站上使用“复选框”hack

Question

所以最近出现了很多使用 CSS 实现“复选框黑客”的示例。

Css-Tricks 很好地解释了 hack 的作用：

“复选框黑客”是您使用连接标签和复选框的地方 输入，通常是您尝试控制的其他一些元素

Source & more information of the hack.

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

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

您是否认为这种 hack 可以在实时网站上使用，即使它的语义不好或者您认为可以使用？

Answer 1

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

免责声明：其中一些内容超出了您“应该”的界限 使用 CSS 并引入一些不好的语义。它仍然是邪恶的乐趣 玩和酷，这是可能的，但一般来说是功能性的 行为应该由 JavaScript 控制。

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

例如，如果它可以帮助用户填写表格：那就太好了。请记住，对 :checked 的支持并不普遍，因此如果您的网站的可用性依赖，请通过 javascript 寻求替代解决方案/垫片。

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