CSS Custom Highlight API: Multi-Range-Textauswahl für dynamische UIs meistern

Die CSS Custom Highlight API ist ein leistungsstarkes neues Tool für Webentwickler, das eine beispiellose Kontrolle über die Textauswahl und -hervorhebung innerhalb von Webanwendungen ermöglicht. Im Gegensatz zu den grundlegenden Browserauswahlfunktionen ermöglicht diese API Entwicklern, benutzerdefinierte Hervorhebungsstile zu definieren und mehrere Auswahlbereiche programmgesteuert zu verwalten. Dies eröffnet eine Welt von Möglichkeiten zur Erstellung reichhaltiger, interaktiver und barrierefreier Benutzeroberflächen. Dieser Leitfaden bietet einen umfassenden Überblick über die API und untersucht ihre Fähigkeiten, Anwendungsfälle und Implementierungsdetails, und zwar aus einer globalen Perspektive.

Grundlagen der CSS Custom Highlight API verstehen

Bevor Sie in komplexe Szenarien eintauchen, ist es wichtig, die grundlegenden Konzepte der API zu verstehen. Im Kern führt die CSS Custom Highlight API mehrere neue CSS-Pseudo-Elemente ein, darunter:

• ::selection: Repräsentiert den Teil eines Dokuments, der vom Benutzer ausgewählt wurde. Dies ist schon lange verfügbar und ermöglicht eine grundlegende Gestaltung von Textauswahlen.
• ::highlight: Ein allgemeineres Pseudo-Element zum Anwenden von Stilen auf hervorgehobene Bereiche. Dies ist der Schlüssel zur Leistungsfähigkeit der neuen API. Sie können jetzt benannte Hervorhebungen erstellen und jedem benutzerdefinierte Stile zuweisen.
• ::target-text: Repräsentiert den Teil eines Dokuments, der durch ein URI-Fragment (z. B. #section-title) adressiert wird. Es ermöglicht Ihnen, den Abschnitt der Seite zu gestalten, zu dem der Benutzer über einen Link gescrollt ist.
• ::spelling-error: Repräsentiert Text, der vom User Agent als Rechtschreibfehler identifiziert wird. Bietet Stilkontrolle über Rechtschreibfehlerindikatoren.
• ::grammar-error: Repräsentiert Text, der vom User Agent als grammatikalische Fehler identifiziert wird. Bietet Stilkontrolle über Grammatikfehlerindikatoren.

Das Pseudo-Element ::highlight ist das Arbeitstier der API. Es ermöglicht Ihnen, benannte Hervorhebungen in CSS zu definieren und diese dann mit JavaScript auf bestimmte Textbereiche anzuwenden.

Schlüsselkonzepte: Bereiche und Hervorhebungen

Die API dreht sich um die Konzepte von Bereichen und Hervorhebungen:

• Bereich: Ein zusammenhängender Textabschnitt innerhalb des Dokuments. Dargestellt durch das Range-Objekt in JavaScript.
• Hervorhebung: Ein benannter Stil, der auf einen oder mehrere Bereiche angewendet wird. Definiert in CSS mit dem Pseudo-Element ::highlight(highlight-name) und manipuliert über die Highlight- und HighlightRegistry-APIs in JavaScript.

Stellen Sie es sich so vor: Ein Bereich ist das "Was" (der Text, den Sie hervorheben möchten), und die Hervorhebung ist das "Wie" (der Stil, den Sie anwenden möchten).

Benutzerdefinierte Hervorhebungen mit CSS einrichten

Der erste Schritt ist die Definition Ihrer benutzerdefinierten Hervorhebungsstile in CSS. Dies erfolgt über das Pseudo-Element ::highlight().

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

::highlight(important-term) {
  background-color: lightblue;
  font-weight: bold;
}

            

              
                Copy
              
            
          

In diesem Beispiel haben wir zwei benutzerdefinierte Hervorhebungsstile definiert: search-result und important-term. Die Hervorhebung search-result wendet einen gelben Hintergrund mit schwarzem Text an, während die Hervorhebung important-term einen hellblauen Hintergrund verwendet und den Text fett darstellt. Sie können beliebige CSS-Eigenschaften innerhalb dieser Hervorhebungsstile definieren.

Hervorhebungen mit JavaScript verwalten

Sobald Sie Ihre Hervorhebungsstile in CSS definiert haben, können Sie JavaScript verwenden, um sie auf bestimmte Textbereiche anzuwenden. Die Highlight- und HighlightRegistry-APIs stellen die Werkzeuge dafür bereit.

Die HighlightRegistry

Die HighlightRegistry ist ein globales Objekt, das alle Hervorhebungen im Dokument verwaltet. Sie können über die CSS-Schnittstelle darauf zugreifen:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Hervorhebungen erstellen

Um eine Hervorhebung zu erstellen, verwenden Sie den Highlight-Konstruktor:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Anfangs sind einer Hervorhebung keine Bereiche zugeordnet. Sie müssen der Hervorhebung Bereiche mit der Methode addRange() hinzufügen.

Bereiche zu einer Hervorhebung hinzufügen

Um einer Hervorhebung einen Bereich hinzuzufügen, müssen Sie zuerst ein Range-Objekt erstellen. Dies können Sie mit der Methode document.createRange() tun:

            
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

highlight.addRange(range);

            

              
                Copy
              
            
          

Wobei:

• startNode: Der DOM-Knoten, an dem der Bereich beginnt.
• startOffset: Der Zeichen-Offset innerhalb des startNode, an dem der Bereich beginnt.
• endNode: Der DOM-Knoten, an dem der Bereich endet.
• endOffset: Der Zeichen-Offset innerhalb des endNode, an dem der Bereich endet.

Beispiel: Suchergebnisse hervorheben

Nehmen wir an, Sie haben einen Textblock und möchten alle Vorkommnisse eines Suchbegriffs hervorheben. So könnten Sie es machen:

            
function highlightSearchResults(searchTerm, element) {
  const text = element.textContent;
  let index = text.indexOf(searchTerm);

  if (index === -1) {
    return; // Search term not found
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  // Apply the 'search-result' highlight style
  highlightRegistry.set('search-result', highlight);
}

const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);

            

              
                Copy
              
            
          

Dieser Code-Schnipsel findet alle Vorkommnisse des Wortes "example" innerhalb des Elements mit der ID "content" und wendet den Hervorhebungsstil search-result auf sie an.

Bereiche und Hervorhebungen entfernen

Sie können Bereiche aus einer Hervorhebung mit der Methode deleteRange() entfernen:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

Sie können auch alle Bereiche aus einer Hervorhebung mit der Methode clear() entfernen:

            
highlight.clear();

            

              
                Copy
              
            
          

Um eine Hervorhebung vollständig zu entfernen, können Sie die Methode delete() der HighlightRegistry verwenden:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Erweiterte Anwendungsfälle und Überlegungen

Die CSS Custom Highlight API ist ein leistungsstarkes Tool, das in einer Vielzahl von erweiterten Szenarien eingesetzt werden kann.

Kollaborative Bearbeitung

In kollaborativen Bearbeitungsanwendungen können Sie die API verwenden, um die Änderungen hervorzuheben, die von verschiedenen Benutzern vorgenommen wurden. Jeder Benutzer könnte seinen eigenen benutzerdefinierten Hervorhebungsstil haben, sodass Sie leicht erkennen können, wer welche Änderungen vorgenommen hat. Beispielsweise könnte ein kollaborativer Dokumenteditor, der von Teams in mehreren Ländern verwendet wird, unterschiedliche Hervorhebungsfarben verwenden, um Bearbeitungen von Teammitgliedern in Japan, Deutschland und Brasilien darzustellen.

Code-Editoren

Code-Editoren können die API für die Syntaxhervorhebung nutzen. Verschiedenen Syntaxelementen (z. B. Schlüsselwörter, Operatoren, Kommentare) können verschiedene Hervorhebungsstile zugewiesen werden. Moderne Code-Editoren haben oft komplexe Syntaxhervorhebungsregeln, und diese API ermöglicht eine präzisere und anpassbarere Steuerung als herkömmliche Methoden.

Barrierefreiheit

Die API kann verwendet werden, um die Barrierefreiheit zu verbessern. Beispielsweise könnten Sie das aktuell fokussierte Element oder den Text hervorheben, der von einem Bildschirmleser gelesen wird. Denken Sie daran, für Benutzer mit Sehbehinderungen einen ausreichenden Farbkontrast zwischen dem Hervorhebungshintergrund und der Textfarbe sicherzustellen. Die WCAG (Web Content Accessibility Guidelines) enthalten spezifische Richtlinien zu Farbkontrastverhältnissen.

Internationalisierungsüberlegungen (i18n)

Bei der Verwendung der API in mehrsprachigen Anwendungen sollten Sie Folgendes beachten:

• Textrichtung: Stellen Sie sicher, dass Ihre Hervorhebungsstile sowohl mit Sprachen mit Leserichtung von links nach rechts (LTR) als auch von rechts nach links (RTL) korrekt funktionieren.
• Wortgrenzen: Verschiedene Sprachen haben unterschiedliche Regeln für Wortgrenzen. Stellen Sie sicher, dass Sie geeignete Algorithmen zur Erkennung von Wortgrenzen verwenden, wenn Sie Wörter oder Phrasen hervorheben.
• Zeichensätze: Die API unterstützt Unicode, sodass Sie Text in jeder Sprache hervorheben können.

Wenn Sie beispielsweise Suchbegriffe auf Arabisch (einer RTL-Sprache) hervorheben, stellen Sie sicher, dass die Hervorhebung die korrekte Textrichtung visuell widerspiegelt. Wenn Sie in Japanisch, das keine Leerzeichen zwischen Wörtern verwendet, Schlüsselwörter hervorheben, müssen Sie eine geeignete morphologische Analyse verwenden, um Wortgrenzen zu identifizieren.

Leistungsüberlegungen

Obwohl die API leistungsstark ist, ist es wichtig, die Leistung zu berücksichtigen. Das Erstellen und Verwalten einer großen Anzahl von Hervorhebungen kann die Leistung beeinträchtigen, insbesondere in großen Dokumenten. Beachten Sie diese Tipps:

• Range-Erstellung optimieren: Das Erstellen von Range-Objekten kann teuer sein. Verwenden Sie vorhandene Bereiche nach Möglichkeit wieder.
• Batch-Aktualisierungen: Wenn Sie mehrere Änderungen an Hervorhebungen vornehmen, fassen Sie diese zu einer einzigen Aktualisierung zusammen, um Reflows zu minimieren.
• Lazy Loading: Heben Sie nur den Text hervor, der für den Benutzer gerade sichtbar ist. Laden Sie zusätzliche Hervorhebungen, während der Benutzer scrollt.
• Virtualisierung: Verwenden Sie für sehr große Dokumente Virtualisierungstechniken, um nur den sichtbaren Teil des Dokuments zu rendern.

Praktische Beispiele und Code-Schnipsel

Beispiel 1: Dynamische Keyword-Hervorhebung

Dieses Beispiel zeigt, wie Sie Keywords in einem Text basierend auf der Benutzereingabe dynamisch hervorheben können. Stellen Sie sich vor, ein Benutzer gibt eine Suchanfrage in ein Suchfeld ein. Die hervorgehobenen Keywords werden in Echtzeit aktualisiert.

            


  Dies ist ein Beispieltext. Er enthält Keywords, die wir hervorheben möchten. Wir werden die Keywords basierend auf der Benutzereingabe hervorheben.


            

              
                Copy
              
            
          

            
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');

keywordInput.addEventListener('input', () => {
  const keyword = keywordInput.value.trim();
  if (keyword) {
    highlightKeyword(keyword, textContainer);
  } else {
    clearHighlights(textContainer);
  }
});

function highlightKeyword(keyword, element) {
  clearHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(keyword);

  if (index === -1) {
    return;
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + keyword.length);
    highlight.addRange(range);
    index = text.indexOf(keyword, index + 1);
  }

  CSS.highlights.set('dynamic-keyword', highlight);
}

