container-type
Defines an element as a 'container' so its children can query its size or state. 'inline-size' is the most common value, allowing responsive styles based on the container's width.
It is documented as part of the CSS Conditional Rules, CSS Container Queries specification.
Syntax
/* Usage Example */
.parent {
/* Turns this element into a container for its children to query */
container-type: inline-size;
}
/* Syntax */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;
/* Global values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;container-type Browser support
Newly available
Since
2023 93% global usage
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
105+
110+
16+
105+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more