형제-카운트 () 및 형제-인덱스 () 기능을 기다리는 방법

CSS의 새로운 기능은 얇은 공기에서 나타나지 않지만 토론, 평가, 정의, 작문, 프로토 타이핑, 테스트, 출판, 지원 등 오랜 과정을 거치게됩니다. 이 과정은 매우 길며 새로운 기능을 사용하기를 간절히 원해도 기다릴 수 있습니다.

그러나 우리는 다른 대기 방법을 선택할 수 있습니다.이 기능을 사용하여 인터페이스 나 데모를 완전히 피하십시오. 아니면 CSS의 경계에 도전하고 직접 구현하려고 노력합니까?

많은 진취적이고 호기심 많은 개발자들이 후자를 선택했습니다. 이 정신이 없다면 CSS는 정체 될 것입니다. 그래서 오늘 우리는 다가오는 두 가지 함수의

와 를 탐구 할 것입니다. 우리는 몇 년 동안 그들을 기대해 왔으므로 호기심을 사전에 날아가고 그들의 매력을 미리 느끼게하겠습니다!

트리 카운트 함수 당신은 형제 자매의 요소의 위치 또는 일부 인터리브 애니메이션 구현과 같은 CSS에서 계산하기 위해 특정 요소가 가지고있는 어린이 요소의 수를 알아야 할 수도 있습니다. 각 요소는 더 긴 지연이 지연되거나 형제 요소 수에 따라 요소의 배경색을 변경합니다. 이것은 오랫동안 CSS 위시리스트에서 오랫동안 기다려온 프로젝트였습니다. 이 2017 CSSWG Github 문제를 확인하십시오 :

기능 요청. 함수 내에서 함수를 사용할 수있어서 좋을 것입니다. 이것은 레이아웃에 새로운 가능성을 가져올 것입니다. sibling-count() sibling-index() 그러나 그러나 함수는 문자열을 사용하므로 숫자를 처리하는 함수에서 쓸모가 없습니다. 요소의 인덱스와

정수 형태로 형제 요소 수를 반환하는 비슷한 함수 세트가 필요합니다. 이것은 수요가없는 것 같습니다. 우리는 현재 pseudo-selector에 쿼리 요소에 pseudo selector (및 그 변형)를 사용하여

pseudo-selector를 사용하여 요소에 포함하는 항목 수에 따라 쿼리를 사용 할 수 있습니다.

운 좋게도 올해 CSSWG는

및 기능의 구현을 승인했습니다! 일부 컨텐츠는 사양에 작성되었습니다 :

함수는 함수를 사용하여 요소의 모체 요소에서

로 표현 된 총 자식 요소의 총 수를 나타냅니다. calc() counter()

함수는 로 표시되는 부모 요소의 자식 요소에서 함수를 사용하여 요소의 인덱스를 나타냅니다. 와 유사하게,

는 1에서 카운트합니다.

counter() 우리가 그것들을 사용하는 데 얼마나 걸립니까? 올해 초 Adam Argyle은 다음과 같이 말했습니다 : "크롬 엔지니어는이 작업을하고 싶다고 언급했지만 아직 시도해 볼 수있는 로고가 없습니다. 뉴스가있을 때 공유하겠습니다. 한편, 우리가 지금 무엇을 할 수 있는지 보자! calc() 업데이트 (2025 년 3 월 5 일) : Chrome 은이 두 기능을 프로토 타입으로 제출했습니다.

원래 메소드 구문 및 사용 측면에서 트리 카운트 함수에 가장 가까운 것은 사용자 정의 속성입니다. 그러나 가장 큰 문제는 올바른 인덱스와 카운트로이를 채우는 방법입니다. 가장 쉽고 가장 긴 방법은 순수한 CSS를 사용하여 각 값을 하드 코드하는 것입니다. 선택기를 사용하여 각 요소를 해당 색인을 제공 할 수 있습니다.

등급 설정 쿼리 수를 사용해야하기 때문에 더 많은 미묘함이 필요합니다. 수량 쿼리에는 다음 구문이 있습니다

간결하게 말하면,이 예에는 의도적으로 적은 수의 요소 만 포함되지만 목록이 커지면 관리하기가 어려워집니다. 어쩌면 우리는 Sass와 같은 전 처리기를 사용하여 우리를 위해 작성할 수 있지만 여기에서 Pure CSS 솔루션에 중점을두고 싶습니다. 예를 들어, 다음 데모는 최대 12 개의 요소를 지원할 수 있으며 이미 코드가 얼마나 추악한 지 알 수 있습니다.

점수를 매기는 사람들의 경우 지수를 이해하고 12 개의 요소를 수립하는 데 24 개의 규칙이 필요합니다. 우리는 확실히이 숫자를 더 관리하기 쉬운 숫자로 줄일 수 있다고 생각하지만 각 색인을 하드 코딩하면 작성된 코드의 양이 늘어납니다. 우리가 할 수있는 최선의 방법은 CSS를 다시 작성하여 nth-child() 및

