Eventafhandeling voor CSS Custom Highlight: Verbeterde interacties met tekstselectie

Tekstselectie is een fundamentele interactie op het web. Gebruikers markeren tekst om verschillende redenen: inhoud kopiëren, citaten delen, zoekopdrachten uitvoeren of simpelweg de aandacht vestigen. Hoewel browsers standaard tekstmarkering bieden, geeft de CSS Custom Highlight API ongekende controle over deze interactie, waardoor ontwikkelaars visueel aantrekkelijke, contextbewuste en zeer toegankelijke selectie-ervaringen kunnen creëren. Deze blogpost duikt diep in de CSS Custom Highlight API, verkent de mogelijkheden ervan en biedt praktische voorbeelden om uw webapplicaties te verbeteren.

Het standaardgedrag van tekstselectie begrijpen

Standaard stijlen browsers geselecteerde tekst met behulp van het ::selection pseudo-element. U kunt de eigenschappen background-color en color wijzigen om het uiterlijk aan te passen. Bijvoorbeeld:

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

            

              
                Copy
              
            
          

Dit eenvoudige CSS-fragment verandert de achtergrondkleur in lichtblauw en de tekstkleur in zwart wanneer een gebruiker tekst op de pagina selecteert. Het ::selection pseudo-element heeft echter beperkingen. Het staat alleen styling van de achtergrond en kleur toe, wat de aanpassingsmogelijkheden beperkt. Bovendien mist het semantische informatie over de selectiecontext. De CSS Custom Highlight API overwint deze beperkingen.

Introductie van de CSS Custom Highlight API

De CSS Custom Highlight API biedt een robuustere en flexibelere benadering voor het beheren van tekstselecties. Het introduceert nieuwe CSS-eigenschappen en JavaScript-API's waarmee u aangepaste markeringen kunt definiëren en stylen op basis van specifieke voorwaarden en interacties.

Belangrijkste concepten

• Overerving van markeringen (Highlight Inheritance): Markeringen worden gestyled via een cascade- en overervingsmechanisme, vergelijkbaar met andere CSS-eigenschappen. Dit betekent dat u standaard markeerstijlen op het hoofdniveau kunt definiëren en deze kunt overschrijven voor specifieke elementen of contexten.
• Highlight Pseudo: Het ::highlight() pseudo-element wordt gebruikt om stijlen toe te passen op benoemde markeringen.
• JavaScript API: JavaScript-API's zoals getSelection() en Highlight-objecten stellen u in staat om programmatisch markeringen te creëren, beheren en ermee te interageren.
• Toegankelijkheid: De API ondersteunt ARIA-attributen en toegankelijkheidsoverwegingen, zodat aangepaste markeringen waarneembaar en begrijpelijk zijn voor gebruikers met een beperking.

Aangepaste markeringen implementeren: een stapsgewijze handleiding

Hier is een praktische handleiding voor het implementeren van aangepaste markeringen met behulp van de CSS Custom Highlight API:

Stap 1: Benoemde markeringen definiëren

Eerst moet u een benoemde markering definiëren met CSS. Deze naam wordt gebruikt om stijlen te koppelen aan specifieke selecties.

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

            

              
                Copy
              
            
          

In dit voorbeeld hebben we een markering met de naam `custom-highlight` gedefinieerd met een semi-transparante rode achtergrond en zwarte tekstkleur. U kunt elke geldige CSS-kleurwaarde kiezen voor de achtergrond en tekst.

Stap 2: Markeringen creëren in JavaScript

Vervolgens gebruikt u JavaScript om de markering te creëren en toe te passen. Dit omvat het ophalen van het geselecteerde tekstbereik en het creëren van een Highlight-object.

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

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

  const highlight = new Highlight(range);

  // Registreer de markering bij het document. Dit is experimenteel en vereist mogelijk een polyfill of een browser-vlag
  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.');
    // Implementeer hier een fallback-mechanisme, bijv. door de geselecteerde tekst in een  met een klasse te wikkelen
    // Bijvoorbeeld:
    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(); // Optioneel: Wis de selectie na het markeren
}

            

              
                Copy
              
            
          

Uitleg:

• window.getSelection(): Haalt het huidige selectieobject op.
• selection.rangeCount: Controleert of er een actieve selectie is.
• selection.getRangeAt(0): Haalt het geselecteerde bereik op.
• new Highlight(range): Creëert een nieuw Highlight-object van het bereik.
• CSS.highlights.set('custom-highlight', highlight): Registreert de markering bij de CSS-highlight-registry. Dit is de cruciale stap die de JavaScript-markering koppelt aan de eerder gedefinieerde CSS-stijlen.
• Fallback-mechanisme: Bevat een cruciaal fallback-mechanisme voor browsers die CSS.highlights nog niet volledig ondersteunen. Dit zorgt ervoor dat uw functie netjes degradeert en de functionaliteit op oudere browsers behouden blijft.
• selection.removeAllRanges(): Wist de selectie na het markeren. Dit is optioneel en hangt af van de gewenste gebruikerservaring.

Vergeet niet om deze functie te koppelen aan een event listener, zoals een klik op een knop of een sneltoets.

Stap 3: Meerdere bereiken afhandelen (overlappende selecties)

De API kan meerdere overlappende bereiken binnen één markering afhandelen. U kunt meerdere bereiken toevoegen aan een Highlight-object:

            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.');
  // Implementeer een fallback voor meerdere bereiken (complexer)
  // Dit zou vereisen dat de tekst wordt opgesplitst in kleinere spans en dat stijlen worden toegepast
  // Dit is een geavanceerdere fallback-implementatie en is mogelijk niet geschikt voor alle gevallen
}

            

              
                Copy
              
            
          

De styling wordt toegepast op alle bereiken binnen de markering.

