CSSLayerBlockRule: name プロパティ
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.
name は CSSLayerBlockRule インターフェイスの読み取り専用プロパティで、カスケードレイヤーに関連付けられた名前を表します。
値
レイヤーの名前の入った文字列です。レイヤーが無名の場合は "" です。
例
HTML
html
<output></output> <output></output>
CSS
css
output {
display: block;
}
@layer special {
div {
color: rebeccapurple;
}
}
@layer {
div {
color: black;
}
}
JavaScript
js
const item1 = document.getElementsByTagName("output")[0];
const item2 = document.getElementsByTagName("output")[1];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。
const layer = rules[1]; // CSSLayerBlockRule
const anonymous = rules[2]; // 無名の CSSLayerBlockRule
item1.textContent = `1 つ目の CSSLayerBlockRule は "${layer.name}" レイヤーを定義しています。`;
item2.textContent = `2 つ目の CSSLayerBlockRule は "${anonymous.name}" という名前のレイヤーです。`;
結果
仕様書
| Specification |
|---|
| CSS Cascading and Inheritance Level 5 # dom-csslayerblockrule-name |
ブラウザーの互換性
Loading…
関連情報
@layerの宣言文はCSSLayerStatementRuleで表されます。- CSS における名前付きカスケードレイヤーの作成方法