container-name

Cú pháp

container-name: none;

/* A single name */
container-name: my-layout;

/* Multiple names */
container-name: my-page-layout my-component-library;

/* Global Values */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;

Giá trị

none

Giá trị mặc định. Container truy vấn không có tên.

<custom-ident>

Chuỗi phân biệt chữ hoa/thường dùng để xác định container. Các điều kiện sau áp dụng:

• Tên không được bằng or, and, not hoặc default.
• Giá trị tên không được đặt trong dấu nháy.
• Dashed ident dành cho các định danh do tác giả xác định (ví dụ: --container-name) được cho phép.
• Danh sách nhiều tên cách nhau bởi khoảng trắng được cho phép.

Định nghĩa hình thức

Cú pháp hình thức

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

Ví dụ

Sử dụng tên container

Với ví dụ HTML sau đây là thành phần card có tiêu đề và một số văn bản:

<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

Để tạo ngữ cảnh containment, thêm thuộc tính container-type vào một phần tử trong CSS. Ví dụ sau tạo hai ngữ cảnh containment, một cho thông tin meta của card và một cho đoạn trích bài viết:

.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

Viết container query thông qua quy tắc at-rule @container sẽ áp dụng kiểu dáng cho các phần tử của container khi truy vấn được đánh giá là đúng. Ví dụ sau có hai container query, một chỉ áp dụng cho nội dung của phần tử .post-excerpt và một áp dụng cho cả nội dung .post-meta và .post-excerpt:

@container excerpt (width >= 400px) {
  p {
    visibility: hidden;
  }
}

@container (width >= 400px) {
  p {
    font-size: 2rem;
  }
}

Để biết thêm thông tin về cách viết container query, xem trang CSS Container Queries.

Sử dụng nhiều tên container

Bạn cũng có thể cung cấp nhiều tên cho một ngữ cảnh container cách nhau bởi dấu cách:

.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

Điều này cho phép bạn nhắm đến container bằng một trong hai tên trong quy tắc at-rule @container. Điều này hữu ích nếu bạn muốn nhắm đến cùng một container với nhiều container query khi một trong hai điều kiện có thể đúng:

@container meta (width <= 500px) {
  p {
    visibility: hidden;
  }
}

@container card (width <= 200px) {
  h2 {
    font-size: 1.5em;
  }
}

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• CSS container queries
• Using container size and style queries
• Using container scroll-state queries
• @container at-rule
• CSS container shorthand property
• CSS container-type property
• CSS content-visibility property