CSS가 울타리를 쳤다. 이제 어느 이웃이 가까운지 따져야 했다.

요약

• 2021년 12월 CSS Cascade Level 6 첫 공개 초안은 @scope와 범위 뿌리의 근접성을 제안했다. 당시에는 뿌리 선택자의 명시도가 내부 규칙에도 더해졌다.
• 2023년과 2024년 초안은 그 덤을 없앴다. 뿌리는 범위를 정하고, 내부 선택자는 자기 명시도만 가지며, 가까운 뿌리는 계단식 규칙의 정해진 단계에서 영향을 준다.

안쪽 버튼을 산호색으로 지키는 방법은 많다. 조상 이름을 길게 늘어놓아 주소를 만들면 카드를 옮길 때마다 주소가 낡는다. 컴포넌트 도구는 각 요소에 고유한 속성을 찍고 모든 선택자에 그 속성을 붙이기도 한다. 페인트가 다른 방으로 새지 않는 대신 화분까지 출입증을 달고 사는 꼴이다. 브라우저는 이미 요소의 나무 구조를 알고 있다. 방의 문에만 표지를 달고 그 안을 알아보게 하는 편이 자연스럽다.

2021년 12월 21일 W3C 첫 공개 초안은 바로 그 data-scope 표지가 여기저기 붙은 예를 보여 주며 @scope를 제안했다. 작성자는 시작 뿌리와 필요한 경우 아래쪽 한계를 정하고, 그 안에 보통의 스타일 규칙을 쓴다. 초안은 충돌한 규칙의 뿌리 중 어느 쪽이 더 가까운지도 논의했다. 브라우저가 요소 나무에서 걸음 수를 세면 된다. 각 팀이 선택자 길이로 거리를 표현할 필요가 없다.

초기의 문패는 뜻밖에 계급장도 나눠 줬다. 2021년 모델에서는 뿌리 선택자의 명시도가 내부 규칙에 더해졌다. @scope (#hero) 안의 평범한 img 규칙도 ID의 무게를 받아 갔다. 담장을 세웠더니 방 안의 가구가 전부 특별 대우를 얻은 것이다. 근접성을 명시도보다 얼마나 강하게 둘지도 논의 중이었다. 같은 @scope 문법을 보더라도 초안의 날짜를 확인해야 하는 이유다.

2023년 3월 21일 초안에서는 이 자동 승급이 사라졌다. 문서는 @scope (#hero) { img { ... } }와 :where(#hero) img { ... }의 명시도를 모두 (0,0,1)로 계산한다. #hero는 범위의 출발점을 알려 주고, 점수는 안쪽의 img가 가져간다. 정확한 문패가 실내 규칙 모두를 강한 경쟁자로 만들지는 않는다. 작은 카드 작성자는 자기 버튼의 색을 정할 여지가 생긴다.

to (...)는 바깥 범위가 안쪽 영역 앞에서 멈출 선을 그린다. 파란 페인트 롤러가 문턱에서 멈추고 산호색 붓이 일을 시작한다. 범위들이 겹쳐 같은 요소에 규칙을 보낼 때는, 계단식 우선순위의 해당 단계에서 뿌리와의 거리가 쓰인다. 화면 속 거리나 클래스 이름 길이가 아니라 요소 나무의 단계 수다. 가까운 규칙이 모든 층과 중요도를 뛰어넘는 특권을 얻는 것은 아니다.

2024년 9월 6일 초안은 아래쪽 한계에 해당하는 요소 자체가 범위 밖에 놓인다고 설명하고, 근접성을 한 뿌리에서 대상 요소까지의 단일 측정으로 정리했다. 변경 기록에는 강한 근접성 방안을 없애고 뿌리 명시도 추가를 제거한 과정이 남아 있다. 또 @scope 안에 적힌 @keyframes, @font-face, @layer 같은 이름 정의 규칙은 여전히 전역에서 통한다. 그 안의 스타일 규칙은 범위 제한을 받을 수 있지만 CSS 이름 전체가 독립된 나라로 갈라지는 것은 아니다.

W3C 발행 연혁은 2021년, 2023년, 2024년의 문서 날짜를 확인해 주고, CSS 작업 그룹의 2024년 소식은 @scope를 이 단계의 새로운 작업으로 소개한다. 핵심은 울타리를 쳤다는 사실보다 울타리에 딸린 불필요한 힘을 빼낸 과정이다. 큰 카드는 파란 버튼을 유지한다. 작은 카드는 자기 버튼을 산호색으로 칠한다. 문패 하나면 충분하다.