CSSContainerRule: containerQuery property - Web APIs | MDN (original) (raw)

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.

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>

// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

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

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

<style id="example-styles">
  /* 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.

const exampleStylesheet = document.getElementById("example-styles").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.