CSSLayerStatementRule
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年3月以降、すべてのブラウザーで利用可能です。
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(
", ",
)} レイヤーを宣言しています。`;
結果
仕様書
| 仕様書 |
|---|
| CSS Cascading and Inheritance Level 5 # csslayerstatementrule |