CSSImportRule: layerName プロパティ

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

layerName は CSSImportRule インターフェイスの読み取り専用プロパティで、 @import アットルールで作成されたカスケードレイヤーの名前を返します。

作成したレイヤーが無名であった場合、文字列は空文字列 ("") となり、レイヤーが作成されていない場合は null オブジェクトとなります。

値

空文字列、または null オブジェクトです。

例

この文書の単一のスタイルシートには、 3 つの @import ルールが含まれています。最初の宣言は、スタイルシートを名前付きレイヤーにインポートします。 2 つ目の宣言は、スタイルシートを無名レイヤーにインポートします。 3 つ目の宣言は、レイヤー宣言なしでスタイルシートをインポートします。

layerName プロパティは、インポートされたスタイルシートに関連付けられているレイヤーの名前を返します。

css
@import url("style1.css") layer(layer-1);
@import url("style2.css") layer;
@import url("style3.css");
js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].layerName); // `"layer-1"` を返す
console.log(myRules[1].layerName); // `""` (an anonymous layer) を返す
console.log(myRules[2].layerName); // `null` を返す

仕様書

Specification
CSS Object Model (CSSOM)
# dom-cssimportrule-layername

ブラウザーの互換性

BCD tables only load in the browser

関連情報