CSS Custom Highlight Event Handling: Interaktionen bei der Textauswahl aufwerten

Die Textauswahl ist eine grundlegende Interaktion im Web. Benutzer markieren Text aus verschiedenen Gründen: um Inhalte zu kopieren, Zitate zu teilen, Suchen durchzuführen oder einfach die Aufmerksamkeit zu lenken. Während Browser standardmäßige Texthervorhebungen bieten, ermöglicht die CSS Custom Highlight API eine beispiellose Kontrolle über diese Interaktion. Sie erlaubt Entwicklern, visuell ansprechende, kontextsensitive und hochgradig barrierefreie Auswahl-Erlebnisse zu gestalten. Dieser Blogbeitrag taucht tief in die CSS Custom Highlight API ein, erforscht ihre Möglichkeiten und liefert praktische Beispiele zur Verbesserung Ihrer Webanwendungen.

Das Standardverhalten der Textauswahl verstehen

Standardmäßig formatieren Browser ausgewählten Text mit dem Pseudo-Element ::selection. Sie können die Eigenschaften background-color und color ändern, um das Erscheinungsbild anzupassen. Zum Beispiel:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

Dieser einfache CSS-Schnipsel ändert die Hintergrundfarbe in ein helles Blau und die Textfarbe in Schwarz, wann immer ein Benutzer Text auf der Seite auswählt. Das ::selection Pseudo-Element hat jedoch Einschränkungen. Es erlaubt nur die Gestaltung des Hintergrunds und der Farbe, was die Anpassungsmöglichkeiten begrenzt. Zusätzlich fehlen semantische Informationen über den Auswahlkontext. Die CSS Custom Highlight API überwindet diese Einschränkungen.

Einführung in die CSS Custom Highlight API

Die CSS Custom Highlight API bietet einen robusteren und flexibleren Ansatz zur Verwaltung von Textauswahlen. Sie führt neue CSS-Eigenschaften und JavaScript-APIs ein, mit denen Sie benutzerdefinierte Hervorhebungen basierend auf spezifischen Bedingungen und Interaktionen definieren und gestalten können.

Schlüsselkonzepte

• Vererbung von Hervorhebungen: Hervorhebungen werden durch einen Kaskaden- und Vererbungsmechanismus gestaltet, ähnlich wie andere CSS-Eigenschaften. Das bedeutet, Sie können Standard-Hervorhebungsstile auf der Wurzelebene definieren und diese für bestimmte Elemente oder Kontexte überschreiben.
• Highlight-Pseudo-Element: Das ::highlight()-Pseudo-Element wird verwendet, um Stile auf benannte Hervorhebungen anzuwenden.
• JavaScript-API: JavaScript-APIs wie getSelection() und Highlight-Objekte ermöglichen es Ihnen, Hervorhebungen programmatisch zu erstellen, zu verwalten und mit ihnen zu interagieren.
• Barrierefreiheit: Die API unterstützt ARIA-Attribute und Barrierefreiheitsaspekte, um sicherzustellen, dass benutzerdefinierte Hervorhebungen für Benutzer mit Behinderungen wahrnehmbar und verständlich sind.

Implementierung benutzerdefinierter Hervorhebungen: Eine Schritt-für-Schritt-Anleitung

Hier ist eine praktische Anleitung zur Implementierung benutzerdefinierter Hervorhebungen mit der CSS Custom Highlight API:

Schritt 1: Benannte Hervorhebungen definieren

Zuerst müssen Sie eine benannte Hervorhebung mit CSS definieren. Dieser Name wird verwendet, um Stile mit bestimmten Auswahlen zu verknüpfen.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

In diesem Beispiel haben wir eine Hervorhebung namens `custom-highlight` mit einem halbtransparenten roten Hintergrund und schwarzer Textfarbe definiert. Sie können jeden gültigen CSS-Farbwert für den Hintergrund und den Text wählen.

Schritt 2: Hervorhebungen in JavaScript erstellen

Als Nächstes verwenden Sie JavaScript, um die Hervorhebung zu erstellen und anzuwenden. Dies beinhaltet das Abrufen des ausgewählten Textbereichs und das Erstellen eines Highlight-Objekts.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // Keine Auswahl
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Leere Auswahl
  }

  const highlight = new Highlight(range);

  // Registrieren Sie die Hervorhebung beim Dokument. Es ist experimentell und benötigt möglicherweise einen Polyfill oder ein Browser-Flag
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implementieren Sie hier einen Fallback-Mechanismus, z.B. das Umwickeln des ausgewählten Textes in einem  mit einer Klasse
    // Zum Beispiel:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Optional: Die Auswahl nach der Hervorhebung aufheben
}

            

              
                Copy
              
            
          

