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 March 2022.

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報