캐스케이드 레이어

CSS의 신규 회원 : @Layer

CSS 필드에서 새로운 기능이 나타났습니다 : @layer . 이것은 CSS 개발에 영향을 미치는 데 중요한 역할을 한 Miriam Suzanne에게 감사합니다. 이 기능에 대해 들었지만 실험 브라우저에서 나타납니다.

Bramus는이 기능을 깊이 탐구하는 멋진 기사를 썼습니다.

@layer 의 출현으로 인해 개발자에게 캐스케이드 스타일 시트를 제어 할 수있는 더 많은 도구가 제공됩니다. @layer 의 강력한 것은 Cascading 스타일 시트에서 독특한 위치입니다. 선택기 특이성과 발생 순서 이전입니다. 이로 인해 다른 계층에 사용 된 CSS의 선택기 특이성이나 CSS가 이러한 층에로드되는 순서에 대해 걱정할 필요가 없습니다 . 이는 대규모 팀에 매우 유용하거나 타사 CSS를로드 할 때 매우 유용합니다.

Bramus van Damme ,“CSS의 미래 : 레이어 (CSS@Layer)*”

(대담한 부분은 원본 텍스트에서 강조됩니다)

핵심은 : 이것은 선택기의 우선 순위에 영향을 미치는 새로운 기능입니다. @layer 실제 응용 프로그램 스타일을 결정하는 완전히 새롭고 강력한 메커니즘이기 때문에 CSS에 대한 이해를 다시 조정해야합니다.

나는 "높은 계층"스타일이 해당 레이어의 선택기가 약한 경우에도 전통적으로 더 강력한 선택기를 이길 수 있기 때문에 강력하다고 말합니다.

 /* 1 층*/
@Layer Base-Layer {
  바디#foo {
    배경 : 황갈색;
  }
}
/* 더 높은 레벨, 따라서 선택기가 약한 경우에도 승리*/
@Layer 테마 레이어 {
  body.foo {
    배경 : #eee;
  }
}

/* 알아채다! 무한 스타일은 선택기가 약한 경우에도 계층 스타일보다 강력합니다*/
몸 {
  배경 : 빨간색;
}

CSS의 하단 세그먼트는 어떤 층에도 배치되지 않기 때문에 선택기가 약하더라도 승리합니다.

그리고 당신은 한 레벨로 제한되지 않습니다. 원하는대로 정의하고 사용할 수 있습니다.

 @layer 재설정; /* "재설정"이라는 첫 번째 레이어를 만듭니다.
@layer base; /* "base"라는 두 번째 레이어 생성* /
@Layer 테마; /* "테마"라는 세 번째 레이어 생성* /
@Layer 유틸리티; /* "유틸리티"라는 네 번째 계층을 만듭니다.
/ * 또는 @layer 재설정, 기본, 테마, 유틸리티;


@layer reset { /* "Reset"이라는 레이어에 추가
  / * ... */
}

@Layer 테마 { /* "테마"라는 레이어에 추가
  / * ... */
}

@layer base { /* "base"라는 레이어에 부속기* /
  / * ... */
}

@Layer 테마 { /* "테마"라는 레이어에 추가
  / * ... */
}

이것은 정말 충격적입니다.

우리는 그것을 어떻게 사용합니까?

일반적인 패턴이 될지 궁금합니다 ...

1. 우선 순위가 매우 명확하도록 모든 것을 계층화하십시오. 아마도 무인 CSS만이 매우 강력한 커버리지에 허용되지만 이상적으로는 그렇게하는 것이 높은 수준의 층이어야합니다.
2. 가장 낮은 레벨로 재설정하십시오.
3. 타사 콘텐츠를 중간 계층으로 사용하십시오.
4. 팀이 최상위 레벨로 쓴 모든 것을 취하십시오.

숫자를 첨부하지 않고 언제든지 조정할 수 있기 때문에 레이어 사이에 공간을 떠나는 것에 대해 걱정할 필요가 없습니다 ( z-index 사용할 때와 같이).

시간이 말할 것입니다.

디버그

개발자 도구가 계층 구조 위치로 인해 약해 보이는 셀렉터가 더 약해 보일 때 시간이 지남에 따라 심각한 혼란이있을 수 있기 때문에 개발자 도구를 매우 명확하게 표현하기를 원합니다.

브라우저 지원

Caniuse 가이 문제를 알아 차렸던 것 같습니다!

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿

고쳐 쓰다

이것들은 매우 새롭기 때문에 (글을 쓰는 시점에) 불안정성이 예상 될 수 있습니다. 2021 년 10 월 6 일에 사람들은 무제한 스타일이 실제로 가장 약한 것이 아니라 가장 강력하다고 결정했습니다. 이 기사를 보여주기 위해 기사를 업데이트하려고 시도했습니다.

위 내용은 캐스케이드 레이어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!