TheCSSContainerRule interface represents a single CSS@container rule.

An object of this type can be used to get the query conditions for the@container, along with the container name if one is defined.Note that the container name and query together define the "condition text", which can be obtained usingCSSConditionRule.conditionText.

Instance properties

Inherits properties from its ancestorsCSSConditionRule,CSSGroupingRule, andCSSRule.

CSSContainerRule.containerNameRead only

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

CSSContainerRule.containerQueryRead 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 ancestorsCSSConditionRule,CSSGroupingRule, andCSSRule.

Examples

Unnamed container rule

The example below defines an unnamed@container rule, and displays the properties of the associatedCSSContainerRule.The CSS is the same as in the@container exampleSetting 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 JavaScriptlog() method to simplify adding the properties.

<div>  <h2>Log</h2>  <ul></ul>  <hr /></div>

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

Then we define the HTML for acard (<div>) contained within apost.

<div>  <div>    <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>  /* 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 theHTMLStyleElement associated with the example using its id, and then uses itssheet property to get theStyleSheet.From theStyleSheet we get the set ofcssRules added to the sheet.Since we added the@container as the second rule above, we can access the associatedCSSContainerRule using the second entry, with index "1", in thecssRules.Last of all, we log thecontainerName,containerQuery andconditionText (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 thecontainerName, which is an empty string as no name has been defined.ThecontainerQuery andconditionText 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 associatedCSSContainerRule.The CSS is very similar to that in the@container exampleCreating named container contexts.

<div>  <h2>Log</h2>  <ul></ul>  <hr /></div>

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

First we define the HTML for acard (<div>) contained within apost (the example does not show the logging code, as this is the same as in the previous example).

<div>  <div>    <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 namedsidebar if the minimum width is greater than 700px.

<style>  .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 associatedCSSContainerRule we get the third entry in thecssRules.

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 thecontainerName andcontainerQuery strings.TheconditionText 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

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