@layer

시도해 보기

@layer module, state;

@layer state {
  .alert {
    background-color: brown;
  }
  p {
    border: medium solid limegreen;
  }
}

@layer module {
  .alert {
    border: medium solid violet;
    background-color: yellow;
    color: white;
  }
}

<p class="alert">Beware of the zombies</p>

구문

/* 문 @규칙 */
@layer layer-name;
@layer layer-name, layer-name, layer-name;

/* 블록 @규칙 */
@layer {rules}
@layer layer-name {rules}

• layer-name : 캐스케이드 레이어의 이름
• rules : 캐스케이드 레이어에 있는 CSS 규칙 집합

설명

캐스케이드 레이어 내의 규칙들은 함께 캐스케이딩되며, 웹 개발자들에게 캐스케이드에 대한 더 많은 제어권을 제공합니다. 레이어에서 정의되지 않은 스타일은 항상 이름이 있는 레이어와 이름이 없는 레이어에서 선언된 스타일을 무시합니다.

다음 다이어그램은 1, 2, ..., N 순서로 선언된 레이어의 우선순위를 보여줍니다.

선언 순서가 중요합니다. 먼저 선언된 레이어가 가장 낮은 우선순위를 가지며, 마지막으로 선언된 레이어가 가장 높은 우선순위를 가집니다. 그러나 !important 플래그가 사용되면 우선순위가 뒤집힙니다.

@layer @규칙은 세 가지 방법 중 하나로 캐스케이드 레이어를 생성하는 데 사용됩니다

첫 번째 방법은 @layer 블록 @규칙을 사용하여 특정 이름의 캐스케이드 레이어를 생성하고, ê·¸ 레이어 내부에 CSS 규칙을 포함하는 방식입니다. 예를 들면 다음과 같습니다.

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

두 번째 방법은 @layer 문 @규칙을 사용하여 스타일을 할당하지 않고 쉼표로 구분된 하나 이상의 이름 있는 캐스케이드 레이어를 생성하는 것입니다. 아래와 같이 단일 레이어를 만들 수 있습니다.

@layer utilities;

여러 개의 레이어를 한 번에 정의할 수도 있습니다. 아래와 같이 작성할 수 있습니다.

@layer theme, layout, utilities;

이 방법이 유용한 이유는 레이어가 선언된 순서가 각 레이어의 우선순위를 나타내기 때문입니다. 선언과 마찬가지로, 여러 레이어에 규칙이 있는 경우 마지막에 나열된 레이어가 우선권을 가집니다. 따라서, 앞서 나온 예시에서 theme와 utilities에 상충하는 규칙이 있다면, utilities에 있는 규칙이 우선권을 가지며 적용됩니다.

세 번째 방법은 레이어 이름을 포함하지 않고 @layer 블록 @규칙을 사용하여 이름 없는 레이어를 생성하는 것입니다. 예시는 아래와 같습니다.

@layer {
  p {
    margin-block: 1rem;
  }
}

이것은 익명 캐스케이드 레이어를 생성합니다. 이 레이어는 이름 있는 레이어와 동일한 방식으로 작동하지만, 이후에 규칙을 추가할 수는 없습니다. 익명 레이어의 우선순위는 이름이 있든 없든 레이어가 선언된 순서에 따르며, 레이어 외부에서 선언된 스타일보다 우선순위가 낮습니다.

캐스케이드 레이어를 생성하는 또 다른 방법은 @import를 사용하는 것입니다. 이 경우 규칙은 가져온 스타일 시트에 포함됩니다. @import @규칙은 @charset 및 @layer 규칙을 제외한 모든 유형의 규칙보다 먼저 와야 한다는 점을 기억하세요.

@import "theme.css" layer(utilities);

중첩 레이어

레이어는 중첩될 수 있습니다. 예시는 아래와 같습니다.

@layer framework {
  @layer layout {
  }
}

framework 내부의 layout 레이어에 규칙을 추가하려면 두 이름을 .로 연결합니다.

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

형식 구문

@layer = 
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*  

예제

간단한 예제

다음 예제에서는 두 개의 CSS 규칙이 생성됩니다. 하나는 어떤 레이어에도 포함되지 않은 <p> 요소에 대한 규칙이고, 다른 하나는 type이라는 레이어 내의 .box p에 대한 규칙입니다.

레이어가 없으면 선택자 .box p가 가장 높은 구체성을 가지므로, Hello, world!는 녹색으로 표시됩니다. 그러나 type 레이어가 레이어 없는 콘텐츠를 포함하기 위해 생성된 익명 레이어보다 먼저 오므로, 텍스트는 보라색으로 표시됩니다.

또한 순서에 주목하세요. 레이어 없는 스타일을 먼저 선언했음에도 불구하고 여전히 레이어 스타일 뒤에 적용됩니다.

HTML

<div class="box">
  <p>Hello, world!</p>
</div>

CSS

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

ê²°ê³¼

기존 레이어에 규칙 할당하기

다음 예제에서는 규칙이 적용되지 않은 두 개의 레이어가 생성된 후, 두 레이어에 CSS 규칙이 적용됩니다. base 레이어는 color, border, font-size, 및 padding을 정의하고, special 레이어는 다른 색상을 정의합니다. special이 레이어가 정의될 때 마지막에 오기 때문에 제공하는 색상이 사용되며 텍스트는 rebeccapurple로 표시됩니다. base에서 정의된 다른 모든 규칙은 여전히 적용됩니다.

HTML

<div class="item">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>special</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</div>

CSS

@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

ê²°ê³¼

명세서

브라우저 호완성

같이 보기

• @import
• CSSLayerBlockRule
• CSSLayerStatementRule
• !important
• revert-layer
• Introducing the CSS cascade
• 계단식 및 상속
• 종속 계층
• The future of CSS: Cascade layers on bram.us (2021)