CSSImportRule: layerName プロパティ

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.

layerNameCSSImportRule インターフェイスの読み取り専用プロパティで、 @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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
layerName

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報