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

Ngày lễ tình nhân năm nay, chúng tôi tôn vinh các truy vấn vùng chứa kích thước và đơn vị truy vấn vùng chứa đích trong tất cả các trình duyệt ổn định.

Una Kravets

Cụm từ tìm kiếm về vùng chứa đang tràn đầy năng lượng! Vào Ngày lễ tình nhân năm nay, 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. 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 thuận tiện đố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 mộ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 các 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ú pháp viết tắt container để cung cấp đồng thời cả loại và tên:

.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 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 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ư cách bạn sử dụng các 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 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() để đưa ra 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() 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, thì văn bản sẽ thu nhỏ và tăng tương ứng.

Truy vấn vùng chứa Valentine

Để kỷ niệm cụm từ tìm kiếm về vùng chứa trong dịp lễ này, chúng tôi đã tạo ra một Ngày lễ tình nhân cho tất cả các bạn cùng thưởng thức, bất kể bạn đang dùng trình duyệt ổn định nào (phiên bản mới nhất)!

Một phần của Loạt chương trình tương tác mới