Text-Styling mit der CSS Custom Highlight API

Die CSS Custom Highlight API löst ein grundlegendes Problem: Wie lassen sich Textbereiche programmatisch hervorheben, ohne das DOM mit Wrapper-Elementen zu überladen? Ob Sie Suchschnittstellen, Texteditoren oder Bildungsanwendungen entwickeln – diese API bietet einen saubereren und performanteren Ansatz als herkömmliche <mark>- oder span-basierte Methoden.

Was macht die CSS Custom Highlight API anders

Herkömmliche Text-Hervorhebung erfordert die Modifikation der DOM-Struktur. Die Verwendung von <mark>-Elementen oder Spans bedeutet das Einfügen von Knoten, das Auslösen von Layout-Neuberechnungen und die Verwaltung komplexer HTML-Strukturen, wenn Hervorhebungen mehrere Elemente umspannen. Die CSS Custom Highlight API eliminiert diese Probleme, indem sie mit JavaScript-Ranges und dem ::highlight-Pseudo-Element arbeitet und dabei Ihr DOM unberührt lässt.

Die API besteht aus drei Kernkomponenten:

• Range-Objekte, die Textgrenzen definieren
• Highlight-Objekte, die Ranges gruppieren
• CSS.highlights-Registry, die Hervorhebungen mit Styles verbindet

Erstellen und Stylen von Textbereichen

Ihre erste Hervorhebung erstellen

Beginnen Sie mit der Erstellung eines Range-Objekts, um zu definieren, welcher Text hervorgehoben werden soll:

const range = new Range();
const textNode = document.querySelector('p').firstChild;
range.setStart(textNode, 0);
range.setEnd(textNode, 20);

Als nächstes erstellen Sie ein Highlight-Objekt und registrieren es:

const highlight = new Highlight(range);
CSS.highlights.set('my-highlight', highlight);

Schließlich stylen Sie es mit dem ::highlight-Pseudo-Element:

::highlight(my-highlight) {
  background-color: yellow;
  color: black;
}

Implementierung der Suchergebnis-Hervorhebung

Hier ist ein praktisches Beispiel für die Hervorhebung von Suchergebnissen in Ihrem Dokument:

function highlightSearchResults(searchTerm) {
  // Bestehende Hervorhebungen löschen
  CSS.highlights.delete('search-results');
  
  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT
  );
  
  const ranges = [];
  let node;
  
  while (node = walker.nextNode()) {
    const text = node.textContent;
    const regex = new RegExp(searchTerm, 'gi');
    let match;
    
    while (match = regex.exec(text)) {
      const range = new Range();
      range.setStart(node, match.index);
      range.setEnd(node, match.index + searchTerm.length);
      ranges.push(range);
    }
  }
  
  if (ranges.length > 0) {
    const searchHighlight = new Highlight(...ranges);
    CSS.highlights.set('search-results', searchHighlight);
  }
}

Erweiterte Muster: Multi-Range-Hervorhebungen

Die wahre Stärke zeigt sich beim Arbeiten mit mehreren, nicht zusammenhängenden Textbereichen. Ein einzelnes Highlight-Objekt kann mehrere Range-Objekte enthalten:

// Mehrere separate Absätze hervorheben
const range1 = new Range();
range1.selectNodeContents(document.querySelector('#intro'));

const range2 = new Range();
range2.selectNodeContents(document.querySelector('#conclusion'));

const highlight = new Highlight(range1, range2);
CSS.highlights.set('important-sections', highlight);

Sie können auch mehrere Hervorhebungsgruppen gleichzeitig verwalten:

// Verschiedene Hervorhebungstypen mit unterschiedlichen Styles
CSS.highlights.set('errors', new Highlight(...errorRanges));
CSS.highlights.set('warnings', new Highlight(...warningRanges));
CSS.highlights.set('info', new Highlight(...infoRanges));

::highlight(errors) {
  background-color: #fee;
  text-decoration: wavy underline red;
}

::highlight(warnings) {
  background-color: #ffa;
}

::highlight(info) {
  background-color: #e6f3ff;
}

Performance-Vorteile und Browser-Unterstützung

Die CSS Custom Highlight API glänzt in performance-kritischen Szenarien. Im Gegensatz zur DOM-Manipulation lösen Hervorhebungen keine Layout-Neuberechnungen aus und erzeugen keinen Memory-Overhead durch zusätzliche Elemente. Die Rendering-Engine des Browsers behandelt Hervorhebungen auf der Paint-Ebene, wodurch Updates bemerkenswert schnell werden.

Stand 2025 unterstützen Chrome, Edge und Safari die API, während Firefox-Unterstützung in der Entwicklung ist. Für ältere Browser implementieren Sie einen Feature-Detection-Fallback:

if ('CSS' in window && 'highlights' in CSS) {
  // CSS Custom Highlight API verwenden
  const highlight = new Highlight(range);
  CSS.highlights.set('fallback-safe', highlight);
} else {
  // Fallback auf traditionellen Ansatz
  const span = document.createElement('span');
  span.className = 'highlight';
  range.surroundContents(span);
}

Praktische Implementierungstipps

Bei der Implementierung von Text-Hervorhebung in der Produktion:

1. Ungenutzte Hervorhebungen aufräumen, um Memory Leaks zu verhindern:

   CSS.highlights.delete('old-highlight');

2. Dynamische Inhalte handhaben, indem Ranges bei DOM-Änderungen aktualisiert werden:

   highlight.add(newRange);
   highlight.delete(oldRange);

3. Aussagekräftige Hervorhebungsnamen verwenden, die ihren Zweck beschreiben (z.B. ‘search-results’, ‘spell-check’, ‘user-annotations’)

Fazit

Die CSS Custom Highlight API transformiert unseren Ansatz zur Text-Hervorhebung im Web. Durch die Trennung der Hervorhebungslogik von der DOM-Struktur liefert sie bessere Performance, saubereren Code und mehr Flexibilität als traditionelle Methoden. Beginnen Sie mit dem Experimentieren von Textbereich-Hervorhebungen in Ihrem nächsten Projekt – Ihre Benutzer (und Ihr DOM) werden es Ihnen danken.

Häufig gestellte Fragen

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..