CSSContainerRule: containerName プロパティ

Baseline 2023

Newly available

Since September 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="example-styles"> .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("example-styles").sheet; const exampleRules = exampleStylesheet.cssRules; const containerRule = exampleRules[2]; // CSSContainerRule で、コンテナールールを表す log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);

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

仕様書

Specification
CSS Conditional Rules Module Level 5 # dom-csscontainerrule-containername

CSSContainerRule: containerName プロパティ

値

例

仕様書

ブラウザーの互換性

関連情報