How to override the value of a CSS variable inside a container query

Question

At the :root level a CSS variable is declared with a value. This variable is used to style elements.

Inside a container query a new value is assigned to the variable. The styled elements should change to reflect that new value.

This code should change the width of a box when the html element is 40 characters wide. It contains a container query, which does not work, and a media query that does:

: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>

The box should be 30 characters wide when the screen is 40 characters wide. That does not happen. The rule is applied since the border changes to red dots, so I think the condition is correct.

The similar syntax does work with a media query.

The media query cannot be used because it uses the default browser font and size, not the actual font and its size set with CSS.

Answer 1

Try this:

@container html (min-width: 40ch) {
    * {
        --box-w: 30ch;
    }

    .box {
        border: 1ch dotted #c00;
    }
}

I believe it does not work, because you are targeting :root with html.

Answer 2

Container queries are not yet widely supported by browsers. Your code appears correct, but due to limited browser support, you may want to use media queries for consistent behavior. Keep an eye on browser updates for improved container query support in the future.