Phòng thí nghiệm Truy vấn Vùng chứa của iShadeed

Ahmad Shadeed đã sớm có bước nhảy vọt trong lĩnh vực truy vấn vùng chứa và có bộ sưu tập các ví dụ ngày càng tăng dựa trên các mẫu hàng ngày.

Và, nếu bạn bỏ lỡ nó, anh ấy bài đăng mới nhất về truy vấn vùng chứa thực hiện một công việc tuyệt vời bao gồm cách chúng hoạt động kể từ khi cập nhật Chrome 105 trong tháng này (chúng tôi sẽ sớm thấy chúng trong Safari 16). Một số lựa chọn nổi bật và rút ra:

• Các container được xác định bằng container-type tài sản. Các bản demo và đề xuất trước đây đã được sử dụng contain thay thế.
• Truy vấn vùng chứa rất giống với truy vấn phương tiện mà chúng tôi đã viết để nhắm mục tiêu kích thước khung nhìn. Vì vậy, thay vì một cái gì đó như @media (min-width: 600px) {}, chúng ta có @container (min-width: 600px) {}. Điều đó sẽ làm cho việc chuyển đổi nhiều truy vấn phương tiện đó thành truy vấn vùng chứa khá đơn giản, loại bỏ công việc tìm ra các giá trị điểm dừng mới.
• Chúng ta có thể đặt tên cho các vùng chứa để giúp phân biệt chúng trong mã của mình (ví dụ: container-name: blockquote).

Làm tốt lắm, Ahmad! Và cảm ơn vì đã chia sẻ!

Liên kết trực tiếp & rarr;