::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() で利用できます。
colorbackground-colortext-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">CSS カスタムハイライト 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); } // テキストを 1 文字ずつ反復処理 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 |
| CSS Pseudo-Elements Module Level 4 # selectordef-highlight-custom-ident |
ブラウザーの互換性
Loading…