Truy vấn vùng chứa xuất hiện trong trình duyệt ổn định

Vào ngày lễ tình nhân này, chúng tôi sẽ kỷ niệm các truy vấn vùng chứa có kích thước và đơn vị truy vấn vùng chứa xuất hiện trong tất cả các trình duyệt ổn định.

Una Kravets

Tình yêu vùng chứa đang lan truyền! Vào ngày lễ tình nhân này, các truy vấn vùng chứa kích thước và đơn vị truy vấn vùng chứa đều ổn định trong tất cả các trình duyệt hiện đại.

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Cạnh: 105.
  • Firefox: 110.
  • Safari: 16.

Nguồn

Với các truy vấn vùng chứa, bạn có thể truy vấn thông tin định kiểu của một phần tử mẹ, chẳng hạn như inline-size của phần tử đó. Với truy vấn phương tiện, bạn có thể truy vấn kích thước của khung nhìn, truy vấn vùng chứa cho phép các thành phần có thể thay đổi dựa trên vị trí của chúng trong giao diện người dùng.

Truy vấn về nội dung nghe nhìn so với truy vấn về vùng chứa.

Truy vấn vùng chứa đặc biệt hữu ích đối với thiết kế thích ứng và các thành phần có thể sử dụng lại. Ví dụ: bật thành phần thẻ có thể bố trí theo một cách khi được đặt trong thanh bên và trong một cấu hình khác trong lưới sản phẩm.

Sử dụng truy vấn vùng chứa

Để sử dụng truy vấn vùng chứa, trước tiên hãy đặt vùng chứa trên một phần tử mẹ. Bạn có thể thực hiện việc này bằng cách đặt container-type trên vùng chứa mẹ hoặc sử dụng cách viết tắt container để đồng thời cung cấp loại và tên cho vùng chứa đó:

.card-container {
  container: card / inline-size;
}

Việc đặt container-type thành inline-size sẽ truy vấn kích thước theo hướng cùng dòng của thành phần mẹ. Trong ngôn ngữ Latinh như tiếng Anh, đây sẽ là chiều rộng của thẻ vì văn bản di chuyển nội tuyến từ trái sang phải.

Giờ đây, bạn có thể dùng vùng chứa đó để áp dụng kiểu cho bất kỳ phần tử con nào bằng cách sử dụng @container:

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

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Ngoài ra, bạn có thể sử dụng giá trị đơn vị độ dài truy vấn vùng chứa theo cách tương tự như với các giá trị đơn vị dựa trên khung nhìn. Sự khác biệt là các đơn vị vùng chứa tương ứng với vùng chứa chứ không phải khung nhìn. Ví dụ sau đây minh hoạ kiểu chữ thích ứng bằng cách sử dụng đơn vị truy vấn vùng chứa và hàm clamp() để cung cấp giá trị kích thước tối thiểu và tối đa:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi ở trên đề cập đến 15% kích thước cùng dòng của vùng chứa. Hàm clamp() đặt giá trị tối thiểu là 2rem và tối đa là 4rem. Trong thời gian chờ đợi, nếu 15cqi nằm giữa các giá trị này, thì văn bản sẽ co lại và tăng lên tương ứng.

Truy vấn vùng chứa Valentine

Để chào mừng ngày lễ tình nhân này, bất kể bạn đang xem nội dung này trên trình duyệt nào (phiên bản mới nhất) ổn định, để chào đón ngày lễ tình nhân này!