CSSContainerRule

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.

CSSContainerRule インターフェイスは、単一の CSS の @container ルールを表します。

この型のオブジェクトを使用して、 @container のクエリー条件と、コンテナー名が定義されている場合はコンテナー名を取得することができます。 なお、コンテナー名とクエリーを合わせて「条件テキスト」を定義し、 CSSConditionRule.conditionText を使用して取得することができます。

CSSRule CSSGroupingRule CSSConditionRule CSSContainerRule

インスタンスプロパティ

祖先である CSSConditionRule, CSSGroupingRule, CSSRule から継承したプロパティがあります。

CSSContainerRule.containerName 読取専用

@container の名前を表す文字列、または空文字列を返します。

CSSContainerRule.containerQuery 読取専用

関連する @container のスタイルが適用されるかどうかを決定するために評価される機能または「コンテナー条件」の設定を表す文字列を返します。

インスタンスメソッド

固有のメソッドはありません。祖先である CSSConditionRule, CSSGroupingRule, CSSRule から継承したメソッドがあります。

例

無名のコンテナールール

下記の例では、無名の @container ルールを定義し、関連する CSSContainerRule のプロパティを表示します。 CSS は @container の例コンテナーの大きさに基づいたスタイルの設定と同じです。

コードの最初の部分では、コンテナールールのプロパティをログ出力するためのリストと、プロパティの追加を簡単にするための JavaScript の log() メソッドを作成しています。

html
<div id="log">
  <h2>ログ</h2>
  <ul></ul>
  <hr />
</div>
js
// ログリストへの参照を格納
const logList = document.querySelector("#log ul");
// 基盤ソースからデータをログ出力する関数
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

最初の HTML は post に含まれる card (<div>) の HTML を定義します。

html
<div class="post">
  <div class="card">
    <h2>カードタイトル</h2>
    <p>カードの内容</p>
  </div>
</div>

この例の CSS を以下に示します。 対応する @container の例で記述されているように、コンテナー要素の CSS はコンテナーの型を指定します。 そして、 @container は、幅が 650px 未満の場合、新しい幅、フォントサイズ、背景色をカードに適用します。

html
<style id="examplestyles">
  /* インラインサイズに基づくコンテナーコンテキスト */
  .post {
    container-type: inline-size;
  }

  /* コンテナーの幅が 650px より狭い場合にスタイルを設定 */
  @container (width < 650px) {
    .card {
      width: 50%;
      background-color: gray;
      font-size: 1em;
    }
  }
</style>

下記のコードでは、例に関連付けられている HTMLStyleElement を id を使用して取得し、その sheet プロパティを使用して StyleSheet を取得しています。 StyleSheet から、シートに追加した cssRules の設定を取得します。 上記の 2 つ目のルールとして @container を追加したので、関連する CSSContainerRule には cssRules の 2 つ目の項目、インデックス "1" を使用してアクセスすることができます。 最後に、containerName、containerQuery、conditionText（継承）プロパティをログ出力します。

js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // コンテナールールを表す CSSContainerRule
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);

メモ: この例のスタイルは、コードが正しいシートを探しやすいように、 id を持つインライン HTML の style 要素で定義しています。 また、長さをインデックスにして（例えば document.styleSheets[document.styleSheets.length-1]）文書から各例の正しいシートを探すこともできますが、そうすると各例の正しいシートを動作するのが複雑になります。

出力例は下記の通りです。 ログのセクションには containerName という文字列が掲載されていますが、これは名前を定義していないので空文字列です。 containerQuery と conditionText の文字列もログ出力していますが、名前を定義していないので同じ値があります。 ページの幅が 650px に遷移すると、カードは背景を変更する必要があります。

名前付きコンテナーのルール

下記の例では、名前付き @container ルールを定義し、関連する CSSContainerRule のプロパティを表示しています。 CSS は @container の例、名前付きコンテナーコンテキストの作成にあるものととてもよく似ています。

最初に post の中の card (<div>) の HTML を定義します（この例ではログ出力コードを表示していません。）

html
<div class="post">
  <div class="card">
    <h2>カードタイトル</h2>
    <p>カードの内容</p>
  </div>
</div>

@container で記述されているように、コンテナー要素の CSS はコンテナーの型を指定し、コンテナーの名前を指定することもできます。 カードには既定のフォントサイズをがあり、最小幅が 700px を超える場合、 sidebar という名前の @container で上書きされます。

html
<style id="examplestyles">
  .post {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* カードタイトルの既定の見出しスタイル */
  .card h2 {
    font-size: 1em;
  }

  @container sidebar (min-width: 700px) {
    .card {
      font-size: 2em;
    }
  }
</style>

シートとルールを取得するコードは前回の例とほとんど同じです。 唯一の違いは、この例では 3 つの CSS ルールがあるので、関連する CSSContainerRule を取得するために cssRules の 3 つ目の項目を取得することです。

js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // コンテナールールを表す CSSContainerRule
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);

出力例は下記の通りです。 ログ出力する部分には containerName と containerQuery の文字列が掲載されています。 conditionText もログ出力され、これら 2 つの文字列の結合子を示します。 ページの幅が 700px を超えると、カード部分のタイトルは 2 倍の大きさになるはずです。

仕様書

Specification
CSS Conditional Rules Module Level 5
# the-csscontainerrule-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報