Geavanceerde gebruiksscenario's en technieken

De CSS Custom Highlight API opent een breed scala aan mogelijkheden voor het verbeteren van interacties met tekstselectie. Hier zijn enkele geavanceerde gebruiksscenario's en technieken:

1. Contextbewuste markering

U kunt JavaScript gebruiken om de geselecteerde tekst te analyseren en verschillende markeerstijlen toe te passen op basis van de inhoud of de omringende context. U zou bijvoorbeeld trefwoorden in een document kunnen markeren met een specifieke kleur, of codefragmenten kunnen identificeren en markeren.

            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'; // Markeer codecommentaar
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Markeer JavaScript-trefwoorden
  }

  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-implementatie, mogelijk met data-attributen en aangepaste CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Definieer CSS-stijlen voor elk markeertype:

            ::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. Zoekresultaten markeren

U kunt de API gebruiken om zoektermen in een document te markeren. Dit is met name handig voor pagina's met zoekresultaten of voor zoekfunctionaliteit binnen een app.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Of een specifiek element
  const regex = new RegExp(searchTerm, 'gi'); // Globaal, niet-hoofdlettergevoelig

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

    // Maak een bereik voor elke overeenkomst
    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 vereist opnieuw zorgvuldige behandeling van tekstnodes
    }
  }
}

            

              
                Copy
              
            
          

Definieer de CSS-stijl voor de markering van zoekresultaten:

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

            

              
                Copy
              
            
          

3. Integratie met Shadow DOM

De CSS Custom Highlight API werkt naadloos samen met Shadow DOM, waardoor u ingekapselde componenten met aangepaste markeerstijlen kunt maken. U kunt markeringen definiëren binnen de Shadow DOM en deze toepassen op elementen binnen de component.

4. Toegankelijkheidsoverwegingen

Zorg ervoor dat uw aangepaste markeringen toegankelijk zijn voor alle gebruikers. Overweeg het volgende:

• Kleurcontrast: Zorg voor voldoende kleurcontrast tussen de achtergrond van de markering en de tekstkleur om te voldoen aan de WCAG-richtlijnen.
• Toetsenbordnavigatie: Zorg ervoor dat gebruikers met het toetsenbord door gemarkeerde tekst kunnen navigeren.
• Compatibiliteit met schermlezers: Test uw markeringen met schermlezers om ervoor te zorgen dat de geselecteerde tekst correct wordt voorgelezen.
• Focusindicatoren: Bied een duidelijke visuele focusindicator wanneer een gemarkeerd element de focus krijgt.

U kunt ARIA-attributen gebruiken om aanvullende semantische informatie over de markeringen te geven. U zou bijvoorbeeld aria-label kunnen gebruiken om het doel van een gemarkeerd gedeelte te beschrijven.

5. Lokalisatie en internationalisering

Houd bij het omgaan met tekstselectie in een wereldwijde context rekening met het volgende:

• Tekstrichting: Zorg ervoor dat uw markeringen correct werken met zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) tekstrichtingen.
• Taalspecifieke regels: Wees u bewust van taalspecifieke regels voor tekstselectie en woordgrenzen.
• Lettertype-ondersteuning: Gebruik lettertypen die de tekens ondersteunen die in verschillende talen worden gebruikt.

6. Prestatieoptimalisatie

Het toepassen van aangepaste markeringen kan de prestaties beïnvloeden, vooral bij grote documenten. Overweeg de volgende optimalisatietechnieken:

• Debouncing: Gebruik 'debouncing' voor de markeerfunctie om overmatige berekeningen tijdens snelle selecties te voorkomen.
• Caching: Cache berekende markeerbereiken om te voorkomen dat ze onnodig opnieuw worden berekend.
• Virtualisatie: Gebruik virtualisatietechnieken om alleen markeringen weer te geven die momenteel zichtbaar zijn in de viewport.
• Web Workers: Verplaats markeerberekeningen naar een web worker om te voorkomen dat de hoofdthread wordt geblokkeerd.

Browserondersteuning en Polyfills

De CSS Custom Highlight API is relatief nieuw en wordt mogelijk nog niet door alle browsers volledig ondersteund. Controleer de nieuwste compatibiliteitstabellen voor browsers voordat u deze in productie gebruikt. Overweeg een polyfill te gebruiken om ondersteuning te bieden voor oudere browsers. Een polyfill voegt de benodigde code toe zodat oudere browsers de nieuwe API kunnen begrijpen. Zoek online naar "CSS Custom Highlight API Polyfill" om opties te vinden.

Conclusie

De CSS Custom Highlight API stelt ontwikkelaars in staat om boeiende, contextbewuste en toegankelijke tekstselectie-ervaringen te creëren. Door de mogelijkheden van de API te begrijpen en de technieken die in deze blogpost worden beschreven toe te passen, kunt u de gebruikerservaring van uw webapplicaties naar een hoger niveau tillen en gebruikers een intuïtievere en visueel aantrekkelijkere manier bieden om met tekst te interageren. Vergeet niet om prioriteit te geven aan toegankelijkheid en prestaties bij het implementeren van aangepaste markeringen, en om rekening te houden met browsercompatibiliteit en polyfill-opties. Deze genuanceerde controle over tekstselectie stelt ontwikkelaars in staat om interactievere en gebruiksvriendelijkere webervaringen te bouwen, afgestemd op specifieke applicatiebehoeften en gebruikersvoorkeuren. Naarmate de browserondersteuning groeit, belooft de CSS Custom Highlight API een onmisbaar hulpmiddel te worden voor moderne webontwikkeling.

Verder onderzoek

• MDN Web Docs: Highlight API
• CSS Houdini: Leer meer over het CSS Houdini-project dat deze geavanceerde CSS-functies mogelijk maakt.