Erklärung:

• window.getSelection(): Ruft das aktuelle Auswahl-Objekt ab.
• selection.rangeCount: Prüft, ob eine aktive Auswahl vorhanden ist.
• selection.getRangeAt(0): Ruft den ausgewählten Bereich ab.
• new Highlight(range): Erstellt ein neues `Highlight`-Objekt aus dem Bereich.
• CSS.highlights.set('custom-highlight', highlight): Registriert die Hervorhebung in der CSS-Hervorhebungs-Registry. Dies ist der entscheidende Schritt, der die JavaScript-Hervorhebung mit den zuvor definierten CSS-Stilen verknüpft.
• Fallback-Mechanismus: Beinhaltet einen entscheidenden Fallback-Mechanismus für Browser, die `CSS.highlights` noch nicht vollständig unterstützen. Dies stellt sicher, dass Ihre Funktion auf älteren Browsern ordnungsgemäß degradiert und die Funktionalität erhalten bleibt.
• selection.removeAllRanges(): Hebt die Auswahl nach der Hervorhebung auf. Dies ist optional und hängt von der gewünschten Benutzererfahrung ab.

Denken Sie daran, diese Funktion an einen Event-Listener anzuhängen, wie z.B. einen Button-Klick oder eine Tastenkombination.

Schritt 3: Umgang mit mehreren Bereichen (überlappende Auswahlen)

Die API kann mehrere überlappende Bereiche innerhalb einer einzigen Hervorhebung verwalten. Sie können einem `Highlight`-Objekt mehrere Bereiche hinzufügen:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implementieren Sie einen Fallback für mehrere Bereiche (komplexer)
  // Dies würde erfordern, den Text in kleinere Spans aufzuteilen und Stile anzuwenden
  // Dies ist eine fortgeschrittenere Fallback-Implementierung und möglicherweise nicht für alle Fälle geeignet
}

            

              
                Copy
              
            
          

Das Styling wird auf alle Bereiche innerhalb der Hervorhebung angewendet.

Fortgeschrittene Anwendungsfälle und Techniken

Die CSS Custom Highlight API eröffnet eine breite Palette von Möglichkeiten zur Verbesserung der Interaktionen bei der Textauswahl. Hier sind einige fortgeschrittene Anwendungsfälle und Techniken:

1. Kontextsensitive Hervorhebung

Sie können JavaScript verwenden, um den ausgewählten Text zu analysieren und unterschiedliche Hervorhebungsstile basierend auf seinem Inhalt oder dem umgebenden Kontext anzuwenden. Zum Beispiel könnten Sie Schlüsselwörter in einem Dokument mit einer bestimmten Farbe hervorheben oder Code-Schnipsel identifizieren und markieren.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Code-Kommentare hervorheben
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // JavaScript-Schlüsselwörter hervorheben
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Fallback-Implementierung, möglicherweise unter Verwendung von Datenattributen und benutzerdefiniertem CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Definieren Sie CSS-Stile für jeden Hervorhebungstyp:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Hervorhebung von Suchergebnissen

Sie können die API verwenden, um Suchbegriffe in einem Dokument hervorzuheben. Dies ist besonders nützlich für Suchergebnisseiten oder die In-App-Suchfunktionalität.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Oder spezifisches Element
  const regex = new RegExp(searchTerm, 'gi'); // Global, ohne Berücksichtigung der Groß-/Kleinschreibung

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Erstellen Sie einen Bereich für jede Übereinstimmung
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback erfordert wiederum eine sorgfältige Behandlung von Textknoten
    }
  }
}

            

              
                Copy
              
            
          

Definieren Sie den CSS-Stil für die Hervorhebung von Suchergebnissen:

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

            

              
                Copy
              
            
          

3. Integration mit dem Shadow DOM

Die CSS Custom Highlight API arbeitet nahtlos mit dem Shadow DOM zusammen, sodass Sie gekapselte Komponenten mit benutzerdefinierten Hervorhebungsstilen erstellen können. Sie können Hervorhebungen innerhalb des Shadow DOM definieren und auf Elemente innerhalb der Komponente anwenden.

4. Aspekte der Barrierefreiheit

Stellen Sie sicher, dass Ihre benutzerdefinierten Hervorhebungen für alle Benutzer zugänglich sind. Berücksichtigen Sie Folgendes:

