Kể từ khi thiết kế web đáp ứng (responsive web design) ra đời, các nhà phát triển đã yêu cầu khả năng tạo kiểu cho các phần tử DOM dựa trên kích thước thực tế của chúng thay vì kích thước khung nhìn của trình duyệt (sử dụng media queries ). Trên thực tế, container queries (ban đầu là element queries) có lẽ là tính năng CSS được yêu cầu nhiều nhất mà các trình duyệt vẫn còn thiếu .
Đã có rất nhiều , rất nhiều bài đăng giải thích chính xác lý do tại sao các truy vấn vùng chứa khó thực hiện trong CSS và tại sao các nhà sản xuất trình duyệt lại do dự trong việc triển khai chúng. Nếu bạn muốn tận hưởng nó ngay bây giờ, một chút JavaScript có thể giúp:
c51c33e1533e68c3f8fd24633700789f
Toàn bộ sau đó trông như thế này:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Các điểm ngắt , bộ chọn và thuộc tính kiểu có thể được sử dụng để xác định các điểm ngắt khác nhau, bộ chọn tự động và loại lớp được thêm vào. Nếu bạn đang sử dụng tập lệnh, bạn có thể giải quyết các lớp mới được tạo như sau:
c51c33e1533e68c3f8fd24633700789f
Việc sử dụng truy vấn vùng chứa đặc biệt có giá trị đối với các thành phần trong lớp phủ, cửa sổ bật lên, thanh bên hoặc thành phần tùy chỉnh - ngay cả bây giờ, chẳng hạn, với tập lệnh ở trên.