속성을 ​​함께 중첩 할 수 있도록하는 것입니다. 각 속성을 개별적으로 작성하는 대신

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

우리는 sibling-count() 규칙 내에서 :has() 규칙을 중첩 할 수 있습니다.

.container:has(> :last-child:nth-child(m)) { }

자식 요소 내부의 부모 요소를 둥지하는 것은 이상하게 보이지만 다음 CSS 코드는 완전히 유효합니다. 두 번째 요소가 마지막 요소라면

요소를 선택하고 있으므로 목록에 두 가지 요소 만 있습니다. 관리하기 쉬운 구문은 무엇입니까? 그것은 당신에게 달려 있습니다.

그러나 이것은 약간 개선 된 것입니다. 100 개의 요소가있는 경우 여전히

ol:has(> :nth-child(1)) {
  --sibling-count: 1;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

ol:has(> :last-child:nth-child(3)) {
  --sibling-count: 3;
}

/* 以此类推... */

및

속성을 ​​100 번 하드 코드해야합니다. 다행히도 다음 방법은 특히 기본 2에서 로그 방식으로 규칙을 추가합니다. 따라서 100 가지 요소에 대해 100 개의 규칙을 작성하는 대신 약 100 개의 요소에 대해 약 100 규칙 만 작성하면됩니다.

개선 방법 이 방법은 작년 10 월 Roman Komarov에 의해 처음 설명되었으며, 그곳에서 그는 두 개의 트리 수 기능과 미래의 기능을 프로토 타입했습니다. 이것은 훌륭한 게시물이므로 읽는 것이 좋습니다.

이 방법은 또한 사용자 정의 속성을 사용하지만 각 속성을 하드 코딩하는 대신 두 가지 사용자 정의 속성을 사용하여 각 요소의 속성을 구축합니다. 로마의 기사와 일치하기 위해, 우리는 0 :

에서 시작하는 및 라고 부릅니다. --sibling-index --si1 실제 --si2는이 두 속성과 (f)를 사용하여 구성되며, 이는 2보다 큰 정수를 나타냅니다. 이는 공식

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

에 따라 선택할 수있는 요소의 수를 알려줍니다. 그래서 ... <.>

요인 2의 경우 3 개의 요소를 선택할 수 있습니다. --sibling-index 요인 3의 경우 8 개의 요소를 선택할 수 있습니다. 요인 5의 경우 24 가지 요소를 선택할 수 있습니다. 요인 10의 경우 99 개의 요소를 선택할 수 있습니다. sqrt(F) - 1 요인 25의 경우 624 개의 요소를 선택할 수 있습니다.

보시다시피, 계수를 1 씩 증가 시키면 기하 급수적으로 선택할 수있는 요소의 수가 증가합니다. 그러나 이것이 CSS로 어떻게 해석됩니까?
• 가장 먼저 알아야 할 것은 의 속성을 계산하기위한 공식이 라는 것입니다. 우리의 요인이 3이면 :
아래 선택기는 무작위 일 수 있지만 설명해 주시기 바랍니다. 속성의 경우, 요인의 배수로 선택된 요소에 대한 규칙을 작성하고 f -1에 도달 할 때까지 1만큼 오프셋 한 다음
• 를 오프셋으로 설정합니다. 이것은 다음 CSS로 번역됩니다 :
따라서 요인이 3이면 F-1에 도달 할 때까지 다음 규칙을 작성합니다.
속성의 경우, 배치의 요소 수를 가진 요소를 요인으로 선택하는 규칙을 작성합니다 (따라서 요인이 3 인 경우 규칙 당 3 가지 요소를 선택합니다). 더 이상 가능한 한 지수 (8)에서 더 이상 배치에서 더 많은 요소를 선택할 수 없을 때까지 이동합니다. 이것은 CSS로 쓰는 것이 약간 복잡합니다.
• 마찬가지로, 요인이 3이면 다음 두 가지 규칙을 작성합니다.
그게 다야! 값 및 요소와 요소를 최대로 조정하면 14 개의 코드 스 니펫만으로 48 개의 요소를 선택할 수 있습니다!

등. 운 좋게도, 우리는

프로토 타이핑에서 우리가 배운 모든 것을 재사용 할 것입니다. 컨테이너에서 두 가지 사용자 정의 속성으로 시작하고 둘 다 0으로 시작합니다. 를 계산하기위한 공식은 동일합니다. sibling-count() Roman의 기사에서는 sibling-index() 속성에 대한 선택기를 별도로 작성하는 방법에 대해서도 설명하지만 첫 번째 기술에서 --sc1 선택 방법을 사용하므로 추가 선택기를 작성할 필요가 없습니다. 우리는 및 --sc1 속성을 ​​정의하는 규칙에 넣을 수 있습니다. --sibling-count 이것은 요인 3을 사용하므로 4 가지 규칙만으로 최대 8 개의 요소를 계산할 수 있습니다. 다음 예제의 계수는 7이므로 14 개의 규칙만으로 최대 48 개의 요소를 계산할 수 있습니다.

이 방법은 훌륭하지만 아마도 거의 마술처럼 작동하거나 단순히 미적으로 유쾌하지 않기 때문에 모든 사람에게는 그렇지 않을 것입니다. 부싯돌과 강철로 불을 피우는 사람들에게는 쉽지만 많은 사람들이 불을 피울 수는 없습니다.

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

JavaScript 메소드 이 접근법의 경우, 우리는 다시 사용자 정의 속성을 사용하여 트리 카운트 함수를 시뮬레이션 할 것입니다. 무엇보다도 20 줄 미만의 코드를 작성하여 무한대로 계산하거나 1.7976931348623157E 308이라고 말할 것입니다.

우리는 돌연변이 관찰자 API를 사용하므로 물론 JavaScript가 필요합니다. 나는 그것이 많은 사람들에게 실패를 인정하는 것과 같지만 동의하지 않습니다. JavaScript 메소드가 더 간단한 경우 (이 경우 실제로는 사실입니다) 가장 적합한 선택입니다. 그건 그렇고, 성능이 주요 관심사 인 경우 CSS 또는 HTML의 각 인덱스를 하드 코딩하십시오. --sibling-count 먼저, 우리는 DOM에서 컨테이너를 얻을 것입니다 : :has(). --sc1 그런 다음 각 요소에서 --sc2 속성을 ​​설정하고 컨테이너에서 sibling-index()를 설정하는 함수를 생성합니다 (캐스케이드로 인해 자식 요소에 사용할 수 있음). 의 경우, 우리는 를 반복해야하며 에서

를 얻을 수 있습니다.

.container:has(> :last-child:nth-child(m)) { }

일단 기능이 있으면 초기 트리 카운트 속성을 갖도록 한 번 전화해야합니다.

마지막으로, 돌연변이 관찰자.

생성자를 사용하여 새 관찰자를 초기화해야합니다. 요소가 변경 될 때마다 호출되는 콜백 함수를 허용하므로 함수를 썼습니다. 생성 된 관찰자 객체를 사용하여

메소드를 호출 할 수 있습니다.
우리가 관찰하고자하는 요소와 3 개의 부울 속성을 통해 관찰하려는 것을 정의하는 구성 객체 : , . 이 경우 의 변경 사항을 확인하려면 속성을
1. : 로 설정합니다.
2. 이것은 우리가해야 할 전부입니다! 이 방법을 사용하여 attributes 많은 childList 요소를 계산할 수 있습니다. 다음 데모에서 최대 값을 100으로 설정하지만 쉽게 10 배에 도달합니다. subtree. 그렇습니다. 그게 우리의 화염 방향입니다. 그것은 확실히 불꽃을 불러 일으키지 만 대부분의 사용 사례의 경우 너무 강력합니다. 그러나 그것은 우리가 완벽한 라이터를 기다릴 때 우리가 가진 것입니다. childList 다음에 무엇을 하시겠습니까? true 타임머신이 없으므로 및
기능이 게시 될 때는 말할 수 없습니다. 그러나 CSSWG는 사양에 무언가를 썼으며, 브라우저 (주로 Chromium)의 의도는 최근에 매우 강력 했으므로이 두 기능을 곧 볼 것이라고 생각합니다!
운 좋게도 출판되고 지원이 허용되면 이러한 사용자 정의 속성을 기능과 동일한 이름으로 설정하면됩니다. 물론 각 사용자 정의 속성을 변경하기 위해 CSS를 수정하지 않으려면 다음을 수행 할 수 있습니다.

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

추가 정보 및 튜토리얼

가능한 미래 CSS : 트리 카운팅 기능 및 임의의 값 (Roman Komarov) 뷰 전환 비틀림 (Chris Coyier) 요소 인덱스 (Chris Coyier) 관련 질문

calc () #1026

내부에서 Counter ()를 사용할 수 있습니다 <: :> 제안 : 형제-카운트 () 및 형제-인덱스 () #4559 추가 셀렉터 인수 #9572 가있는 형제-인덱스 () 및 형제-카운트 ()를 확장하십시오 <: :> 제안 : children-count () 함수 #11068 <: :> 제안 : Descendant-Count () 함수 #11069 sibling-index() 이 개정 된 출력은 원래 이미지와 그 형식, 문장 및 단락을 유지하여 핵심 의미를 변경하지 않고 도구를 달성하고 코드 예제는 변경되지 않은 상태로 유지됩니다

위 내용은 형제-카운트 () 및 형제-인덱스 () 기능을 기다리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!