置き換えるときの注意点

• コンテナ自身には、@containerのスタイルは当たりません。 切り替えたい要素の外側にラッパーを置き、ラッパーをコンテナにします。
• inline-sizeを指定した要素は、中身から幅が決まらなくなります。 inline-blockや、中身の幅で大きさが決まるFlexboxの子要素に指定すると、幅が0になります。 ブロック要素のように、幅が外側から決まる要素に指定します。
• container-type: sizeを指定すると、高さも中身から決まらなくなります。 高さを指定していない要素には、inline-sizeを使います。
• 名前のない@containerは、いちばん近いコンテナを見ます。 コンテナが入れ子になると意図しない幅で切り替わるため、名前を付けて対象を決めておきます。
• コンテナの幅を基準にした単位（cqiなど）も使えます。 文字の大きさや余白を、置かれた場所の幅に合わせられます。

フォールバック

対象の5ブラウザはすべて対応済みなので、通常は以前の書き方を残す必要はありません。 狭いときのスタイル（縦並び）を基本にしておけば、対応していないブラウザでは縦並びのまま表示されます。 対応していないブラウザでも横並びにする必要がある場合だけ、以前の書き方のCSSを残し、JavaScriptを対応していないブラウザでだけ動かします。

// コンテナクエリに対応していないブラウザでだけ、以前の書き方のクラスを付ける
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)
  }
}