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.

nameCSSLayerBlockRule インターフェイスの読み取り専用プロパティで、カスケードレイヤーに関連付けられた名前を表します。

レイヤーの名前の入った文字列です。レイヤーが無名の場合は "" です。

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

関連情報