웹 텍스트 스타일은 항상 개발자의 초점이었습니다. 예상되는 것은 CSS Custom Highlight API의 출현으로 웹 텍스트 스코프 스타일에 혁명을 일으킬 것입니다.
예를 들어, Google 문서, Word 또는 Dropbox Paper와 같은 텍스트 편집 소프트웨어는 철자 및 문법 오류를 감지하고 아래의 물결 라인을 표시하여 사용자에게 프롬프트합니다. Code와 같은 코드 편집기는 코드 오류에 대해 유사한 방법을 사용합니다.
텍스트 강조 표시의 또 다른 일반적인 사용 사례는 입력 상자에 텍스트를 입력 할 때 검색 및 강조 표시 기능입니다. 이제 브라우저에서 Ctrl/⌘ f를 누르고이 기사에서 텍스트를 입력 할 수 있습니다.
브라우저는 일반적으로 이러한 스타일을 자동으로 처리합니다. 편집 가능한 지역 (예 : )는 틀린 물결 모양의 라인을 자동으로 표시합니다. 찾기 명령은 찾은 텍스트를 자동으로 강조합니다.
그러나 우리 가이 스타일을 스스로하고 싶다면 어떨까요? 웹 페이지에서 이것을 구현하는 방법은 오랫동안 일반적인 문제였으며 많은 사람들에게 많은 시간을 낭비 할 수 있습니다.
이것은 단순한 퍼즐이 아닙니다. 우리는 단지 수업을 사용하지 않습니다<span></span> 태그는 텍스트를 랩하고 일부 CSS를 적용합니다. 실제로,이를 위해서는 복잡한 DOM 트리와 DOM 요소의 경계에 걸쳐 여러 텍스트 범위를 올바르게 강조하는 기능이 필요합니다.
이 문제를 해결하는 두 가지 일반적인 방법이 있습니다.
먼저 두 가지 접근 방식을 모두 검토 한 다음 다가오는 CSS 사용자 정의가 API를 강조하는 방법을 살펴 보겠습니다.
가장 유명한 양의 양식화 가능한 텍스트 범위는 사용자 선택 일 수 있습니다. 장치를 가리키면 웹 페이지에서 텍스트를 선택하면 선택 객체가 자동으로 생성됩니다. 실제로 이제이 페이지에서 텍스트를 선택한 다음 DevTools 콘솔에서 document.getSelection() 을 실행하십시오. 선택한 텍스트의 위치 정보가 표시되어야합니다.
JavaScript를 통해 프로그래밍 방식으로 텍스트 선택을 할 수도 있습니다. 예는 다음과 같습니다.
// 먼저, 범위 객체를 만듭니다. const 범위 = 새로운 범위 (); // 시작 및 종료 위치를 설정합니다. Range.setStart (ParentNode, TartoffSet); Range.Setend (ParentNode, Endoffset); // 그런 다음 현재 선택을이 범위로 설정하십시오. document.getSelection (). removealLranges (); document.getSelection (). addRange (범위);
퍼즐의 마지막 부분은이 범위를 스타일링하는 것입니다. CSS에는 다음을 수행하는 ::selection 이라는 의사 요소가 있으며 모든 브라우저에서 지원됩니다.
:: 선택 {
배경색 : #f06;
색상 : 흰색;
}다음은이 기술을 사용하여 페이지의 모든 단어를 강조하는 예입니다.
::selection 의사 요소 외에도 다른 많은 의사 요소가 있습니다.
::target-text 브라우저에서 스크롤 된 텍스트 (텍스트 기능 스크롤을 지원하는 브라우저)를 선택합니다. (MDN)::spelling-error 오타가 포함 된 브라우저로 표시된 텍스트를 선택하십시오. (MDN)::grammar-error 브라우저에서 표시된 텍스트를 구문 오류로 포함하여 선택하십시오. (MDN)불행히도, 여기서 브라우저 지원은 그다지 좋지 않으며, 이러한 스코프 자체가 유용하지만 사용자 정의 텍스트 스 니펫 스타일을 사용하는 데 사용할 수 없습니다. 브라우저에서 사전 정의 된 텍스트 스 니펫 만 있습니다.
따라서 사용자 텍스트 선택은 구현하기가 상대적으로 쉽고 페이지의 DOM을 변경하지 않기 때문에 좋습니다. 실제로, 범위 객체는 본질적으로 존재하기 위해 생성 해야하는 HTML 요소가 아니라 페이지의 단락의 좌표입니다.
그러나 한 가지 주요 단점은 사용자가 수동으로 선택한 모든 것을 선택하는 것입니다. 위의 데모에서 텍스트를 선택하여 테스트하십시오. 코드가 선택을 다른 위치로 이동하면 사라집니다.
귀하의 요구에 맞는 선택 개체를 사용하지 않는 경우 두 번째 솔루션이 거의 유일한 옵션입니다. 이 솔루션은 JavaScript를 사용하여 하이라이트가 나타나는 새로운 HTML 요소를 삽입하여 모든 것을 직접 수행하는 것을 중심으로합니다.
불행히도 이것은 하이라이트 변경이 이루어질 때마다 브라우저가 페이지의 레이아웃을 재현하도록 강요하는 것은 말할 것도없이, 더 많은 JavaScript 코드를 작성하고 유지해야한다는 것을 의미합니다. 또한 여러 DOM 요소에 걸쳐있는 텍스트 조각을 강조하려는 경우와 같은 복잡한 에지 케이스가 있습니다.
흥미롭게도 Codemirror와 Monaco (대 코드를 지원하는 JavaScript 텍스트 편집기 라이브러리)에는 자체 강조 논리가 있습니다. 그들은 약간 다른 접근법을 사용하며, 여기서 강조 표시는 DOM 트리의 별도 부분에 포함됩니다. 텍스트 라인과 강조 표시된 단락은 DOM의 두 개의 다른 위치에서 렌더링 된 다음 서로 배치됩니다. 텍스트가 포함 된 DOM 하위 트리를 확인하면 강조 표시되지 않습니다. 이러한 방식으로, 텍스트 라인에 영향을 미치지 않고 강조 표시를 다시 렌더링 할 수 있으며 텍스트 라인에 새로운 요소를 도입 할 필요가 없습니다.
전반적으로 브라우저 지원 하이라이트 기능이 누락 된 것 같습니다. 일부 기능은 이러한 모든 단점을 해결하는 데 도움이 될 수 있으며 (사용자 텍스트 선택을 방해하지 않고, 여러 선택에 대한 지원, 간단한 코드) 사용자 정의 솔루션보다 빠릅니다.
다행히도, 그것이 우리가 여기서 논의 할 것입니다!
CSS 사용자 정의 하이라이트 API는 자바 스크립트에서 임의의 텍스트 범위를 스타일로 만들 수있는 새로운 W3C 사양 (현재 작업 초안 상태)입니다. 여기의 방법은 앞에서 검토 한 사용자 텍스트 선택 기술과 매우 유사합니다. 개발자에게 자바 스크립트에서 임의의 스코프를 생성 한 다음 CSS를 사용하여 스타일을 지정할 수있는 방법을 제공합니다.
첫 번째 단계는 강조 표시 할 텍스트 범위를 만들고 JavaScript의 범위를 사용하여 수행 할 수있는 것입니다. 따라서 현재 선택을 설정할 때와 마찬가지로 다음과 같습니다.
const 범위 = 새로운 범위 (); Range.setStart (ParentNode, TartoffSet); Range.Setend (ParentNode, Endoffset);
노드가 첫 번째 매개 변수로 전달 된 경우 텍스트 노드이거나 텍스트 노드가 아닌 경우 setStart 및 setEnd 메소드가 다르게 작동한다는 점에 주목할 가치가 있습니다. 텍스트 노드의 경우 오프셋은 노드의 문자 수에 해당합니다. 다른 노드의 경우 오프셋은 부모 노드의 어린이 수에 해당합니다.
또한 setStart 및 setEnd 이 범위의 시작 및 종료 위치를 설명하는 유일한 방법은 아니라는 점도 주목할 가치가 있습니다. 다른 옵션을 보려면 범위 클래스에서 사용 가능한 다른 방법을 확인하십시오.
두 번째 단계는 이전 단계에서 생성 된 범위에 대한 하이라이트 객체를 만드는 것입니다. 하이라이트 객체는 하나 이상의 범위를받을 수 있습니다. 따라서 많은 텍스트 스 니펫을 똑같은 방식으로 강조하려면 하이라이트 객체를 만들고 해당 텍스트 스 니펫에 해당하는 모든 범위로 초기화해야합니다.
const 하이라이트 = 새로운 하이라이트 (Range1, Range2, ..., Rangen);
그러나 원하는만큼의 강조 표시 객체를 만들 수도 있습니다. 예를 들어, 각 사용자가 다른 텍스트 색상을 얻는 공동 작업 텍스트 편집기를 구축하는 경우 각 사용자의 하이라이트 객체를 만들 수 있습니다. 다음에 볼 수 있듯이 각 객체는 다르게 스타일을 지정할 수 있습니다.
이제 하이라이트 객체 자체는 아무것도하지 않습니다. 그들은 먼저 소위 하이라이트 레지스트리에 등록되어야합니다. 이것은 CSS 하이라이트 API를 사용하여 수행됩니다. 레지스트리는 하이라이트 이름을 지정하여 새로운 하이라이트를 등록하고 하이라이트를 삭제하거나 전체 레지스트리를 지우는지도와 같습니다.
다음은 단일 하이라이트를 등록하는 방법입니다.
css.highlights.set ( 'My-Custom-Highlight', 하이라이트);
my-custom-highlight 선택한 이름이며 highlight 이전 단계에서 생성 된 하이라이트 객체입니다.
마지막 단계는 실제로 등록 된 하이라이트를 스타일링하는 것입니다. 이것은 하이라이트 객체를 등록 할 때 선택한 이름을 사용하여 새로운 CSS ::highlight() 의사 요소로 수행됩니다 (예에서는 my-custom-highlight ).
:: 하이라이트 (My-Custom-Highlight) {
배경색 : 노란색;
색상 : 검은 색;
} ::selection , css 속성의 일부만을 ::highlight() pseudo element와 함께 사용할 수 있다는 점에 주목할 가치가 있습니다.
background-color
caret-color
color
cursor
fill
stroke
stroke-width
text-decoration (이것은 사양의 버전 2에서만 지원 될 수 있음)text-shadow
페이지에서 강조 표시된 텍스트를 업데이트하는 몇 가지 방법이 있습니다.
예를 들어 CSS.highlights.clear() 사용하여 하이라이트 레지스트리를 완전히 지우고 처음부터 시작할 수 있습니다. 또는 객체를 재현하지 않고 기본 범위를 업데이트 할 수도 있습니다. 이렇게하려면 range.setStart 및 range.setEnd 메소드 (또는 기타 범위 메소드)를 다시 사용하면 브라우저가 하이라이트를 다시 칠합니다.
그러나 하이라이트 객체는 JavaScript 세트와 유사하게 작동하므로 highlight.add(newRange) 사용하여 기존 하이라이트에 새 범위 객체를 추가하거나 highlight.delete(existingRange) 사용하여 범위를 삭제할 수도 있습니다.
셋째, CSS.HighLights 레지스트리에 특정 하이라이트 객체를 추가하거나 삭제할 수도 있습니다. 이 API는 JavaScript 맵과 유사하게 작동하므로 set 및 delete 사용하여 현재 등록 된 하이라이트를 업데이트 할 수 있습니다.
CSS 사용자 정의 하이라이트 API의 사양은 비교적 새롭고 브라우저에서의 구현은 여전히 불완전합니다. 따라서 이것은 웹 플랫폼에 매우 유용한 추가가 될 것이지만 아직 생산 환경에 적합하지 않습니다.
Microsoft Edge 팀은 현재 Chromium에서 CSS Custom Highlight API를 구현하고 있습니다. 실제로이 기능은 실험 웹 플랫폼 기능 플래그 (About : Flags)를 활성화하여 카나리아 버전에서 사용할 수 있습니다. Chrome, Edge 및 기타 크롬 기반 브라우저에서 기능이 언제 출시 될지 명확한 계획은 없지만 이미 매우 가깝습니다.
Safari 99는 또한이 API를 지원하지만 실험 플래그 (개발 → 실험 기능 → 하이라이트 API) 후에는 범위 객체 대신 정적 객체를 사용하기 때문에 인터페이스가 약간 다릅니다.
Firefox는 아직이 API를 지원하지는 않지만 자세한 내용은이 API에서 Mozilla의 위치를 읽을 수 있습니다.
Microsoft Edge에 대해 말하면 CSS Custom Highlight API를 시험해 볼 수있는 데모를 설정했습니다. 그러나 데모를 시도하기 전에 실험 웹 플랫폼 기능 플래그와 함께 Chrome 또는 Edge Canary를 사용하고 있는지 Affice : Flags 페이지에서 사용하고 있는지 확인하십시오.
/버튼 데모를 봅니다
이 데모는 사용자 정의 하이라이트 API를 사용하여 페이지 상단의 검색 필드에서 입력 한 내용을 기반으로 페이지의 텍스트 범위를 강조 표시합니다.
페이지가로드되면 JavaScript 코드는 페이지의 모든 텍스트 노드 (Treewalker 사용)를 검색하고 사용자가 검색 필드에서 무언가를 입력하면 일치가 발견 될 때까지 코드가 이러한 노드를 반복합니다. 그런 다음이 일치를 사용하여 범위 객체를 생성하고 사용자 정의 하이라이트 API를 사용하여 강조 표시하십시오.
그렇다면이 새로운 브라우저에서 제공하는 강조 표시 API가 실제로 그만한 가치가 있습니까? 확실히 그만한 가치가 있습니다!
먼저 CSS 사용자 정의 하이라이트 API가 처음에는 약간 복잡해 보이지만 (예 : 스코프를 만들고 강조한 다음 등록한 다음 마지막으로 스타일링해야 함) 새로운 DOM 요소를 작성하고 올바른 위치에 삽입하는 것보다 훨씬 간단합니다.
더 중요한 것은 브라우저 엔진이 이러한 범위를 매우 빠르게 스타일링 할 수 있다는 것입니다.
그 이유는 ::highlight() CSS 속성의 일부를 다음과 같이 사용할 수있게합니다. 엔진은 텍스트 범위를 강조하기 위해 페이지 주변에 새로운 DOM 요소를 삽입하여 더 많은 작업을 수행해야합니다.
그러나 나를 믿지 마십시오. Fernando Fiori는 API의 개발에 관여 했으며이 멋진 성능 비교 데모를 만들었습니다. 내 컴퓨터에서 CSS 사용자 정의 하이라이트 API의 성능은 DOM 기반 하이라이트보다 평균 5 배 빠릅니다.
Chromium과 Safari는 이미 실험적 지원을 제공함에 따라 생산 환경에서 사용할 수있는 것에 더 가까워지고 있습니다. 브라우저가 Custom Highlight API를 지속적으로 지원하고 이것이 어떤 기능을 잠금 해제하는지 기다릴 수 없습니다!
위 내용은 CSS 사용자 정의 하이라이트 API : 첫 번째 모양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
