[CSS] Cascade Layers 정리

안녕하세요! aloveu입니다.

오늘은 CSS의 새로운 스펙인 'Cascade Layers'에 대해 소개해 드리겠습니다. 사실 나온 지는 꽤 됐어요. 

한동안 CSS에 관심을 덜 두고 JS쪽 개발만 하다 보니 이런 게 나와 있는 줄 몰랐었죠.

여하튼 이 기능은 CSS의 스타일 우선순위를 보다 효과적으로 관리할 수 있게 해 주므로, 대규모 프로젝트나 프레임워크, 라이브러리 개발 시 매우 유용합니다.

근데 요즘 프로젝트에서는 scss 많이 쓰는터라 거기서는 style.scss 파일에서 쉽게 우선순위별로 임포트 해서 쓸 수 있어서 이건 잘 쓰지 않을 것 같지만 모르고 안 쓰는 것과 알고도 안 쓰는 것은 다르겠죠?!

 

최근에 Angular PrimeNG 라는 UI라이브러리를 업데이트했다가 뭔가 스타일이 제 예상대로 작동을 하지 않길래 확인했던 게 이 @layer입니다. 업데이트한 라이브러리에서는 쓰고 있더라고요. 그래서 찾아보고 포스팅합니다.

---

Cascade Layers란?

Cascade Layers는 CSS Cascade 알고리즘에 'Layers' 라는 새로운 기준이 추가된 개념입니다.

기존 Cascade 알고리즘은 Origin, !important, 명시도, 작성 순서 등의 기준으로 스타일 우선순위를 결정합니다.

Layers는 이 기준들보다 상위에 위치하여, 스타일 우선순위를 가장 먼저 판단하는 최우선 기준이 됩니다.

Cascade Layers의 사용

// 레이어를 선언하고 블록 안에서 스타일을 선언할 수 있습니다.
@layer reset {
  * {margin:0;padding:0;}
}

// reset.cs파일을 reset layer로 생성 할 수 있어요.
@import url(reset.css) layer(reset);

 

파일로도 사용이 임포트해서 사용이 가능하고요. @layer안 블록에서 스타일 지정해서 사용을 합니다.

 

Layers의 이름 재사용

레이어 이름은 이 레이어를 구별할 수 있는 고유한 식별자인데 재사용 시, 기존 레이어에 스타일이 추가됩니다.

익명으로도 레이어를 생성할 수 있습니다.

// 익명레이어
@layer {
  ...
}

@layer reset {
  *{margin:0;padding:0}
}

@layer reset {
  *{border:0;}
}
// 최종적으로 reset layer는 margin, padding, border 스타일을 가짐

 

Cascade Layers의 순서

Layers는 기존 명시도나 작성 순서 기준에 구애받지 않고, 레이어 간 우선순위를 마음대로 정할 수 있습니다.

그리고 모듈화된 CSS 작성 가능 레이어를 나누어 CSS 코드를 모듈화 할 수 있죠.

예를 들어 Reset, Base, Theme, Utilities 등으로 레이어를 구분해서 순서를 지정할 수 있습니다.

// Reset, Base, Theme, Utilities 

@layer reser, base, theme, utilities	// 레이어 순서를 정의 할 수 있다.

@layer reser {}

@layer base {}

@layer theme {}

@layer utilities {}

 

순서를 지정하지 않으면 제일 마지막에 정의된 레이어가 우선순위를 갖습니다.

 

Unlayered Style

레이어 내에서의 명시도, 작성 순서는 기존 Cascade 규칙을 따르구요 이전 버전과 달리 Unlayered 스타일이 가장 강한 스타일이 되었습니다.

이 말은 레이어 밖에 있는 스타일의 우선순위가 가장 높다는 말이에요.

@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;
  }
}

.alert{
  border:5px solid red;
}

결과

 

결과를 보면 레이어 밖에 있는 .alert{border:5px solid red;} 값이 적용 되어있는걸 볼 수 있어요.

 

revert-layer로 이전 레이어 값 가져오기

revert-layer라는 값으로 이전 레이어 값으로 되돌릴 수도 있습니다.

.no-theme { color: revert-layer; }

 

Layers 중첩

@layer 를 중첩해서도 사용이 가능하고 우선순위는 선언 순서대로입니다.

@layer a {}

@layer b {
  @layer ba{...}
  @layer bb{...}
}

 

레이어 안에 레이어를 쓰고서 그 안에 있는 ba layer를 참조를 하려면 @layer b.ba{...} 으로 참조해서 추가로 스타일을 추가할 수 있습니다.

 

브라우저 지원 현황

현재 Cascade Layers 기능은 최신 브라우저에서 지원됩니다.

[Can I Use] layers 지원현황

 

근데 앱에서 뜨는 웹뷰 같은 곳에서 가끔 웹뷰 웹킷 버전등이 낮아서 지원하지 않는 경우가 있어요.

잘 체크 해보시고 사용을 하면 될 걸로 보입니다.

 

참고

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

https://caniuse.com/?search=layers