container-type
The container-type property specifies the type of container for container queries.
Formal Syntax
normal | [ [ size | inline-size ] || scroll-state ]
JavaScript Access
// Access via element.style
element.style.containerType = 'normal';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| container-type | 105 | 110 | 16 | 105 |
| anchored | 143 | — | — | 143 |
| inline-size | 105 | 110 | 16 | 105 |
| normal | 105 | 110 | 16 | 105 |
| scroll-state | 133 | — | — | 133 |
| size | 105 | 110 | 16 | 105 |
| weak_containment | 129 | 133 | 18.4 | 129 |
Related Properties
- align-content
- align-items
- align-self
- anchor-name
- anchor-scope
- break-after
- break-before
- break-inside
- caption-side
- clear
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- contain
- container
- container-name
- content
- content-visibility
- display
- empty-cells
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- gap
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- justify-content
- justify-items
- justify-self
- order
- overflow
- overflow-anchor
- overflow-block
- overflow-inline
- overflow-wrap
- overflow-x
- overflow-y
- place-content
- place-items
- place-self
- position-anchor
- position-area
- position-try
- position-try-fallbacks
- position-try-order
- position-visibility
- resize
- row-gap
- table-layout
- text-overflow
- visibility
- z-index
- reading-flow 🧪
- reading-order 🧪
- align-tracks 🚧
- block-ellipsis 🚧
- block-step 🚧
- block-step-align 🚧
- block-step-insert 🚧
- block-step-round 🚧
- block-step-size 🚧
- bookmark-label 🚧
- bookmark-level 🚧
- bookmark-state 🚧
- column-height 🚧
- column-rule-break 🚧
- column-rule-outset 🚧
- column-wrap 🚧
- continue 🚧
- float-defer 🚧
- float-offset 🚧
- float-reference 🚧
- flow-from 🚧
- flow-into 🚧
- grid-column-gap 🚧
- grid-gap 🚧
- grid-row-gap 🚧
- inline-sizing 🚧
- item-cross 🚧
- item-direction 🚧
- item-flow 🚧
- item-pack 🚧
- item-tolerance 🚧
- item-track 🚧
- item-wrap 🚧
- justify-tracks 🚧
- region-fragment 🚧
- row-rule 🚧
- row-rule-break 🚧
- row-rule-color 🚧
- row-rule-outset 🚧
- row-rule-style 🚧
- row-rule-width 🚧
- rule 🚧
- rule-break 🚧
- rule-color 🚧
- rule-outset 🚧
- rule-overlap 🚧
- rule-style 🚧
- rule-width 🚧
- wrap-after 🚧
- wrap-before 🚧
- wrap-flow 🚧
- wrap-inside 🚧
- wrap-through 🚧
- page-break-after 🗑️
- page-break-before 🗑️
- page-break-inside 🗑️