@container CSS At-Rule
Description
The CSS @container
at-rule is a conditional group rule that applies styles to a containment context. Style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the container changes size.
To use the @container
at-rule, you first need to define a containment context for the element you want to style. This can be done using the container-type property. Once you have defined a containment context, you can use the @container at-rule to apply styles to the element based on the size of the containment context.
The @container
at-rule is a powerful tool that allows you to create responsive layouts that adapt to different screen sizes. It is still under development, but it is already supported by all major browsers.
Here are some examples of how the @container
at-rule can be used:
- To create a layout that collapses sidebar navigation on smaller screens.
- To display different content depending on the width of the browser window.
- To create a grid layout that adapts to the size of its container.
- To prevent text from overflowing its container.
Syntax
@container <container-condition> { <stylesheet> }
Values
- <container-condition>A set of features that are evaluated against the query container when the size of the container changes. Styles defined in the <stylesheet> are applied if the condition is true.
- <stylesheet>A set of CSS declarations.
Example
@container (width > 400px) and (height > 400px) {
/* <stylesheet> */
}
@container (width > 400px) or (height > 400px) {
/* <stylesheet> */
}
@container not (width < 400px) {
/* <stylesheet> */
}
Browser Support
The following table will show you the current browser support for the at-rule @container
.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
105 | 105 | 110 | 91 | 16 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
105 | 110 | 72 | 16 | 20 | 105 |
Last updated by CSSPortal on: 30th September 2023