container-type

Cú pháp

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;
container-type: anchored;

/* Two values */
container-type: size scroll-state;

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

Giá trị

Thuộc tính container-type có thể nhận một giá trị từ danh sách dưới đây, hoặc hai giá trị — một phải là scroll-state và giá trị kia có thể là inline-size hoặc size. Nói cách khác, một phần tử có thể được thiết lập thành size query container, scroll-state query container, cả hai, hoặc không phải cả hai.

anchored

Thiết lập query container cho anchored container query trên container. Trong trường hợp này, kích thước của phần tử không được tính toán độc lập; không có containment nào được áp dụng.

inline-size

Thiết lập query container cho các truy vấn về kích thước trên trục inline của container. Áp dụng containment style và inline-size cho phần tử. Kích thước inline của phần tử có thể được tính toán độc lập, bỏ qua các phần tử con (xem Using CSS containment).

normal

Giá trị mặc định. Phần tử không phải là query container cho bất kỳ container size query nào, nhưng vẫn là query container cho container style queries.

scroll-state

Thiết lập query container cho scroll-state query trên container. Trong trường hợp này, kích thước của phần tử không được tính toán độc lập; không có containment nào được áp dụng.

size

Thiết lập query container cho container size query trong cả hai chiều inline và block. Áp dụng containment style và size cho phần tử. Size containment được áp dụng cho phần tử theo cả hướng inline và block. Kích thước của phần tử có thể được tính toán độc lập, bỏ qua các phần tử con.

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

Cú pháp hình thức

container-type = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]  

Mô tả

Container query cho phép bạn áp dụng có chọn lọc các kiểu dáng bên trong container dựa trên các truy vấn điều kiện được thực hiện trên container. Quy tắc at-rule @container được dùng để chỉ định các kiểm tra được thực hiện trên container, và các quy tắc sẽ áp dụng cho nội dung của container nếu truy vấn trả về true.

Các kiểm tra container query chỉ được thực hiện trên các phần tử có thuộc tính container-type, định nghĩa các phần tử là size, scroll-state hoặc anchored query container, hoặc kết hợp cả hai.

Container size query

Container size query cho phép bạn áp dụng có chọn lọc các quy tắc CSS cho các con của container dựa trên điều kiện kích thước như kích thước tối đa hoặc tối thiểu, tỷ lệ khung hình hoặc hướng.

Các size container còn được áp dụng size containment — điều này tắt khả năng lấy thông tin kích thước từ nội dung của phần tử, rất quan trọng để tránh vòng lặp vô hạn trong container query. Nếu không như vậy, một quy tắc CSS bên trong container query có thể thay đổi kích thước nội dung, điều này có thể khiến truy vấn trở thành false và thay đổi kích thước phần tử cha, điều này lại có thể thay đổi kích thước nội dung và chuyển truy vấn lại thành true, và cứ tiếp tục như vậy. Chuỗi này sẽ lặp lại vô tận.

Kích thước container phải được đặt theo ngữ cảnh, chẳng hạn như các phần tử block-level kéo dài theo toàn bộ chiều rộng của cha, hoặc được định nghĩa tường minh. Nếu không có kích thước theo ngữ cảnh hoặc tường minh, các phần tử có size containment sẽ bị thu gọn.

Container scroll-state query

Container scroll-state query cho phép bạn áp dụng có chọn lọc các quy tắc CSS cho các con của container dựa trên điều kiện trạng thái cuộn như:

• Nội dung container có đang được cuộn một phần không.
• Container có phải là snap target sẽ được snap vào scroll snap container không.
• Container có được định vị qua position: sticky và đang bám vào biên của scrolling container không.

Trong trường hợp đầu tiên, container được truy vấn là bản thân scroll container. Trong hai trường hợp còn lại, container được truy vấn là phần tử bị ảnh hưởng bởi vị trí cuộn của scroll container tổ tiên.

Anchored container query

Anchored container query cho phép bạn áp dụng có chọn lọc các quy tắc CSS cho các con của anchor-positioned container khi có position-try fallback đang hoạt động trên nó, như được chỉ định qua thuộc tính position-try-fallbacks.

Ví dụ, bạn có thể có phần tử tooltip định vị theo anchor, được định vị phía trên anchor của nó theo mặc định qua giá trị position-area là top, nhưng có giá trị position-try-fallbacks là flip-block được chỉ định. Điều này sẽ khiến tooltip lật theo hướng block xuống phía dưới anchor khi nó bắt đầu tràn ra khỏi đỉnh viewport. Nếu chúng ta đặt container-type: anchored trên nó, chúng ta có thể phát hiện khi nào position-try fallback được áp dụng qua quy tắc @container và áp dụng CSS kết quả.

.tooltip {
  position: absolute;
  position-anchor: --myAnchor;
  position-area: top;
  position-try-fallbacks: flip-block;
  container-type: anchored;
}

Ví dụ

Thiết lập containment theo kích thước inline

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

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Để tạo ngữ cảnh container, thêm thuộc tính container-type vào một phần tử. Ví dụ sau sử dụng giá trị inline-size để tạo ngữ cảnh containment cho trục inline của container:

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

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 rộng hơn 400px:

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

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
• Using anchored container queries
• @container at-rule
• CSS container shorthand property
• CSS container-name property
• CSS content-visibility property