CSS 선택 스타일 지정의 상속 변경사항

Stephen Chenney

게시일: 2024년 10월 8일

Chrome 131부터 ::selection 및 ::target-text 의사 클래스의 CSS 강조 표시 상속이 변경됩니다. 이는 상속을 위한 더 직관적인 모델을 만들고 최근에 추가된 ::highlight, ::spelling-error, ::grammar-error 가상 클래스와 일치시키기 위한 것입니다. 이 게시물에서는 대부분의 사이트에 눈에 띄는 영향을 미치지 않는 변경사항을 설명합니다.

선택 항목 스타일 지정

선택한 텍스트의 모양에 스타일을 지정하면 선택한 콘텐츠의 목적이나 텍스트를 전혀 선택할 수 없는 경우와 같은 의미를 사용자에게 전달할 수 있습니다. 예를 들어 GitHub에서는 선택한 코드의 색상을 선택한 디렉터리 구조와 다르게 지정합니다.

CSS는 강조 표시 가상 요소라고 하는 가상 요소 집합 중 하나인 ::selection 가상 요소를 사용하여 선택 스타일 지정을 지원합니다. 이러한 가상 요소는 다양한 사용자, 브라우저 또는 스크립트 기반 작업에서 텍스트가 표시되는 방식을 제어합니다. 선택 외에도 맞춤법 오류 (::spelling-error), 문법 오류 (::grammar-error), URL 삽입 텍스트 타겟 (::target-text), 스크립트 생성 강조 표시 (::highlight)의 스타일을 지정할 수 있습니다.

다른 CSS 속성 모음과 마찬가지로 상속 동작은 사이트를 디자인할 때 중요한 고려사항입니다. 일반적으로 개발자는 CSS 속성이 DOM 요소 트리를 통해 상속되거나 (예: font) 전혀 상속되지 않을 것으로 예상합니다 (예: background).

Chrome 131의 선택 동작 변경사항

다음 문서 프래그먼트를 살펴보세요.

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

프래그먼트의 스타일 선언은 선택된 텍스트의 색상을 수정합니다. 하나의 규칙은 모든 요소와 일치하는 규칙과 일치하는 규칙이 있고 다른 하나는 "blue" 클래스와 일치하는 규칙이 있습니다. Chrome 130 이하에서 선택하면 다음과 같은 결과가 표시됩니다.

Chrome 131에서 선택하면 결과가 다음과 같이 변경됩니다.

어떻게 달라졌을까요? 선택 속성의 상속 동작은 이전에는 시작 요소 상속을 통해 구현되었습니다. 여기서 선택은 선택되는 요소와 일치하는 ::selection의 속성을 사용합니다. Chrome 버전 130 이하에서는 이 모델을 사용합니다. 여기서 강조된 텍스트에는 일치하는 ::selection가 없습니다. .blue::selection는 <em> 요소에 없는 "blue" 클래스가 있는 요소에만 일치하기 때문입니다.

Chrome 131에서는 요소가 상위 요소에서 선택 동작을 상속하는 새로운 동작을 사용 설정합니다. 위 예에서 <em> 요소에는 자신과 일치하는 ::selection가 없으므로 <p> 요소의 선택 색상을 상속합니다. 이를 CSS 강조 표시 상속이라고 하며 chrome://flags에서 실험용 웹 플랫폼 기능을 사용 설정하여 이전 Chrome 버전에서 사용해 볼 수 있습니다.

상속되지 않는 선택 속성을 사용하는 사이트에서는 선택한 텍스트의 모양이 변경될 수 있지만 버그 신고의 증거에 따르면 이러한 동작의 사용 사례는 거의 없습니다.

선택 항목의 CSS 맞춤 속성이 계속 작동합니다.

많은 사이트에서 CSS 맞춤 속성을 사용하여 CSS 강조 표시 상속을 시뮬레이션합니다. 맞춤 속성은 요소 트리를 통해 상속되며, 다음과 같은 코드 스니펫과 함께 '상위 요소에서 상속' 결과를 제공합니다.

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

