CSS container-name Property
Description
The container-name
CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query is a CSS rule that allows you to apply styles to an element based on the size of its nearest ancestor with a containment context. By giving a containment context a name, you can specifically target it using the @container at-rule instead of having to target the nearest ancestor with containment. This can be useful for creating more complex and reusable container queries. The container-name
property can be used on any element, but it is most commonly used on query containers. A query container is an element that is used to define the scope of a container query. Query containers can be any element, but they are typically block-level elements such as div, section, or article.
- Initial value
- none
- Applies to
- all elements
- Inherited
- no
- Computed value
- none or an ordered list of identifiers
- Animatable
- no
- JavaScript syntax
- object.style.containerName
Syntax
container-name: <container-name>
Values
- <container-name>A case-sensitive string that is used to identify the container.
Example
.post {
container-type: inline-size;
container-name: sidebar;
}
Browser Support
The following table will show you the current browser support for the CSS container-name
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
105 | 105 | 110 | 91 | 16 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
105 | 110 | 72 | 16 | 20 | 105 |
Last updated by CSSPortal on: 31st December 2023