基于宽度的CSS选择器？

Question

是否有 CSS 规则可以根据元素的宽度来匹配元素？如果没有，在标准中提出这一点是否有趣？

可以执行类似

code:max-width(200px) { white-space: nowrap; }

的操作来让所有小代码标签强制换行。

我知道我可以使用一些js。

Answer 1

是否有 CSS 规则可以根据元素的宽度来匹配元素？

没有。

如果没有，在标准中提出这一点是否有趣？

也许吧，但不是选择器标准，因为选择器并不打算与 CSS 的样式方面紧密耦合。

几年前有人提出了标准化“元素查询”的提议，但除了一些概念验证之外，它们似乎大多已经消失了。可能是因为它们无法以稳健的方式规范和实现（立即想到循环依赖）。

Answer 2

这可能会变得不一致，因为新元素可能会受到意外影响。我只需向 html 中的任何元素添加一个定义 {wrap: nowrap;} 的类。或者，如果元素宽度在调整大小时发生变化，只需使用一些 js。

window.onscroll = function(){
    var elementWidth = document.getElementById('elementID').style.width;
    if(elementWidth < 200){ .. do something .. }
    else{ .. reverse changes .. }
}

Answer 3

使用 CSS3 无法做到这一点，但您可以使用元素查询。检查这个库：https://elementqueries.com

这是一个例子：

@element code and (max-width: 200px) {
  :self {
    white-space: nowrap;
  }
}

Answer 4

我刚刚看到了选择器中媒体查询的示例，实际上是同一件事，尽管伪选择器会非常好并且可能会取代媒体查询。我认为有一个新的伪选择器 :aspect-ratio(4:3) 支持像 :aspect-ratio(>4:3) 这样的范围会很好。这对于根据方向和宽高比设置响应式元素的样式非常方便。

Answer 5

容器查询现已添加到 CSS 中，以解决这个特定问题。

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

.post {
  container-type: inline-size;
}

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

示例的进一步描述和解释的链接：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

我可以使用：https://caniuse.com/css-container-queries