Chrome 130과 131에서 모두 선택한 경우의 결과는 다음과 같습니다.

여기서 모든 요소는 요소 트리를 통해 --selection-color 속성의 일부 값을 상속하며, 이 색상은 텍스트가 선택될 때 사용됩니다. .blue 클래스의 요소와 그 하위 요소는 선택 시 파란색으로 표시되고 다른 요소는 연두색으로 표시됩니다. 많은 사이트에서 이 기법을 사용하며 Stack Overflow에서 권장하는 방법입니다.

호환성을 유지하기 위해 CSS 강조 표시 상속 모델은 ::selection (및 기타 CSS 강조 표시 유사 요소)가 원래 요소 (적용되는 요소)에서 맞춤 속성 값을 상속하도록 지정합니다. 이 방법을 사용하는 사이트는 Chrome 131의 변경사항의 영향을 받지 않습니다.

::selection 의사 요소 자체에 정의된 커스텀 속성은 경쟁 상속 동작을 방지하기 위해 무시됩니다. 요소 자체에서 속성을 정의한 다음 가상 요소에서 참조해야 합니다.

::selection의 범용 선택기가 하이라이트 상속을 사용 중지함

CSS 맞춤 속성을 사용하지 않는 사이트에서는 범용 선택기를 사용하여 선택한 텍스트 색상을 설정했을 수 있습니다. 다음 CSS와 같이

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

다음은 Chrome 130 이하와 Chrome 131 이상에서 선택한 결과입니다.

범용 선택기가 <em> 요소와 일치하고 전체 강조 색상인 연한 녹색을 적용하기 때문에 CSS 하이라이트 상속으로 인해 두 번째로 강조된 텍스트가 상위 요소에서 파란색을 상속하지 않습니다.

CSS 강조 표시 상속의 이점을 활용하려면 범용 선택기를 루트에만 일치하도록 변경합니다. 그러면 상속자가 상속합니다.

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Chrome 131의 결과는 다음과 같습니다.

사이트에서 선택 색상을 수정하지만 맞춤 속성을 사용하지 않는 경우 ::selection 가상의 보편 선택기가 있을 수 있습니다. 다행히 Chrome의 이번 변경사항으로 인해 사이트가 중단되지는 않지만 강조 표시 상속의 인체공학적 이점은 누릴 수 없습니다.

::target-text 스타일도 변경됩니다.

여기에 설명된 모든 동작과 변경사항은 ::selection에 적용되는 것처럼 ::target-text 가상 요소에도 적용됩니다. 단일 사이트에서 두 개 이상의 타겟 텍스트 스타일을 지정하는 사용 사례는 제한되어 있으며, 이 기능은 완전히 새로운 기능이므로 사이트에서 ::target-text 동작을 변경할 가능성이 매우 작습니다.

변경되는 이유

다른 강조 표시 가상 요소가 개발 중일 때 CSS 작업 그룹은 강조 표시 상속 모델로 상속을 구현하기로 결정했습니다. 이는 이미 ::selection 가상 요소 사양에 있는 메서드였지만 브라우저에서 구현하지 않았습니다. 선택 외의 가상 요소는 가상 요소가 속성인 것처럼 상속되는 강조 표시 상속을 사용합니다. 즉, 요소는 문서 상위 요소에서 강조 표시 가상 요소를 상속합니다.

모든 강조 표시 의사에 일관성을 유지하기 위해 CSS 작업 그룹은 ::selection의 강조 표시 상속 지원을 다시 강조했으며 브라우저는 기존 사이트를 중단시키지 않으면서 새로운 동작을 출시하기 위해 노력하고 있습니다.

사용해 보기

다음 CodePen은 변경사항을 보여줍니다. Chrome 131에서 사용해 보세요.