CSSContainerRule: containerName プロパティ

値

この 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 の中に定義します。

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

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

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

仕様書

ブラウザーの互換性

関連情報

• CSS の container 一括指定プロパティ
• CSS コンテナーモジュール
• コンテナークエリー
• コンテナーのサイズおよびスタイルクエリーの使用