@container

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

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

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

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}
/* オプションの <container-name> 付き */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

<container-condition>

オプションの <container-name> および <container-query>。条件が真の場合、この <stylesheet> で定義されたスタイルが適用されます。

<container-name>

オプション。クエリーが真と評価された際にスタイルが適用されるコンテナーの名前を、<ident> として指定します。

<container-query>

コンテナーのサイズが変更された際に、クエリーコンテナーに対して評価される一連の特性を指定します。

<stylesheet>

一連の CSS 宣言です。

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

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

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

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

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

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

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

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

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

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

@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> 値で表したものです。

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

<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.textContent = ".post width: " + post.clientWidth + "px";
post.parentNode.insertBefore(span, post.nextSibling);
// リサイズ時に更新
window.addEventListener("resize", () => {
  span.textContent = ".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;
}

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

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

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

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

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

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

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

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

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

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

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

コンテナークエリーは、対象のコンテナー要素のスタイルを計算して評価することもできます。コンテナースタイルクエリーは、1 つ以上の style() 関数記法を使用する @container クエリーです。 論理値の構文と、スタイル機能をスタイルクエリーに結合するロジックは、CSS 機能クエリー と同じです。

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

それぞれの style() の引数は、単一の <style-feature> です。 <style-feature> は、有効な CSS 宣言、CSS プロパティ、<custom-property-name> のいずれかです。

@container style(--themeBackground),
    not style(background-color: red),
    style(color: green) and style(background-color: transparent),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

値のないスタイル特性は、指定されたプロパティの初期値と計算された値が異なる場合、真と評価されます。

style() 関数の引数として渡した <style-feature> が宣言である場合、スタイルクエリーは、宣言の値がクエリー対象のコンテナのそのプロパティの計算値と同じであれば真と評価されます。 そうでない場合は、偽と評価されます。

以下のコンテナークエリーは、コンテナー要素の --accent-color の計算値が blue かどうかを調べます。

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

個別指定プロパティを照会するスタイルの特性クエリは、計算された値が各プロパティで一致する場合は真となり、一致しない場合は偽となります。例えば、@container style(border: 2px solid red) は、その短縮形を構成する 12 個の個別指定プロパティ（border-bottom-style など）がすべて真であれば真になります。

グローバルな revert と revert-layer は <style-feature> の値としては不正なため、コンテナースタイルクエリーは偽になります。

• コンテナークエリーの使用
• コンテナーのサイズおよびスタイルクエリーの使用
• container-name
• container-type
• contain
• content-visibility
• CSS 拘束モジュール