Mẹo cho Công cụ cho nhà phát triển: Cách kiểm tra truy vấn vùng chứa CSS

Sofia Emelianova
Sofia Emelianova

Truy vấn vùng chứa CSS là tính năng CSS mới mà các nhà phát triển web quan tâm. Chiến dịch này có thể tạo ra một cuộc cách mạng trong thiết kế web – từ thiết kế thích ứng dựa trên trang đến thiết kế thích ứng dựa trên vùng chứa.

Công cụ của Chrome cho nhà phát triển giúp bạn áp dụng các mẫu thiết kế bố cục mới và luôn nắm bắt các xu hướng mới nhất. Với sự hỗ trợ của tính năng CSS này, giờ đây bạn có thể kiểm tra và gỡ lỗi các truy vấn vùng chứa của mình trong Công cụ cho nhà phát triển.

Video ở trên cung cấp cho bạn thông tin tổng quan về các truy vấn vùng chứa, cú pháp của các truy vấn này cũng như cách kiểm tra các truy vấn đó trong Công cụ cho nhà phát triển.

Giờ đây, bạn có thể khám phá các phần tử vùng chứa và các thành phần con của các phần tử đó kèm theo huy hiệu tương ứng là nút bật/tắt lớp phủ đường chấm.

Huy hiệu vùng chứa.

Kiểm tra các quy tắc @container được áp dụng cho thành phần con khi các vùng chứa đáp ứng điều kiện truy vấn.

Quy tắc @container.

Để tìm hiểu thêm về khả năng hỗ trợ truy vấn vùng chứa trong Công cụ cho nhà phát triển, hãy xem Kiểm tra và gỡ lỗi truy vấn vùng chứa CSS.