function clearHighlights(element) {
  CSS.highlights.delete('dynamic-keyword');
}

            

              
                Copy
              
            
          

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Semi-transparent orange */
  color: black;
}

            

              
                Copy
              
            
          

Beispiel 2: Implementierung einer Funktion "Alle finden"

Dieses Beispiel simuliert eine "Alle finden"-Funktion, ähnlich der, die in Texteditoren und IDEs zu finden ist. Alle Vorkommnisse eines Suchbegriffs werden gleichzeitig hervorgehoben.

            


  Dieses Dokument enthält mehrere Instanzen des Suchbegriffs. Der Suchbegriff wird im gesamten Dokument hervorgehoben. Dies ist eine zweite Instanz des Suchbegriffs. Hier ist ein weiterer Suchbegriff.


            

              
                Copy
              
            
          

            
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');

searchTermInput.addEventListener('input', () => {
  const searchTerm = searchTermInput.value.trim();
  if (searchTerm) {
    findAll(searchTerm, documentContent);
  } else {
    clearFindAllHighlights(documentContent);
  }
});

function findAll(searchTerm, element) {
  clearFindAllHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(searchTerm);
  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  CSS.highlights.set('find-all', highlight);
}

function clearFindAllHighlights(element) {
  CSS.highlights.delete('find-all');
}

            

              
                Copy
              
            
          

            
