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 xin chúc mừng việc các truy vấn vùng chứa kích thước và đơn vị truy vấn vùng chứa đã ra mắt trên tất cả trình duyệt ổn định.

Una Kravets

Mọi người đang yêu thích truy vấn vùng chứa! 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 đã ổn định trong tất cả các trình duyệt hiện đại.

Với 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ùng chứa đặc biệt hữu ích cho thiết kế thích ứng và các thành phần có thể sử dụng lại. Ví dụ: bật một thành phần thẻ có thể bố trí theo một cách khi được đặt trong thanh bên và theo 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 viết tắt container để đồng thời cung cấp cả loại và tên cho vùng chứa mẹ:

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

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

Giờ đây, bạn có thể sử dụng vùng chứa đó để áp dụng kiểu cho bất kỳ phần tử con nào bằ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ị chiều dài truy vấn vùng chứa theo cách tương tự như cách bạn sử dụng giá trị đơn vị dựa trên khung nhìn. Điểm khác biệt là các đơn vị vùng chứa tương ứng với vùng chứa thay vì khung nhìn. Ví dụ sau đây minh hoạ kiểu chữ thích ứng bằng cách sử dụng các đơ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 nội tuyến của vùng chứa. Hàm clamp() cung cấp 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, văn bản sẽ thu nhỏ và tăng tương ứng.

Truy vấn vùng chứa Valentine

Để kỷ niệm tình yêu dành cho truy vấn vùng chứa trong mùa lễ này, chúng tôi đã tạo một hình ảnh Valentine để tất cả các bạn cùng thưởng thức, bất kể bạn đang xem nội dung này trên trình duyệt ổn định (phiên bản mới nhất) nào!