::highlight()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
::highlight()
CSS 의사 요소는 스타일에 사용자 정의 하이라이트를 적용합니다.
사용자 정의 하이라이트는 Range
객체의 집합이며 웹 페이지에 HighlightRegistry
를 사용하여 웹 페이지에 등록됩니다.
허용되는 속성
몇 개의 특정한 CSS 속성만이 ::highlight()
와 함께 사용될 수 있습니다.
color
background-color
text-decoration
와 이에 연관된 속성들text-shadow
-webkit-text-stroke-color
,-webkit-text-fill-color
와-webkit-text-stroke-width
부분적으로 background-image
는 무시됩니다.
구문
css
::highlight(custom-highlight-name)
예제
문자열에 하이라이트 적용하기
HTML
html
<p id="rainbow-text">사용자 정의 하이라이트 API 무지개</p>
CSS
css
#rainbow-text {
font-family: monospace;
font-size: 1.5rem;
}
::highlight(rainbow-color-1) {
color: #ad26ad;
text-decoration: underline;
}
::highlight(rainbow-color-2) {
color: #5d0a99;
text-decoration: underline;
}
::highlight(rainbow-color-3) {
color: #0000ff;
text-decoration: underline;
}
::highlight(rainbow-color-4) {
color: #07c607;
text-decoration: underline;
}
::highlight(rainbow-color-5) {
color: #b3b308;
text-decoration: underline;
}
::highlight(rainbow-color-6) {
color: #ffa500;
text-decoration: underline;
}
::highlight(rainbow-color-7) {
color: #ff0000;
text-decoration: underline;
}
JavaScript
js
const textNode = document.getElementById("rainbow-text").firstChild;
if (!CSS.highlights) {
textNode.textContent =
"이 브라우저에서는 CSS 사용자 정의 하이라이트 API가 지원되지 않습니다.";
}
// 무지개에 있는 각각의 색상을 생성하고 하이라이트를 등록합니다.
const highlights = [];
for (let i = 0; i < 7; i++) {
// 해당 색상에 대해 새로운 하이라이트를 생성합니다.
const colorHighlight = new Highlight();
highlights.push(colorHighlight);
// 사용자 정의 이름으로 이 하이라이트를 등록합니다.
CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}
// 텍스트를 문자 단위로 반복합니다.
for (let i = 0; i < textNode.textContent.length; i++) {
// 해당 문자에 대한 범위를 생성합니다.
const range = new Range();
range.setStart(textNode, i);
range.setEnd(textNode, i + 1);
// 범위를 다음 사용 가능한 하이라이트에 추가하고,
// 7번째에 도달하면 다시 첫번째로 돌아갑니다.
highlights[i % 7].add(range);
}
결과
명세서
Specification |
---|
CSS Custom Highlight API Module Level 1 # custom-highlight-pseudo |
브라우저 호환성
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.