Container Style Queries

Table of Contents

Style queries are a subset of ‘container queries’, but rather than querying conditions of the container size, we can query the computed value of any CSS properties on the container. This allows low-level enhancements, such as applying non-font-style em styles when the parent element is already italic:

em {
  font-style: italic;

  @container style(font-style: italic) {
    background: powderblue;
  }
}

It could also be used to allow querying high level custom properties. For example, when the root color scheme changes we can set a custom property, and query the value to adjust our components:

html {
  --current-scheme: light;
  container-name: color-scheme;
  color-scheme: light dark;

  @media (prefers-color-scheme: dark) { --current-scheme: light; }
  /* value can also be updated by explicit user interface, if desired */
}

body {
  @container color-scheme (--current-scheme: light) {
    /* light mode tokens/styles */
  }

  @container color-scheme (--current-scheme: dark) {
    /* dark mode tokens/styles */
  }
}

.component { /* or `@scope (.component)` */
  @container color-scheme (--current-scheme: light) {
    /* light mode component tokens/styles */;
  }

  @container color-scheme (--current-scheme: dark) {
    /* dark mode component tokens/styles */;
  }
}

My Notes

Specification

Issues

Support

No production support at this time.

Implementations

Articles & Demos