CSS에 의해 해결 : 도넛 스코프

다양한 콘텐츠를 많이 보여줄 수있는 웹 구성 요소가 있다고 상상해보십시오. 다른 구성 요소를 주입 할 수있는 곳에 슬롯이있을 수 있습니다. 상위 구성 요소에는 보유 할 수있는 컨텐츠 구성 요소의 스타일과 관련이없는 고유 한 스타일이 있습니다. 이것은 도전적인 상황을 만듭니다.

부모 구성 요소 스타일이 내면을 누출하는 것을 어떻게 방지 할 수 있습니까?

이것은 새로운 문제가 아닙니다. Nicole Sullivan은 2011 년에 다시 설명했습니다! 주요 문제는 CSS를 작성하여 컨텐츠에 영향을 미치지 않도록 CSS를 작성하고

Donut Scoping

. “우리는 스코프가 시작되는 곳뿐만 아니라 그것이 끝나는 곳을 말하는 방법이 필요합니다. 따라서 스코프 도넛”.

Donut Scoping이 웹 시절의 고대 문제이더라도 선택한 검색 엔진에서 "CSS Donut Scope"를 빠르게 검색하면 다음 두 가지를 알 수 있습니다.

대부분의 사람들은 여전히 ​​최근 @scope at-rule에 대해 이야기합니다. 거의 모든 결과는 2021 년 이후입니다 우리는 영리한“CSS Donut Scope -@Scope”쿼리에서도 비슷한 결과를 얻습니다. 해마다 진행되는 것은 Donut Scope 테이블에 새로운 것을 가져 오지 않는 것 같습니다. @Scope까지 OL 'CSS 글로벌 범위의 또 다른 두통으로 도넛 스코프가 우리 마음의 뒤쪽에 머물렀던 것 같습니다. 예를 들어 다음 게임 화면을 예로 들어 보겠습니다. 탭 세트와 .Content 슬롯이있는 .parent 요소가 있습니다. 우리가 .parent color를 변경하면 .content 내부의 색상도 마찬가지입니다. 어떻게 이런 일이 발생하지 않도록 막을 수 있습니까? .Content 내부의 텍스트가 .parent의 색상을 상속하는 것을 방지하고 싶습니다. 그냥 무시하십시오!

첫 번째 솔루션은 솔루션이 전혀 없습니다!

대부분의 개발자는 도넛 범위의 기쁨없이 (미친, 맞습니까?) 대부분의 개발자가 자신의 삶을 살 수 있기 때문에 가장 많이 사용되는 접근법 일 수 있습니다. 여기서 더 확실하게합시다. 그것은 단지 그것을 무시하고 CSS의 글로벌 범위를 받아들이고 그것을 염두에두고 글쓰기 스타일을 받아들이는 것입니다. 첫 번째 예로 돌아가서, 우리는 부모의 스타일이 콘텐츠 구성 요소로 내부로 누출되는 것을 막을 수 없다고 가정하므로 부모의 스타일을 특이성으로 덜 작성하므로 컨텐츠 스타일에 의해 상체 될 수 있습니다.

.

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

이 접근법은 현재로서는 충분하지만 프로젝트가 커짐에 따라 특이성으로 스타일을 관리하는 것이 지루하고 기껏해야 최악의 경우 혼란스러워집니다. 구성 요소는 슬롯이있는 위치에 따라 다르게 행동 할 수 있으며 CSS를 변경하거나 HTML을 변경하면 예상치 못한 방식으로 다른 스타일을 깨뜨릴 수 있습니다.

2 개의 CSS 속성이 막대로 들어갑니다. 완전히 다른 바에있는 바스 툴이 넘어집니다.

Thomas Fuchs

이 작은 예에서 스타일을 두 번 무시 해야하는 방법을 알 수 있습니다. 얕은 도넛 스코프 : NOT () 우리의 목표는 .parent를 범위로 범위로 만들고. 따라서 .content는 아니지만 나머지 .content가 아닙니다…

