@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
Edge Chrome Firefox Opera Safari
1051051109116
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
105110721620105

Last updated by CSSPortal on: 30th September 2023