CSSLayerStatementRule

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.

CSSLayerStatementRule は @layer 文のルールを表します。 CSSLayerBlockRuleとは異なり、他のコンテナーのルールを格納せず、単に 1 つまたは複数のレイヤーの名前を提供して定義します。

このルールで、 CSS ファイルの先頭に見かけ上あるレイヤーの順序を明示的に宣言することができます。レイヤーの順序は、各レイヤー名の最初の出現順序によって定義されます。文で宣言することで、読者はレイヤーの順序を理解することができます。また、 CSSLayerBlockRule 構文を使用する場合には不可能な、インラインレイヤーとインポートレイヤーの挿入も可能になります。

CSSRule CSSLayerStatementRule

インスタンスプロパティ

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

例

HTML

html
<p></p>

CSS

css
@layer layerName, layerName2;

JavaScript

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

const layer = rules[0]; // CSSLayerStatementRule

item.textContent = `この CSS の @layer 文は、 ${layer.nameList.join(
  ", ",
)} レイヤーを宣言しています。`;

結果

仕様書

Specification
CSS Cascading and Inheritance Level 5
# csslayerstatementrule

ブラウザーの互換性

BCD tables only load in the browser

関連情報