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 containcontent-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

Thông số kỹ thuật

Specification
CSS Containment Module Level 2
CSS Containment Module Level 3

Xem thêm