CSSContainerRule: containerName プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年9月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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 倍の大きさになるはずです。

[フレーム]