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.nameList
読取専用- ルールによる各カスケードレイヤーの名前を表す文字列の配列です。
例
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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSLayerStatementRule | ||||||||||||
nameList |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.