::highlight(find-all) {
  background-color: #90EE90; /* LightGreen */
  color: black;
}

            

              
                Copy
              
            
          

Browserkompatibilität und Polyfills

Die CSS Custom Highlight API ist eine relativ neue Funktion, daher kann die Browserkompatibilität variieren. Stand Ende 2024 wird sie in modernen Browsern wie Chrome, Firefox, Safari und Edge gut unterstützt. Es ist jedoch wichtig, die neuesten Browserkompatibilitätsdaten auf Websites wie "Can I use..." zu überprüfen, um sicherzustellen, dass Ihre Zielgruppe Ihre Funktionen nutzen kann. Wenn Sie ältere Browser unterstützen müssen, können Sie Polyfills oder alternative Ansätze in Betracht ziehen, die die Funktionalität der API nachahmen, obwohl sie möglicherweise nicht das gleiche Maß an Leistung oder Genauigkeit bieten.

Die Zukunft der Textauswahl und -hervorhebung

Die CSS Custom Highlight API stellt einen bedeutenden Fortschritt in der Webentwicklung dar und bietet Entwicklern eine detaillierte Kontrolle über die Textauswahl und -hervorhebung. Mit zunehmender Reife der API und Verbesserung der Browserunterstützung können wir noch innovativere Anwendungen dieser Technologie erwarten. Von erweiterten Texteditoren bis hin zu kollaborativen Dokumentplattformen sind die Möglichkeiten endlos. Diese API ermöglicht eine reichhaltigere, interaktivere und barrierefreiere Benutzererfahrung. Überlegen Sie, wie dies verwendet werden kann, um die Benutzererfahrung in allem von internationalen Nachrichtenseiten bis hin zu Online-Sprachlernplattformen zu verbessern.

Fazit

Die CSS Custom Highlight API ist ein leistungsstarkes Tool zum Erstellen dynamischer und interaktiver Benutzeroberflächen. Indem Sie die grundlegenden Konzepte von Bereichen, Hervorhebungen und der HighlightRegistry verstehen, können Sie diese API nutzen, um überzeugende Benutzererlebnisse zu erstellen, die zuvor schwierig oder unmöglich zu erreichen waren. Denken Sie bei der Erkundung dieser API daran, Barrierefreiheit, Internationalisierung und Leistung zu berücksichtigen, um sicherzustellen, dass Ihre Anwendungen für ein globales Publikum nutzbar und leistungsfähig sind. Mit ihrer Flexibilität und Kontrolle ist die CSS Custom Highlight API auf dem besten Weg, ein wesentlicher Bestandteil des Toolkits des modernen Webentwicklers zu werden.