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
です。
@container sidebar (min-width: 700px) {
.card {
font-size: 2em;
}
}
値
この CSSContainerRule
に関連付けられた @container
の container-name
を格納した文字列。
もし @container
が名前付きでない場合、この関数は空文字列 (""
) を返します。
例
下記の例では、名前付き @container
ルールを定義し、関連する CSSContainerRule
のプロパティを表示しています。
CSS は @container
の例、名前付きコンテナーコンテキストの作成にあるものととてもよく似ています。
まず、 HTML で card
(<div>
) を post
の中に定義します。
<div class="post">
<div class="card">
<h2>カードタイトル</h2>
<p>カードの内容</p>
</div>
</div>
コンテナー要素の CSS はコンテナーの種類を指定し、名前を指定することもできます。
カードには既定のフォントサイズがあり、 sidebar
という名前の @container
が、最小幅が 700px を超える場合に上書きされます。
<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 Conditional Rules Module Level 5 # dom-csscontainerrule-containername |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS の
container
一括指定プロパティ - CSS 拘束モジュール
- コンテナークエリー
- コンテナーのサイズおよびスタイルクエリーの使用