CSSContainerRule: containerQuery property

Baseline 2023

Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The read-only containerQuery property of the CSSContainerRule interface returns a string representing the container conditions that are evaluated when the container changes size in order to determine if the styles in the associated @container are applied.

For example, the value of containerQuery for the @container below is (min-width: 700px):

css
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

Value

A string containing the container query.

Note that the value may not be identical to the original string, as normalizations such as removing whitespace may happen.

Examples

The example below defines an unnamed @container rule, and displays the properties of the associated CSSContainerRule. The CSS is the same as in the @container example Setting styles based on a container's size.

First we define the HTML for a card (<div>) contained within a post.

html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

The CSS for the container element specifies the type of the container. The @container then applies a new width, font-size and background color to the contained element "card" if the width is less than 650px.

html
<style id="examplestyles">
  /* A container context based on inline size */
  .post {
    container-type: inline-size;
  }

  /* Apply styles if the container is narrower than 650px */
  @container (width < 650px) {
    .card {
      width: 50%;
      background-color: gray;
      font-size: 1em;
    }
  }
</style>

The code below gets the HTMLStyleElement associated with the example using its id, and then uses its sheet property to get the StyleSheet. From the StyleSheet we get the set of cssRules added to the sheet. Since we added the @container as the second rule above, we can access the associated CSSContainerRule using the second entry (with index "1"), in the cssRules. Last of all, we log the container name and query properties.

js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);

The example output is shown below. The log section lists the query string. The card should change background and as the width of the page transitions through 650px.

Specifications

Specification
CSS Containment Module Level 3
# dom-csscontainerrule-containerquery

Browser compatibility

BCD tables only load in the browser

See also