Cascade Layers (@layer)
layer() は CSS の関数で、@import アットルールと共に使用され、インポートされたリソースを分離された名前付きカスケードレイヤーにインポートするために使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 97 | 15.4 | 99 | 15.4 | |
| DOM API | ||||||
| layerName は CSSImportRule インターフェイスの読み取り専用プロパティで、 @import アットルールで作成されたカスケードレイヤーの名前を返します。 | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| CSSLayerBlockRule は @layer ブロックルールを表します。 | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| name は CSSLayerBlockRule インターフェイスの読み取り専用プロパティで、カスケードレイヤーに関連付けられた名前を表します。 | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| CSSLayerStatementRule は @layer 文のルールを表します。 CSSLayerBlockRuleとは異なり、他のコンテナーのルールを格納せず、単に 1 つまたは複数のレイヤーの名前を提供して定義します。 | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| nameList は CSSLayerStatementRule インターフェイスの読み取り専用プロパティで、関連づけられたカスケードレイヤーの名前のリストを返します。名前は変更できません。 | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| CSS @ ルール | ||||||
| layer() CSS 関数は @import at-rule とともに使用され、インポートされたリソースを別の名前付きカスケード レイヤーに配置します。 | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| CSS タイプ | ||||||
| revert-layer は CSS 全体のキーワードで、カスケードレイヤー内のプロパティの値を、前回カスケードレイヤー内の要素に一致した CSS ルール内のプロパティの値にロールバックします。このキーワードが指定されたプロパティの値は、現在のカスケードレイヤーで対象とする要素にルールを指定していないものとして再計算されます。 | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
基本構文
/* Declare layer priorities */
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer base {
body { font-family: system-ui, sans-serif; line-height: 1.6; }
a { color: var(--color-primary); }
}
@layer components {
.btn { padding: 8px 16px; border-radius: 6px; }
.card { padding: 1rem; border: 1px solid #e5e7eb; }
}
@layer utilities {
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}ライブデモ
実務での使いどころ
-
CSSアーキテクチャの整理
リセット→ベース→コンポーネント→ユーティリティの優先順位を明示的に管理。
-
サードパーティCSSとの共存
外部ライブラリのスタイルを専用レイヤーに配置し、プロジェクトのスタイルとの競合を防ぐ。
注意点
- レイヤーに属さないスタイルは全てのレイヤーより優先される点に注意。
- !important のレイヤー内優先度は通常とは逆順になる。
アクセシビリティ
- レイヤーの優先順位ミスでフォーカスインジケーターが消えないよう、ユーティリティレイヤーに a11y 関連スタイルを配置する。