CSS container-type Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The container-type CSS property specifies the type of containment context used in a container query. A containment context is a logical region in a document that defines how certain CSS properties apply to its contained elements. Container queries allow developers to apply styles to elements based on the size of their nearest ancestor with a containment context.

Initial value: normal
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: a color
JavaScript syntax: object.style.containerType

Syntax

container-type: size | inline-size | normal

Values

sizeEstablishes a query container for container size queries on both the inline and block axis in both the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.
inline-sizeEstablishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.
normalThe element is not a query container for any container size queries, but remains a query container for container style queries.

Example

CSS

.post {
  container-type: inline-size;
  container-name: sidebar;
}

Browser Support

The following table will show you the current browser support for the CSS container-type property.

Desktop

105	105	110	91	16

Tablets / Mobile

105	110	72	16	20	105

Last updated by CSSPortal on: 31st December 2023

Support Us