CSS containment
Module CSS containment định nghĩa containment và container queries.
Containment cho phép cô lập các subtree của trang khỏi phần còn lại của DOM. Trình duyệt sau đó có thể cải thiện hiệu suất bằng cách tối ưu hóa việc render các phần độc lập này.
Container queries tương tự như dimension media queries, ngoại trừ các truy vấn dựa trên kích thước của một container element cụ thể được định nghĩa là containment context, thay vì trên kích thước của viewport. Container queries cho phép truy vấn kích thước, thuộc tính, và giá trị thuộc tính của container để áp dụng có điều kiện các CSS style. Khi áp dụng các style có điều kiện này, bạn có thể sử dụng các đơn vị độ dài container query, chỉ định độ dài tương đối với kích thước của query container. Các thuộc tính bổ sung được định nghĩa để cho phép thiết lập một phần tử cụ thể làm query container và đặt tên cụ thể cho nó.
Tham chiếu
>Thuộc tính
Sự kiện
Interfaces
Hướng dẫn
- CSS container queries
-
Hướng dẫn sử dụng container queries với
@container, bao gồm đặt tên cho containment contexts. - Using CSS containment
-
Mô tả các mục tiêu cơ bản của CSS containment và cách tận dụng
containvàcontent-visibilityđể có trải nghiệm người dùng tốt hơn. - Using container size and style queries
-
Hướng dẫn viết container size và style queries với
@container, bao gồm style queries cho custom properties, cú pháp và tên truy vấn, và lồng ghép container queries.
Khái niệm liên quan
-
Module CSS conditional rules
- At-rule
@container - Thuộc tính
container - Thuộc tính
container-name - Thuộc tính
container-type
- At-rule
-
Module CSS media queries
- At-rule
@media - CSS logical operators (
not,or, vàand)
- At-rule
-
Module CSS transitions
- At-rule
@starting-style - Thuộc tính
transition-behavior
- At-rule
-
Module CSS box sizing
- Thuộc tính
aspect-ratio - Thuộc tính shorthand
contain-intrinsic-size - Thuộc tính
contain-intrinsic-inline-size - Thuộc tính
contain-intrinsic-block-size - Thuộc tính
contain-intrinsic-width - Thuộc tính
contain-intrinsic-height
- Thuộc tính
-
Module CSS counter styles
- Hướng dẫn Using CSS counters
-
Module CSS nesting
- Hướng dẫn CSS nesting at-rules
Thông số kỹ thuật
| Specification |
|---|
| CSS Containment Module Level 2> |
| CSS Containment Module Level 3> |