@container

Baseline 2023

Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

@container は CSS のアットルールで、格納コンテキストにスタイルを適用する条件付きグループルールです。スタイル宣言は条件によってフィルタリングされ、条件が真の場合にコンテナーに適用されます。この条件は、コンテナーのサイズが変わったときに評価されます。

オプションで大文字小文字を区別する container-name を指定することができ、これによって考慮するクエリーコンテナーの集合を、クエリーコンテナー名が一致するものだけにフィルタリングすることができます。要素に対して適格なクエリーコンテナが選択されると、<container-condition> の各コンテナー機能はそのクエリーコンテナーに対して評価されます。

構文

@container アットルールは以下の構文です。

@container <container-condition> {
  <stylesheet>
}

例えば次のようなります。

css

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

値

<container-condition>: コンテナーのサイズが変更されたときに、コンテナーに対して評価される特性の集合です。 <stylesheet> で定義したスタイルは、この条件が真であれば適用されます。
<stylesheet>: 一連の CSS 宣言です。

コンテナークエリー内の論理キーワード

論理キーワードを使用してコンテナー条件を定義することができます。

and は 2 つ以上の条件を結合します。
or は 2 つ以上の条件を結合します。
not は条件を否定します。コンテナークエリーあたり 1 つの 'not' 条件だけが許されており、 and または or キーワードと同時に使用することはできません。

css

@container (width > 400px) and (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
  /* <stylesheet> */
}

@container not (width < 400px) {
  /* <stylesheet> */
}

名前付き格納コンテキスト

格納コンテキストには、 container-name プロパティを使用して名前を付けることができます。

css

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

このために使用する一括指定構文は container であり、 container: <name> / <type> という形式です。例えばこのようにします。

css

.post {
  container: sidebar / inline-size;
}

コンテナクエリーでは、 container-name プロパティを使用して、クエリーコンテナー名と一致するコンテナー集合にフィルタリングします。

css

@container sidebar (width > 400px) {
  /* <stylesheet> */
}

使用法や名前の制約の詳細は container-name ページで説明しています。

記述子

以下の記述子は、コンテナー条件内で使用することができます。

aspect-ratio: コンテナーの aspect-ratio は、 <ratio> 値として発生したコンテナーの高さに対する幅として計算されます。
block-size: コンテナーの block-size を <length> 値で表したものです。
height: コンテナーの高さを <length> 値で表現したものです。
inline-size: コンテナーの inline-size を <length> 値で表したものです。
orientation: コンテナーの方向で、landscape または portrait のいずれかです。
width: コンテナーの幅を <length> 値で表したものです。

例

コンテナーの大きさに基づいたスタイルの設定

タイトルとテキストを持つカード部品の次の例を考えてみましょう。

html

<div class="post">
  <div class="card">
    <h2>カードのタイトル</h2>
    <p>カードのコンテンツ</p>
  </div>
</div>

コンテナーコンテキストは container-type プロパティを使用して作成することができます。この用途では .post クラスの inline-size 値を使用します。そして、 @container アットルールを使用することで、 .card クラスの要素に、 650px より狭いコンテナー内でスタイルを適用することができます。

const post = document.querySelector(".post");
const span = document.createElement("span");
span.innerHTML = ".post width: " + post.clientWidth + "px";
post.parentNode.insertBefore(span, post.nextSibling);
// リサイズ時に更新
window.addEventListener("resize", () => {
  span.innerHTML = ".post width: " + post.clientWidth + "px";
});

span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}

css

/* インラインサイズに基づくコンテナーコンテキスト */
.post {
  container-type: inline-size;
}

/* コンテナーが 650px よりも狭かった場合にスタイルを適用 */
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: gray;
    font-size: 1em;
  }
}

名前付きコンテナーコンテキストの作成

タイトルとテキストを持つカード部品である次の HTML 例があったとします。

html

<div class="post">
  <div class="card">
    <h2>カードのタイトル</h2>
    <p>カードのコンテンツ</p>
  </div>
</div>

まず、 container-type および container-name プロパティを用いてコンテナーコンテキストを作成します。この宣言の一括指定構文は container ページで説明しています。

css

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

次に、コンテナークエリーに名前を追加して、そのコンテナーを対象とします。

css

@container summary (min-width: 400px) {
  .card {
    font-size: 1.5em;
  }
}

入れ子のコンテナークエリー

単一のコンテナクエリーで複数のコンテナーを対象とすることはできません。同じ効果を持つコンテナークエリーを入れ子にすることは可能です。

以下は、 summary という名前のコンテナーが 400px よりも幅が広く、かつ祖先に 800px よりも幅の広いコンテナーがある場合に、宣言されたスタイルを適用するクエリーです。

css

@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /* <stylesheet> */
  }
}

スタイルのコンテナークエリー

コンテナクエリーでは、コンテナー要素の計算されたスタイルを評価することもできます。以下のコンテナークエリーは、コンテナー要素の --accent-color の 計算値 が blue かどうかを調べます。

css

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

メモ: カスタムプロパティが blue という値を持つ場合、そのプロパティが @property で色として定義されていない限り、同等の 16 進コード #0000ff は一致しません。

仕様書

Specification
CSS Containment Module Level 3 # container-rule

ブラウザーの互換性

BCD tables only load in the browser