CSSContainerRule: containerName property

Value

A string that contains the name of the container condition defined in a container rule, but only if it has just one container condition defined.

If no name is defined, or if the rule defines multiple container conditions, this is the empty string ("").

Description

This property reflects the value of the name part of the container condition in a corresponding @container at-rule that has just one container condition.

For example, the value of containerName for the @container below is sidebar:

@container sidebar (width >= 700px) {
  /* Styles */
}

Examples

Basic usage

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

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

HTML

First, we define the HTML for a card contained within a post. These are represented by two nested <div> elements.

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

CSS

The CSS for the container element specifies the type of the container along with a name. The card has a default font size, which is overridden for the @container named sidebar if the 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>

JavaScript

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 third rule above, we can access the associated CSSContainerRule using the third entry (index "2") in the cssRules.

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.

We then use containerRule to show the name of the first container condition. If CSSContainerRule.conditions is supported on the browser, we show the name and query from that as well.

log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);

if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
}

Results

The example output is shown below. The log section lists the name of the only container condition using containerName. It also shows the name and query using the conditions property, if supported.

Note that the text in the card <div> should double in size as the container width reaches 700px, and will halve again as the width goes back down below 700px.

Multiple container conditions

The example below is almost exactly the same as the previous example except that the CSS specifies multiple container conditions.

Note that we've hidden the HTML, as it is the same as in the previous example.

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

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

CSS

The card has a default font size, which is overridden for the @container named sidebar if the width is greater than 700px or if the container has the name other-name. Note that this condition is contrived to demonstrate the effect of multiple conditions (it does not affect the behavior of the example).

<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), other-name {
    .card {
      font-size: 2em;
    }
  }
</style>

JavaScript

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 third rule above, we can access the associated CSSContainerRule using the third entry (index "2") in the cssRules.

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.

The code is slightly different from the previous case because if multiple container conditions are not supported by the browser, the containerRule will be undefined. Instead we only log the value of containerName if the browser supports multiple container conditions.

if (!containerRule) {
  // Browser doesn't support multiple container conditions
  log(
    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
  );
} else {
  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
}

if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
}

See Feature testing in CSSContainerRule for more information/examples.

Results

The example output is shown below. Note that the rule doesn't exist at all if the browser doesn't support multiple container conditions. If it does, then the value of containerName is the empty string.

Specifications

Browser compatibility

See also

• CSS container shorthand property
• CSS containment module
• Container queries
• Using container size and style queries