Things to watch when replacing

• @container styles never apply to the container itself. Put a wrapper around the element you want to switch, and make the wrapper the container.
• An element with inline-size no longer takes its width from its content. On an inline-block or a flex item sized by its content, the width becomes 0. Use it on elements whose width comes from outside, such as block elements.
• container-type: size also stops the height from coming from the content. On elements without an explicit height, use inline-size.
• An unnamed @container queries the nearest container. When containers are nested, it can switch on the wrong width, so name the container you mean.
• Units based on the container’s width (such as cqi) are also available. They let font sizes and spacing follow the width of where the component is placed.

Fallback

All five target browsers support it, so you normally don’t need to keep the old technique. If the narrow layout (stacked) is the base style, browsers without support simply keep it stacked. Only if those browsers also need the side-by-side layout, keep the legacy CSS and run the JavaScript only in browsers that don’t support container queries.

// Add the legacy class only in browsers that don't support container queries
if (!CSS.supports('container-type', 'inline-size')) {
  const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
      const card = entry.target.querySelector('.card')
      card.classList.toggle('is-wide', entry.contentRect.width >= 400)
    }
  })
  for (const wrapper of document.querySelectorAll('.card-wrapper')) {
    observer.observe(wrapper)
  }
}