html - CSS 中的状态变量

Question

我正在玩一些扩展框。

我试图在不使用 JavaScript 的情况下创建一个 HTML + CSS 展开框。

现在我的代码看起来像这样:

/* no js */

.expand_box{}
.expand_box > .expand_box_checkbox{
  display: none;
}
.expand_box > .expand_box_headline{}
.expand_box > .expand_box_content{
  display: none;
}
.expand_box > .expand_box_checkbox:checked + .expand_box_headline + .expand_box_content{
  display: block;
}

<div class="expand_box">
  <input  id="eb1" class="expand_box_checkbox" type="checkbox" />
  <label for="eb1" class="expand_box_headline">click me</label>
  <div class="expand_box_content">
    Content to see after clicking on "click me"
  </div>
</div>

现在，这实际上是一个很好的解决方案，因为它不依赖于 JS，几乎可以在所有设备上运行。

---

我想知道的是:

我使用复选框作为状态信息的存储。但这条信息在技术上不属于 HTML，因为我只将它用于样式。

有什么方法可以使用纯 CSS 跟踪“用户激活‘点击我’按钮”的状态吗？

我知道 CSS 变量的存在。也许我可以以某种方式使用它们？

Answer 1

HTML5 具有用于展开框的 native 控件。它是 details/summary 元素。在 supporting browsers它不需要 JS，只需要 CSS 来自定义样式。它可能需要一些 JS 才能在不支持的浏览器中工作(作为 polyfill)。

除了隐藏的复选框 hack 之外，CSS 本身还有另一种可能性来“模拟”具有很长转换延迟的状态(如描述的 here ，警告:该示例使用 的无单位 0 值transition-duration 似乎不再起作用，但它可以与 0s 一起使用)。但这些解决方案也太老套了。 CSS 从来不应该维护状态，但它在呈现方面非常出色。