如何在容器查询中正确覆盖CSS变量的值？

问题描述 #

我在:root层级声明了CSS变量--box-w，用来控制.box元素的宽度。尝试通过容器查询在html元素宽度达到40ch时更新这个变量，让.box宽度随之改变，但变量更新未生效——容器查询的触发条件是有效的（.box的边框变成了红色点状），但.box的宽度仍保持初始的10ch。

媒体查询中修改:root变量的写法可以正常工作，但媒体查询依赖浏览器默认字体大小，无法适配我自定义的字体设置，因此必须使用容器查询解决这个问题。

原始代码如下：

:root {
  --box-w: 10ch;
}

html {
  container: html / size;
}

.box {
  background-color: #fc3;
  height: 3ex;
  width: var(--box-w);
}

@container html (min-width: 40ch) {
   :root {
    --box-w: 30ch;
  }
  .box {
    border: 1ch dotted #c00;
  }
}

@media (min-width: 50ch) {
   :root {
    --box-w: 40ch;
  }
  .box {
    border: 1ch solid #0c0;
  }
}

<div class="box"></div>

原因分析 #

容器查询的作用规则是：只能选择容器的后代元素，而:root对应的就是<html>元素本身（也就是我们定义的容器），不属于容器的子元素范畴。因此在@container规则中尝试修改:root的变量，不会对后代元素产生预期的作用——因为这个选择器在容器查询的作用域内无法正确生效。

解决方案 #

有两种简单的修改方式可以解决这个问题：

方法1：将CSS变量移到容器元素上 #

把变量的初始声明从:root移到容器元素<html>上，这样在容器查询中可以直接修改容器自身的变量，后代元素.box会继承更新后的变量值：

html {
  --box-w: 10ch; /* 变量声明移到容器元素 */
  container: html / size;
}

.box {
  background-color: #fc3;
  height: 3ex;
  width: var(--box-w);
}

@container html (min-width: 40ch) {
  html { /* 修改容器自身的变量 */
    --box-w: 30ch;
  }
  .box {
    border: 1ch dotted #c00;
  }
}

@media (min-width: 50ch) {
  html {
    --box-w: 40ch;
  }
  .box {
    border: 1ch solid #0c0;
  }
}

方法2：直接在目标元素上覆盖变量 #

不需要修改变量的初始作用域，直接在容器查询中给.box元素设置新的变量值，覆盖:root的初始值：

:root {
  --box-w: 10ch;
}

html {
  container: html / size;
}

.box {
  background-color: #fc3;
  height: 3ex;
  width: var(--box-w);
}

@container html (min-width: 40ch) {
  .box {
    --box-w: 30ch; /* 直接给目标元素设置变量 */
    border: 1ch dotted #c00;
  }
}

@media (min-width: 50ch) {
  :root {
    --box-w: 40ch;
  }
  .box {
    border: 1ch solid #0c0;
  }
}

两种方法都能实现需求：当html容器宽度达到40ch时，.box的宽度会更新为30ch，同时边框样式生效。

内容的提问来源于stack exchange，提问作者wob