CSS containment
The CSS containment module defines containment and container queries.
Containment enables the isolation of page subtrees from the rest of the DOM. The browser can then improve performance by optimizing the rendering of these independent parts.
Container queries are similar to dimension media queries, except that the queries are based on the dimensions of a specific container element defined as a containment context, rather than on the dimensions of the viewport. Container queries enable querying a container's size, properties, and property values to conditionally apply CSS styles. When applying these conditional styles, you can use container query length units, which specify lengths relative to the dimensions of the query container. Additional properties are defined to enable establishing a specific element as a query container and giving it a specific name.
Reference
Properties
- {{cssxref("contain")}}
- {{cssxref("container")}} shorthand
- {{cssxref("container-name")}}
- {{cssxref("container-type")}}
- {{cssxref("content-visibility")}}
At-rules and descriptors
- {{cssxref("@container")}}
@container
descriptors:aspect-ratio
block-size
height
inline-size
orientation
width
Functions
Data types
Events
- {{domxref("Element.contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}}
Interfaces
- {{domxref("ContentVisibilityAutoStateChangeEvent")}}
- {{domxref("ContentVisibilityAutoStateChangeEvent.skipped", "skipped")}} property
- {{domxref("CSSContainerRule")}}
- {{domxref("CSSContainerRule.containerName")}}
- {{domxref("CSSContainerRule.containerQuery")}}
Guides
-
- : A guide to using container queries with
@container
, including naming containment contexts.
- : A guide to using container queries with
-
- : Describes the basic aims of CSS containment and how to leverage
contain
andcontent-visibility
for a better user experience.
- : Describes the basic aims of CSS containment and how to leverage
-
Using container size and style queries
- : A guide to writing container size and style queries with
@container
, including style queries for custom properties, query syntax and names, and nesting container queries.
- : A guide to writing container size and style queries with
Related concepts
-
CSS media queries module
- {{cssxref("@media")}} at-rule
- CSS logical operators (
not
,or
, andand
)
-
CSS transitions module
- {{cssxref("@starting-style")}} at-rule
- {{cssxref("transition-behavior")}} property
-
CSS box sizing module
- {{CSSxRef("aspect-ratio")}} property
- {{cssxref("contain-intrinsic-size")}} shorthand property
- {{CSSxRef("contain-intrinsic-inline-size")}} property
- {{CSSxRef("contain-intrinsic-size")}} property
- {{CSSxRef("contain-intrinsic-width")}} property
- {{CSSxRef("contain-intrinsic-height")}} property
-
CSS counter styles module
- Using CSS counters guide
-
CSS nesting module
- CSS nesting at-rules guide
Specifications
See also
- Using feature queries
- Using CSS media queries
- Understanding aspect ratios
- {{cssxref("@supports")}} at-rule