CSSContainerRule: containerName プロパティ

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.

containerName は CSSContainerRule インターフェイスの読み取り専用プロパティで、関連づけられた CSS の @container のコンテナー名を表します。

例えば、下記の @container の containerName の値は sidebar です。

css

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

値

この CSSContainerRule に関連付けられた @container の container-name を格納した文字列。もし @container が名前付きでない場合、この関数は空文字列 ("") を返します。

例

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

<div id="log">
  <h2>ログ</h2>
  <ul></ul>
  <hr />
</div>

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

まず、 HTML で card (<div>) を post の中に定義します。

html

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

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

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>

以下のコードでは、例に関連付けられた HTMLStyleElement を id を使って取得し、その sheet プロパティを使って StyleSheet を取得しています。 StyleSheet からシートに追加された cssRules のセットを取得します。上記の 3 番目のルールとして @container を追加したので、関連する CSSContainerRule にアクセスするには cssRules の 3 番目の項目（インデックス "2"）を使います。最後に、コンテナー名とクエリーのプロパティをログに記録します（ログを記録するコードは示していません）。

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

出力例を以下に示します。ログ部分にコンテナー名の文字列が表示されます。カード部分のタイトルは、ページの幅が 700px を超えると 2 倍の大きさになるはずです。

仕様書

Specification
CSS Containment Module Level 3 # dom-csscontainerrule-containername

ブラウザーの互換性

BCD tables only load in the browser

値

例

仕様書

ブラウザーの互換性

関連情報