英文:
Container Queries based on height not working
问题
我想要在现代Safari/Chrome浏览器中使用新的CSS容器查询功能。（Safari 16.3，Google Chrome 113.0）
但是基于高度的容器查询未按预期工作。
预期结果：一旦外部容器变为蓝色（屏幕高度为500px或以下），我希望粉色正方形（500px容器的50vh）变为红色。
当前结果：正方形保持为粉色，不变为红色。如果实现为宽度相对的话，示例会起作用。
我在实现中有什么错误，还是Webkit引擎尚未实现？在最终产品中，如果容器可由用户调整大小，是否有其他解决方案（无需JavaScript）来解决问题？
body {
margin: 0
}
.container {
height: 50vh;
container-type: inline-size;
}
.test {
width: 250px;
height: 250px;
background-color: hotpink;
}
@container (max-height: 250px) {
.test {
background-color: red;
}
}
@media screen and (max-height: 500px) {
.container {
background: blue;
}
}
<div class="container">
<div class="test"></div>
</div>
英文:
I would want to use the new CSS container queries in modern Safari/Chrome browser. (Safari 16.3, Google Chrome 113.0)
However container queries based on height are not working as expected.
Expected result: as soon as the outer container turns blue (500px screen height or below) I would expect the pink square (50vh of 500px container) to turn red.
Current result: The square stays pink and does not turn pink. The example works if the implementation is width relative.
Did I do anything wrong in my implementation or is it just not jet implemented in Webkit engine? Any other solutions (without Javascript) to solve the problem, if in the final product the container will be resizeable by the user?
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
body {
margin: 0
}
.container {
height: 50vh;
container-type: inline-size;
}
.test {
width: 250px;
height: 250px;
background-color: hotpink;
}
@container (max-height: 250px) {
.test {
background-color: red;
}
}
@media screen and (max-height: 500px) {
.container {
background: blue;
}
}
<!-- language: lang-html -->
<div class="container">
<div class="test"></div>
</div>
<!-- end snippet -->
答案1
得分: 7
inline-size 是宽度，不是高度。你必须使用 size。
> inline-size
>
> 查询将基于容器的内联尺寸。将布局、样式和内联尺寸的约束应用于元素。<sup>ref</sup>
英文:
inline-size is the width not the height. You have to use size
>inline-size
>
>the query will be based on the inline dimensions of the container. Applies layout, style, and inline-size containment to the element. <sup>ref</sup>
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
body {
margin: 0
}
.container {
height: 50vh;
container-type: size;
}
.test {
width: 250px;
height: 250px;
background-color: hotpink;
}
@container (max-height: 250px) {
.test {
background-color: red;
}
}
@media screen and (max-height: 500px) {
.container {
background: blue;
}
}
<!-- language: lang-html -->
<div class="container">
<div class="test"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论