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

Estilize intervalos arbitrários de texto (resultados de busca, correção ortográfica, tokens de código) sem envolvê-los em spans, via objetos `Highlight` em JS e `::highlight(name)` em CSS. `::target-text` estiliza o texto para onde uma URL de scroll-to-text-fragment (`#:~:text=`) pulou.

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: Detecte `window.Highlight`; caia para envolver os resultados em `<mark>` se precisar suportar engines mais antigas.

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

Prompt

Para destaque de resultados de busca ou sintaxe, não injete wrappers `<span>`. Construa objetos `Range` para os resultados, registre `CSS.highlights.set('name', new Highlight(...ranges))`, e estilize com `::highlight(name)` (só color, background, text-decoration e text-shadow são permitidos). Estilize também `::target-text` para deep links de text fragment mostrarem onde caíram.