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

Stephen Chenney

게시일: 2024년 10월 8일

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

선택 영역 스타일 지정

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

CSS는 ::selection pseudo-element는 의사 요소 강조표시 이러한 의사 요소는 텍스트가 다양한 사용자에게 표시되는 방식을 제어합니다. 브라우저 또는 스크립트 기반 작업이 포함됩니다. 선택하는 것 외에도 맞춤법 스타일을 지정하여 오류 (::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 이하에서는 이 모델을 사용합니다. .blue::selection 때문에 강조된 텍스트에 일치하는 ::selection이(가) 없습니다. <em> 요소에 없는 "blue" 클래스가 있는 요소만 일치합니다.

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

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

선택 항목의 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에서 모두 선택했을 때 나타나는 결과입니다. (이후):

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

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 스타일도 변경됩니다.

여기에 설명된 모든 동작과 변경사항은 ::target-text에 적용됩니다. pseudo-element를 ::selection과 같이 사용합니다. 단일 사이트에서 두 개 이상의 타겟 텍스트 스타일을 사용하는 사용 사례는 제한적이며 이 기능은 매우 새롭기 때문에 사이트의 ::target-text 동작이 변경될 가능성은 거의 없습니다.

변경되는 이유는 무엇인가요?

다른 강조 표시 의사 요소가 개발 중일 때 CSS Working은 그룹은 하이라이트 상속 모델로 상속을 구현하기로 결정했습니다. 이미 ::selection 사양의 메서드였습니다. pseudo-element를 사용하지만 브라우저에서는 구현하지 않았습니다. 선택 해제 의사 요소는 유사 요소가 상속되는 하이라이트 상속을 사용합니다. 속성인 것처럼 말이죠 즉, 요소가 강조표시를 상속합니다. pseudo-elements를 제거합니다.

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

사용해 보기

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