Truy vấn vùng chứa

Với truy vấn nội dung nghe nhìn, bạn có thể điều chỉnh bố cục dựa trên kích thước của khung nhìn hoặc loại thiết bị đang được sử dụng. Truy vấn vùng chứa cho phép bạn điều chỉnh các phần tử một cách cụ thể hơn dựa trên kích thước và trạng thái của các phần tử mẹ hoặc vùng chứa.

Hãy tưởng tượng bạn có một biểu mẫu đăng ký nhận bản tin được dùng trong nhiều bối cảnh trên trang web của mình. Bạn có thể muốn nó trải dài toàn bộ chiều rộng của trang trên trang đăng ký, nhưng chuyển sang cột chia đôi trên trang có nội dung khác.

Như trong bản minh hoạ này, với các truy vấn vùng chứa, bạn có thể điều chỉnh các thuộc tính như font-size, padding và bố cục của phần tử dựa trên các thuộc tính của vùng chứa gần nhất, độc lập với kích thước khung hiển thị.

Thiết lập truy vấn vùng chứa

Không giống như truy vấn về nội dung nghe nhìn, truy vấn vùng chứa được thiết lập thành 2 phần:

1. Xác định một vùng chứa.
2. Viết kiểu cho một phần tử con sẽ được áp dụng khi vùng chứa mẹ khớp với các điều kiện của truy vấn.

Xác định vùng chứa

Bạn có thể xác định một vùng chứa bằng cách sử dụng thuộc tính container-type.

.my-container-element {
  container-type: inline-size;
}

container-type của inline-size cho phép bạn truy vấn trục nội tuyến của vùng chứa.

Để truy vấn theo cả trục inline và block, hãy sử dụng container-type: size.

main,
.my-component {
  container-type: size;
}

Cả hai giá trị của container-type đều áp dụng các loại ngăn chặn kích thước khác nhau. Hoạt động Inline-size ngăn chặn các phần tử con ảnh hưởng đến kích thước nội tuyến của phần tử đó.

Một phần tử có tính năng size ngăn chặn các phần tử con ảnh hưởng đến kích thước của phần tử đó ở cả trục khối và trục nội tuyến.

Trong ví dụ này, bạn có thể thấy tính năng hạn chế kích thước có thể ảnh hưởng đến phần tử mà bạn áp dụng.

Vì vùng chứa sẽ không được định cỡ dựa trên kích thước của các phần tử con (phần tử <p>), nên vùng chứa sẽ thu gọn trừ phi bạn chỉ định kích thước rõ ràng bằng cách đặt kích thước (tức là inline-size, block-size, aspect-ratio) hoặc đặt vùng chứa vào một bố cục có kích thước rõ ràng.

Điều kiện truy vấn vùng chứa

Sau khi thiết lập một vùng chứa, bạn có thể thêm một điều kiện (được đặt trong dấu ngoặc đơn) phải đúng để các kiểu trong truy vấn vùng chứa được áp dụng. Đối với các truy vấn kích thước vùng chứa (dựa trên phương diện của các phần tử tổ tiên), điều kiện bao gồm những nội dung sau:

• một thuộc tính kích thước: width, height, inline-size, block-size, aspect-ratio hoặc orientation,
• một toán tử so sánh (tức là >, <, =, >=),
• và giá trị chiều dài.

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

Bạn cũng có thể viết các điều kiện về tính năng kích thước bằng dấu hai chấm và một giá trị duy nhất để kiểm thử.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

Bạn cũng có thể kết hợp nhiều điều kiện bằng cách sử dụng các từ khoá như and và or, hoặc xâu chuỗi nhiều điều kiện với các toán tử.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

Đặt tên cho vùng chứa

Để nhắm đến các vùng chứa cụ thể, ngay cả khi chúng không phải là vùng chứa tổ tiên gần nhất, bạn có thể đặt tên cho các vùng chứa bằng thuộc tính container-name. Sau đó, bạn có thể tham chiếu tên vùng chứa mà bạn muốn truy vấn trước khi xác định các điều kiện.

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

Vùng chứa được đặt tên vẫn phải là một phần tử gốc của các phần tử đang được tạo kiểu.

Sử dụng cú pháp rút gọn với thuộc tính container

Thuộc tính container cho phép bạn sử dụng cú pháp viết tắt để vừa xác định vùng chứa vừa chỉ định loại vùng chứa.

.sidebar {
  container: main-sidebar / inline-size;
}

Tên của vùng chứa nằm trước dấu gạch chéo và loại vùng chứa nằm sau dấu gạch chéo.

Đơn vị truy vấn vùng chứa

Trong các vùng chứa, bạn cũng có quyền truy cập vào đơn vị chiều dài tương đối của vùng chứa. Điều này giúp các thành phần có thể tồn tại trong nhiều vùng chứa linh hoạt hơn, vì độ dài tương đối sẽ điều chỉnh tuỳ theo kích thước của vùng chứa.

Ở đây, đơn vị chiều dài vùng chứa cqi (1% kích thước nội tuyến của vùng chứa truy vấn) đang được dùng cho khoảng đệm của nút.

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Cả hai nút đều có cùng đơn vị tương đối được áp dụng, nhưng vì các đơn vị này tương ứng với kích thước của vùng chứa, nên nút thứ hai có khoảng đệm lớn hơn do vùng chứa lớn hơn.

Lồng truy vấn vùng chứa

Bạn có thể lồng các truy vấn vùng chứa bên trong bộ chọn.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

Hoặc lồng các truy vấn này vào bên trong các truy vấn vùng chứa hoặc quy tắc @ khác.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

Kiểm tra mức độ hiểu biết của bạn