具有 css 自定义属性的条件样式

Question

我喜欢使用css 自定义属性，但我经常发现我希望我能做到这一点。

我希望能够根据 css 自定义属性的值有条件地应用一些样式。这是一些伪代码：

.something {
  border: var(--is-dark-theme) ? 1px solid : none;
}

我知道自定义属性不能像这样工作。但是可能还有其他一些我不知道的方法可以帮助我达到类似的结果？

或者也许有一些规范提案可以在未来实现？

Answer 1

这是另一个类似于Ori Drori 答案的想法，我依靠在边框内使用无效值来删除边框。这可以在有用的情况下要使用的关键字，如false/ true/ yes/no

.something {
  border: var(--is-dark-theme,2px) solid black;
}

<div class="something">Dark theme</div>

<div class="something" style="--is-dark-theme: false">Light theme</div>

Answer 2

您有时可以使用calc()来获得大致相似的结果。在这种情况下，如果--is-dark-theme是 0 或 1，您可以将其乘以widthof 边框，以显示或隐藏它：

.something {
  border: calc(var(--is-dark-theme) * 1px) solid black;
}

<div class="something" style="--is-dark-theme: 1">Dark theme</div>

<div class="something" style="--is-dark-theme: 0">Light theme</div>

Answer 3

仅供参考：以下内容今天（2023-02-06）不起作用，但将来的某一天可能会出现这个非常好的 CSS 功能，称为“CSS 样式容器查询”：

/* not working today (2023-02-06), maybe in future */

@container style(--theme: dark) {
  .box {
    border: 1px solid #aaa;
  }
}