CSS3

@規則

@layer

→●、mdn

カスケード層の宣言法。

@layer 規則は、明示的なカスケード層を定義する ― その構文には、以下に述べる 2 種がある。

この構文による @layer 規則に対する制約と処理は、真 に評価される条件付きグループ規則 [CSS-CONDITIONAL-3] と同じになる。

<layer-ident>

CSS 識別子（<ident>）であり、あるカスケード層を識別する 名前（layer name）を表現する：

• 所与の名前に対し、同じ［出自、文脈］（かつ、視野を同じくするもの ― § 入れ子な層 を見よ）の中で、それを名前に供する @layer 規則のうち ：
  最初に現れるものは、（その名前の）新たなカスケード層を作成する／

  他のものは、その同じカスケード層に自身のスタイル規則をあてがう

• 名前を供さない @layer 規則は、常に、新たなカスケード層（“無名な層”）を作成する。【したがって、これらは、各 @layer ごとに別々な層を成すことになる（前項とは対照的に）。】

<stylesheet>

注記： 層の名前の照合は、shadow DOM の境界を越えることはない ― light DOM 内の層たちの順序は、shadow DOM 内の［それらと名前が一致する層たち］の順序には影響しない。

@layer 規則は、【1 個以上の】名前のみを供することで、［スタイル規則をあてがうことなく新たなカスケード層を定義する］ためにも利用できる：

名前のみを供する @layer 規則†は、［@import 規則／他の @layer 規則］が許容される所なら、どこでも許容される。

【† 原文では“空な @layer 規則”と称されているが、［ブロックを伴う構文でありつつ、ブロックの内容が空な @layer 規則］と紛らわしいので、この訳では直に“名前のみを供する”と記すことにする。】

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer default;
@layer theme;
@layer components;

@import url(theme.css) layer(theme);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer default, theme, components;

@import url(theme.css) layer(theme);

@layer default {
  audio[controls] {
    display: block;
  }
}

¶例を省く

以下のCSSが組み込んであります：

<SPAN class=Test>テスト</SPAN>

テスト