CSS - container-name

The container-name property of CSS specifies a list of queryable container names that will be used by the @container at-rule in a container query. A container query is responsible for applying styles to the elements based on the size of the nearest ancestor or parent with a containment context.

Possible Values

The container-name property can have only one value, which is as follows:

  • <container-name>: It is case-sensitive string which is used to identify the container. Few conditions apply on setting up the container-name:

Following conditions apply:

  • Any valid <custom-ident> can be used, but it must not equal to default.

  • Name value must not be specified in quotes.

  • The ident provided with dash in beginning denoting the user-defined identifiers is allowed, such as --container-name-sample.

  • Multiple values separated by a space are allowed.

Applies to

All the HTML elements.

Syntax

container-name = none | <custom-ident>+

CSS container-name - Basic Example

Following example demonstrates the way to name a container, using the property container-name.

<html>
<head>
<style>
      .card {
         margin: 10px;
         border: 2px dotted;
         font-size: 1.5em;
         width: 500px;
      }
      .post {
         border: 2px solid red;
      }

      /* A container context based on inline size */
      .post {
         container-type: inline-size;
         container-name: sample;
      }

      /* Styles to be applied if the container's (here container is the div element, with class = .post) 
      min-width is 400px */
      
      @container sample (min-width: 400px) {
         p {
            visibility: hidden;
         }
      }
</style>
</head>
<body>
   <div class="post" >
      <div class="card">
         <h2>Card title</h2>
         <p>Card content Visible Now</p>
      </div>
   </div>   
</body>
</html>

The example above a container queriy, that is applied to the contents of the .post element when min-width is 400px.

Resize the window to see the effect
Advertisements