CSS - 容器名称

CSS 的container-name 属性指定了一个可查询容器名称列表，这些名称将由@container at-rule 在容器查询中使用。容器查询负责根据具有包含上下文的最近祖先或父级的尺寸来为元素应用样式。

可能的值

container-name 属性只能有一个值，如下所示

<container-name>：它是一个区分大小写的字符串，用于识别容器。在设置容器名称时，需要满足一些条件。

以下条件适用

可以使用任何有效的<custom-ident>，但它不能等于default。
名称值不能用引号括起来。
开头带破折号表示用户定义标识符的标识符是允许的，例如--container-name-sample。
允许用空格分隔的多个值。

应用于

所有 HTML 元素。

语法

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

CSS container-name - 基本示例

以下示例演示了如何使用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>

以上示例中的容器查询，当最小宽度为 400px 时，应用于.post 元素的内容。

调整窗口大小以查看效果

打印页面