Kiểm tra và gỡ lỗi các truy vấn vùng chứa CSS

Hướng dẫn này trình bày cách kiểm tra và gỡ lỗi các truy vấn vùng chứa CSS trong bảng điều khiển Thành phần trong Công cụ của Chrome cho nhà phát triển.

Truy vấn vùng chứa CSS cho phép bạn chỉnh sửa kiểu của thành phần dựa trên thuộc tính vùng chứa mẹ. Khả năng này giúp chuyển đổi khái niệm thiết kế web thích ứng từ dựa trên trang sang dựa trên vùng chứa.

Ảnh chụp màn hình trong hướng dẫn này được lấy từ trang minh hoạ này.

Khám phá các vùng chứa và các thành phần con cháu của chúng

Mỗi phần tử được xác định là vùng chứa truy vấn đều có một huy hiệu container bên cạnh trong bảng điều khiển Phần tử. Huy hiệu này chuyển đổi lớp phủ đường chấm của vùng chứa và các thành phần con cháu của nó.

Cách bật/tắt lớp phủ:

1. Mở Công cụ cho nhà phát triển.
2. Trong bảng điều khiển Phần tử, hãy nhấp vào huy hiệu container bên cạnh phần tử được xác định là vùng chứa.

Trong ví dụ này, thuộc tính container-type: inline-size xác định phần tử vùng chứa. Các thành phần con có thể truy vấn kích thước cùng dòng (Trục hoành) và thay đổi kiểu của chúng dựa trên chiều rộng của vùng chứa.

Kiểm tra các truy vấn vùng chứa

Bảng điều khiển Phần tử hiển thị các nội dung khai báo truy vấn @container khi áp dụng các nội dung này cho phần tử con, tức là khi vùng chứa đáp ứng điều kiện của truy vấn.

Để biết thời điểm bạn có thể kiểm tra nội dung khai báo @container trên trang minh hoạ này, hãy kiểm tra mã mẫu sau:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

Trong ví dụ này, nếu chiều rộng của vùng chứa vượt quá số pixel sau, thì kiểu tương ứng sẽ được áp dụng:

• Hơn 400px: phần tử đoạn (p) xuất hiện trên trang dưới dạng một khối – bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng.
• Hơn 600px: các thành phần con áp dụng bố cục lưới ngang với tiêu đề (h1) ở trên cùng và hình ảnh (img) ở bên trái.

Để kiểm tra nội dung khai báo @container đầu tiên:

1. Trong bảng điều khiển Elements (Phần tử), hãy đặt chiều rộng của vùng chứa thành 500px. Phần tử p sẽ xuất hiện.

2. Chọn phần tử p. Trong ngăn Styles (Kiểu), bạn có thể thấy phần khai báo @container cùng với một đường liên kết đến vùng chứa mẹ article.card.

   

3. Thiết lập chiều rộng lớn hơn 600px, sau đó chọn bất kỳ phần tử nào bị ảnh hưởng. Quan sát phần khai báo @container triển khai bố cục ngang.

   

Tìm các phần tử vùng chứa

Để tìm và chọn một phần tử vùng chứa đã khiến truy vấn có hiệu lực, hãy di chuột qua rồi nhấp vào tên phần tử ở phía trên phần khai báo @container.

Khi di chuột qua, tên này chuyển thành một đường liên kết đến phần tử trong bảng điều khiển Phần tử và ngăn Kiểu sẽ hiển thị thuộc tính được truy vấn và giá trị hiện tại của thuộc tính đó.

Sửa đổi truy vấn vùng chứa

Để gỡ lỗi một truy vấn, bạn có thể sửa đổi truy vấn này như bất kỳ nội dung khai báo CSS nào khác trong ngăn Kiểu như mô tả trong phần Xem và thay đổi CSS.

Trong ví dụ này, chiều rộng của vùng chứa là 500px. Phần tử đoạn (p) xuất hiện trên trang.

1. Chọn phần tử p. Trong ngăn Styles (Kiểu). Bạn có thể xem nội dung khai báo về @container (inline-size > 400px).
2. Thay đổi inline-size từ 400px thành 520px.
3. Phần tử đoạn (p) biến mất khỏi trang vì không đáp ứng tiêu chí truy vấn.