<.>이 방법. 각 예제에 대해 DevTools를 열면 엄청난 차이를 볼 수 있습니다. 개선만큼이나, 마지막 예제는 얕은 도달 범위를 가지고 있습니다. 따라서 또 다른 슬롯이 더 깊어지면 슬롯이 어디에 있을지 미리 알지 않으면 도달 할 수 없습니다. . 이것은 직접 자손 선택기 (& gt;)를 사용하고 있기 때문이지만, 그것 없이는 작동하는 방법을 찾을 수 없었습니다. 내부에 복잡한 선택기의 조합을 사용하더라도 : NOT ()는 유용한 곳에서 이끌어가는 것 같지 않습니다. 예를 들어, 2021 년에 Dr. Lea Verou는 다음과 같은 셀렉터 칵테일을 사용하여 다음과 같은 도넛 범위를 언급했습니다. 그러나 그러나이 스 니펫은 후손 대신 .container/.parent 클래스와 일치하는 것으로 보이며, 여전히 얕은 도넛 범위가 될 것입니다 :

. 모든 현대식 브라우저가 이제 복잡한 선택기를 지원할 때까지

: not ()! ?

테스트 : https://t.co/rhsjardvswad

@scope 로 도넛 범위

따라서 도넛 범위 완성을위한 마지막 단계는 하나의 dom 층을 넘어서는 것입니다. 운 좋게도 작년에 우리는 @scope at-rule을 선물했습니다 (Almanac 항목에서 더 자세히 읽을 수 있습니다). 간단히 말해서, 우리는 스타일이 스코핑 될 DOM에서 하위 트리를 선택할 수 있으므로 더 이상 글로벌 범위가 없습니다!

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

더 나은 것은 우리가 선택한 하위 트리 안에 슬롯을 남겨 둘 수 있습니다 (보통 스코프 루트라고 함). 이 경우.

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

더 나은 점은, 그 중첩이 아무리 중첩 되더라도 .parent 내부의 모든 .content 요소를 감지합니다. 따라서 슬롯을 작성하는 곳에 대해 걱정할 필요가 없습니다. 마지막 예에서는 다음 스타일을 작성하여.

우리가 변경하려는 모든 요소를 ​​나열하는 것이 불편 해 보일 수 있지만, 중첩 된 슬롯의 범위를 엉망으로 만들기 때문에 Universal Selector (*)와 같은 것을 사용할 수 없습니다. 이 예에서는 중첩 된 .Content를 범위를 벗어나지 만 컨테이너는 아닙니다. 색상 속성이 상속되므로 중첩 된 .Content는 색상이 변경됩니다! voilà! 둘 다 .content 슬롯은 스코핑 된 도넛 구멍 안에 있습니다 얕은 범위는 여전히이 방법으로 가능합니다. 우리는 단지 슬롯 선택기를 다시 작성하여. 그러나 우리는 다음을 사용해야합니다. 스코프 선택기는 스코핑 루트를 다시 언급하거나.이 경우.

우리는 얕은 스코핑이기 때문에이 인스턴스에서 범용 선택기를 사용할 수 있습니다.

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

결론 도넛 스코핑 (Donut Scoping)은 2011 년에 돌아온 지망생 기능이 2024 년에 마침내 생겨났다. 최근까지 CSS 글로벌 범위의 또 다른 결과로서 최근까지 우리의 마음의 뒤에 앉아있는 것처럼 보이는 것은 여전히 ​​당황하고있다. 그러나 CSSWG (새로운 CSS 기능에 대한 사양을 작성한 사람)가 @scope at-rule에 대한 사양을 쓸 때 분명히 해결하려는 의도를 가지고 있었기 때문에 모든 사람의 레이더 아래에 있다고 말하는 것은 불공평 할 것입니다.

. 그것이 무엇이든간에, 나는 우리가 CSS에서 진정한 도넛을 범할 수있게 될 것입니다. 어느 정도까지, 우리는 여전히 Firefox가 그것을 지원할 때까지 기다려야합니다. ? 이 브라우저 지원 데이터는 Caniuse에서 나온 것입니다. 숫자는 브라우저가 해당 버전의 기능을 지원한다는 것을 나타냅니다. Desktop

모바일 / 태블릿 .

위 내용은 CSS에 의해 해결 : 도넛 스코프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!