운 좋게도 올해 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 개의 부울 속성을 통해 관찰하려는 것을 정의하는 구성 객체 : , . 이 경우 의 변경 사항을 확인하려면 속성을 - : 로 설정합니다.
-
이것은 우리가해야 할 전부입니다! 이 방법을 사용하여
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)
관련 질문
