CSS container queries

Sử dụng container size queries

Trong khi container queries áp dụng kiểu dáng dựa trên loại container, container size queries áp dụng kiểu dáng cụ thể dựa trên kích thước của container. Để sử dụng container size queries, bạn cần khai báo một containment context trên một phần tử để trình duyệt biết rằng bạn có thể muốn truy vấn kích thước của container này sau. Để làm điều này, hãy sử dụng thuộc tính container-type với giá trị size, inline-size, hoặc normal.

Các giá trị này có các hiệu ứng sau:

size

Query sẽ dựa trên các kích thước inline và block của container. Áp dụng containment layout, style, và size cho container.

inline-size

Query sẽ dựa trên kích thước inline của container. Áp dụng containment layout, style, và inline-size cho phần tử.

normal

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.

Hãy xem xét ví dụ sau về một card component cho bài đăng blog với tiêu đề và một số văn bản:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Bạn có thể tạo một containment context bằng cách sử dụng thuộc tính container-type:

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

Tiếp theo, sử dụng at-rule @container để định nghĩa một container query. Query trong ví dụ sau sẽ áp dụng các kiểu dáng cho các phần tử dựa trên kích thước của ancestor gần nhất có containment context. Cụ thể, query này sẽ áp dụng cỡ chữ lớn hơn cho tiêu đề card nếu container rộng hơn 700px:

/* Kiểu tiêu đề mặc định cho tiêu đề card */
.card h2 {
  font-size: 1em;
}

/* Nếu container lớn hơn 700px */
@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Khi sử dụng container queries, card có thể được tái sử dụng ở nhiều khu vực trên trang mà không cần biết cụ thể nơi nó sẽ được đặt mỗi lần. Nếu container chứa card hẹp hơn 700px, phông chữ tiêu đề card sẽ nhỏ, và nếu card nằm trong container rộng hơn 700px, phông chữ tiêu đề card sẽ lớn hơn.

Để biết thêm thông tin về cú pháp của container queries, hãy xem trang @container.

Đặt tên containment contexts

Trong phần trước, một container query đã áp dụng kiểu dáng dựa trên ancestor gần nhất có containment context. Có thể đặt tên cho containment context bằng thuộc tính container-name. Sau khi đặt tên, tên đó có thể được dùng trong @container query để nhắm đến một container cụ thể. Ví dụ sau tạo một containment context với tên sidebar:

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

Sau đó bạn có thể nhắm đến containment context này bằng at-rule @container:

@container sidebar (width > 700px) {
  .card {
    font-size: 2em;
  }
}

Thêm thông tin về đặt tên containment contexts có trên trang container-name.

Cú pháp viết tắt container

Cách khai báo viết tắt một containment context là sử dụng thuộc tính container:

.post {
  container: sidebar / inline-size;
}

Để biết thêm thông tin về thuộc tính này, hãy xem tài liệu tham khảo container.

Các đơn vị độ dài container query

Khi áp dụng kiểu dáng cho một container bằng container queries, bạn có thể sử dụng các đơn vị độ dài container query. Các đơn vị này xác định độ dài tương đối so với kích thước của query container. Các component sử dụng đơn vị độ dài tương đối so với container của chúng sẽ linh hoạt hơn khi dùng trong các container khác nhau mà không cần phải tính lại các giá trị độ dài cụ thể.

Nếu không có container đủ điều kiện nào cho query, đơn vị độ dài container query mặc định sẽ là small viewport unit cho trục đó (sv*).

Các đơn vị độ dài container query là:

• cqw: 1% chiều rộng của query container
• cqh: 1% chiều cao của query container
• cqi: 1% kích thước inline của query container
• cqb: 1% kích thước block của query container
• cqmin: Giá trị nhỏ hơn giữa cqi hoặc cqb
• cqmax: Giá trị lớn hơn giữa cqi hoặc cqb

Ví dụ sau sử dụng đơn vị cqi để đặt cỡ chữ của tiêu đề dựa trên kích thước inline của container:

@container (width > 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

Để biết thêm thông tin về các đơn vị này, hãy xem tài liệu tham khảo Container query length units.

Fallback cho container queries

Đối với các trình duyệt chưa hỗ trợ container queries, grid và flex có thể được sử dụng để tạo hiệu ứng tương tự cho card component được dùng trên trang này. Ví dụ sau sử dụng khai báo grid-template-columns để tạo bố cục hai cột cho card component.

.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

Nếu bạn muốn sử dụng bố cục một cột cho các thiết bị có viewport nhỏ hơn, bạn có thể dùng media query để thay đổi grid template:

@media (width <= 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Xem thêm

• Media queries
• CSS at-rule @container
• Thuộc tính CSS contain
• Thuộc tính viết tắt CSS container
• Thuộc tính CSS container-name
• Thuộc tính CSS content-visibility
• Using container size and style queries
• Using container scroll-state queries
• Using anchored container queries
• Say Hello to CSS Container Queries by Ahmad Shadeed
• Container Queries: a Quick Start Guide
• Collection of Container Queries articles