• Farbkontrast: Stellen Sie einen ausreichenden Farbkontrast zwischen dem Hervorhebungshintergrund und der Textfarbe sicher, um die WCAG-Richtlinien zu erfüllen.
• Tastaturnavigation: Stellen Sie sicher, dass Benutzer mit der Tastatur durch den hervorgehobenen Text navigieren können.
• Kompatibilität mit Screenreadern: Testen Sie Ihre Hervorhebungen mit Screenreadern, um sicherzustellen, dass der ausgewählte Text korrekt vorgelesen wird.
• Fokusindikatoren: Wenn ein hervorgehobenes Element den Fokus erhält, stellen Sie einen klaren visuellen Fokusindikator bereit.

Sie können ARIA-Attribute verwenden, um zusätzliche semantische Informationen über die Hervorhebungen bereitzustellen. Zum Beispiel könnten Sie aria-label verwenden, um den Zweck eines hervorgehobenen Abschnitts zu beschreiben.

5. Lokalisierung und Internationalisierung

Wenn Sie mit Textauswahl in einem globalen Kontext arbeiten, beachten Sie Folgendes:

• Textrichtung: Stellen Sie sicher, dass Ihre Hervorhebungen sowohl mit Links-nach-Rechts- (LTR) als auch mit Rechts-nach-Links- (RTL) Textrichtungen korrekt funktionieren.
• Sprachspezifische Regeln: Seien Sie sich sprachspezifischer Regeln für die Textauswahl und Wortgrenzen bewusst.
• Schriftunterstützung: Verwenden Sie Schriftarten, die die in verschiedenen Sprachen verwendeten Zeichen unterstützen.

6. Leistungsoptimierung

Das Anwenden benutzerdefinierter Hervorhebungen kann die Leistung beeinträchtigen, insbesondere bei großen Dokumenten. Berücksichtigen Sie die folgenden Optimierungstechniken:

• Debouncing: Verwenden Sie Debouncing für die Hervorhebungsfunktion, um übermäßige Berechnungen bei schnellen Auswahlen zu vermeiden.
• Caching: Speichern Sie berechnete Hervorhebungsbereiche im Cache, um unnötige Neuberechnungen zu vermeiden.
• Virtualisierung: Verwenden Sie Virtualisierungstechniken, um nur die Hervorhebungen zu rendern, die aktuell im Ansichtsfenster sichtbar sind.
• Web Workers: Lagern Sie Hervorhebungsberechnungen in einen Web Worker aus, um den Hauptthread nicht zu blockieren.

Browser-Unterstützung und Polyfills

Die CSS Custom Highlight API ist relativ neu und wird möglicherweise nicht von allen Browsern vollständig unterstützt. Überprüfen Sie die neuesten Browser-Kompatibilitätstabellen, bevor Sie sie in der Produktion einsetzen. Erwägen Sie die Verwendung eines Polyfills, um Unterstützung für ältere Browser bereitzustellen. Ein Polyfill fügt den notwendigen Code hinzu, damit ältere Browser die neue API verstehen. Suchen Sie online nach "CSS Custom Highlight API Polyfill", um Optionen zu finden.

Fazit

Die CSS Custom Highlight API ermöglicht es Entwicklern, ansprechende, kontextsensitive und barrierefreie Erlebnisse bei der Textauswahl zu schaffen. Indem Sie die Fähigkeiten der API verstehen und die in diesem Blogbeitrag beschriebenen Techniken anwenden, können Sie die Benutzererfahrung Ihrer Webanwendungen verbessern und eine intuitivere und visuell ansprechendere Art der Interaktion mit Text bieten. Denken Sie daran, bei der Implementierung benutzerdefinierter Hervorhebungen die Barrierefreiheit und Leistung zu priorisieren und Browser-Kompatibilität sowie Polyfill-Optionen zu berücksichtigen. Diese differenzierte Kontrolle der Textauswahl ermöglicht es Entwicklern, interaktivere und benutzerfreundlichere Web-Erlebnisse zu schaffen, die auf spezifische Anwendungsbedürfnisse und Benutzerpräferenzen zugeschnitten sind. Mit wachsender Browser-Unterstützung verspricht die CSS Custom Highlight API, ein unverzichtbares Werkzeug für die moderne Webentwicklung zu werden.

Weiterführende Informationen

• MDN Web Docs: Highlight API
• CSS Houdini: Erfahren Sie mehr über das CSS-Houdini-Projekt, das diese fortschrittlichen CSS-Funktionen ermöglicht.