Sử dụng các truy vấn vùng chứa ngay hôm nay

Kể từ khi có thiết kế web đáp ứng, các nhà phát triển đã hỏi về khả năng thiết kế các phần tử DOM dựa trên kích thước thực của chúng chứ không phải kích thước của khung nhìn trong trình duyệt (với sự trợ giúp của các truy vấn phương tiện ). Trên thực tế, các truy vấn vùng chứa ( truy vấn phần tử ban đầu) có lẽ là hàm CSS được yêu cầu nhiều nhất mà các trình duyệt vẫn chưa có .


Đã 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 các truy vấn vùng chứa đặc biệt đáng giá đối với các phần tử trong lớp phủ, cửa sổ bật lên, thanh bên hoặc các phần tử tùy chỉnh - ngay cả bây giờ, chẳng hạn như với tập lệnh ở trên.

Trở lại