Custom Highlight API (::highlight()) + ::target-text

Custom Highlights Baseline 2025 (Chrome 105, Safari 17.2, Firefox 140). `::target-text` Baseline 2025 (Chrome 89, Safari 18.2, Firefox 131).

Chrome 105Edge 105Safari 17.2Firefox 140

Style beliebige Textbereiche (Suchtreffer, Rechtschreibprüfung, Code-Tokens), ohne sie in Spans zu wickeln, über JS-`Highlight`-Objekte und CSS `::highlight(name)`. `::target-text` stylt den Text, zu dem eine Scroll-to-Text-Fragment-URL (`#:~:text=`) gesprungen ist.

Type-safe highlights work without changing the DOM. Highlights are cheap and fast.

CSS

.fx-026 {
  font-family: system-ui
}
::highlight(fx-026-match) {
  background: #fde68a;
  color: #111;
  text-decoration: underline wavy #d97706
}
::target-text {
  background: #bfdbfe
}

HTML

<p class="fx-026">Type-safe highlights work without changing the DOM. Highlights are cheap and fast.</p>
<script>
  const p=document.querySelector('.fx-026');const t=p.firstChild;const ranges=[];
  const re=/highlights?/gi;let m;while((m=re.exec(t.data))){const r=new Range();r.setStart(t,m.index);r.setEnd(t,m.index+m[0].length);ranges.push(r)}
  if(window.Highlight){CSS.highlights.set('fx-026-match',new Highlight(...ranges))}
</script>

Fallback: Prüfe per Feature-Detection auf `window.Highlight`; falle auf das Wickeln der Treffer in `<mark>` zurück, wenn du ältere Engines unterstützen musst.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Custom_highlight_API

Prompt

Injiziere für Suchergebnis- oder Syntax-Highlighting keine `<span>`-Wrapper. Baue `Range`-Objekte für die Treffer, registriere `CSS.highlights.set('name', new Highlight(...ranges))` und style mit `::highlight(name)` (erlaubt sind nur color, background, text-decoration und text-shadow). Style auch `::target-text`, damit Text-Fragment-Deeplinks zeigen, wo sie gelandet sind.