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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Hướng dẫn này chỉ cho bạn 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 Elements 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 thao tác với các kiểu của phần tử dựa trên thuộc tính vùng chứa gốc của nó. Chức năng này chuyển 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á vùng chứa và các thành phần con của vùng chứa đó

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

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 Elements, 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.

Huy hiệu 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 ngang) và thay đổi kiểu dựa trên chiều rộng của vùng chứa.

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

Bảng điều khiển Elements hiển thị @container khai báo truy vấn khi các khai báo đó được áp dụng 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 đây, thì sẽ áp dụng kiểu tương ứ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 sử 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.

Cách kiểm tra phần khai báo @container đầu tiên:

  1. Trong bảng điều khiển Elements, 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 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.

    Khai báo @container.

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

    Khai báo thêm cho @container.

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

Để tìm và chọn một phần tử vùng chứa đã giúp 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.

Di chuột qua tên phần tử.

Khi bạn di chuột qua, tên sẽ chuyển thành một đường liên kết đến phần tử trong bảng điều khiển Elements và ngăn Elements 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 đó như mọi nội dung khai báo CSS 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.