CSSLayerBlockRule

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.

CSSLayerBlockRule は @layer ブロックルールを表します。 これは、他のルールを含むことができる、すなわちグループ化アットルールであり、名前で識別される所定のカスケードレイヤーに関連付けられます。

CSSRule CSSGroupingRule CSSLayerBlockRule

インスタンスプロパティ

親インターフェイスである CSSGroupingRule から継承したプロパティもあります。

  • CSSLayerBlockRule.name 読取専用
    • 関連するカスケードレイヤーの名前を含む文字列です。

インスタンスメソッド

親インターフェイスである CSSGroupingRule から継承したメソッドもあります。

例

HTML

html
<p>I am displayed in <code>color: rebeccapurple</code>.</p>

CSS

css
@layer special {
  p {
    color: rebeccapurple;
  }
}

JavaScript

js
const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layer = rules[0]; // CSSLayerBlockRule

item.textContent = `この CSSLayerBlockRule は "${layer.name}" レイヤーのものです。`;

結果

仕様書

Specification
CSS Cascading and Inheritance Level 5
# csslayerblockrule

ブラウザーの互換性

BCD tables only load in the browser

関連情報