CSSContainerRule

Instance properties

Inherits properties from its ancestors CSSConditionRule, CSSGroupingRule, and CSSRule.

CSSContainerRule.containerName Read only

Returns a string representing the name of an @container, or an empty string.

CSSContainerRule.containerQuery Read only

Returns a string representing the set of features or "container conditions" that are evaluated to determine if the styles in the associated @container are applied.

Instance methods

No specific methods; inherits methods from its ancestors CSSConditionRule, CSSGroupingRule, and CSSRule.

Examples

Unnamed container rule

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.

The first part of the code simply creates a list for logging the container rule properties, along with a JavaScript log() method to simplify adding the properties.

<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);
}

Then 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 example is shown below. As described in the corresponding @container example, 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 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 containerName, containerQuery and conditionText (inherited) properties.

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

The example output is shown below. The log section lists the containerName, which is an empty string as no name has been defined. The containerQuery and conditionText strings are also logged, and have the same value because there is no name defined. The card should change background and as the width of the page transitions through 650px.

Named container rule

The example below defines a named @container rule, and displays the properties of the associated CSSContainerRule. The CSS is very similar to that in the @container example Creating named container contexts.

<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 (the example does not show the logging code, as this is the same as in the previous example).

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

As described in @container, the CSS for the container element specifies the type of the container, and may also specify a name for the container. The card has a default font size, which is overridden for the @container named sidebar if the minimum width is greater than 700px.

<style id="example-styles">
  .post {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* Default heading styles for the card title */
  .card h2 {
    font-size: 1em;
  }

  @container sidebar (width >= 700px) {
    .card {
      font-size: 2em;
    }
  }
</style>

The code for getting the sheet and rules is almost identical to the previous example. The only difference is that in this example we have three CSS rules, so to get the associated CSSContainerRule we get the third entry in the cssRules.

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);

The example output is shown below. The log section lists the containerName and containerQuery strings. The conditionText is also logged, and shows the combination of these two strings. The title in the card section should double in size as the width of the page goes over 700px.

Specifications

Browser compatibility

See also

• CSS container-name, container-type, and container shorthand properties
• CSS containment module
• Container queries
• Using container size and style queries