Beyond Sizes

Container queries learned to monitor not only width, but also parent CSS property values. This is called Style Queries.

How It Works?

You can change child element style depending on what color or variable is set on parent.

.parent { --theme: dark; }

/* If parent has --theme variable equal to dark */
@container style(--theme: dark) {
  .card {
    background: black;
    color: white;
  }
}