CSS Custom Highlight API: Multi-bereik Tekstselectie Beheersen voor Dynamische UI's

De CSS Custom Highlight API is een krachtige nieuwe tool voor webontwikkelaars die ongekende controle biedt over tekstselectie en highlighting binnen webapplicaties. In tegenstelling tot de basisselectiemogelijkheden van de browser, stelt deze API ontwikkelaars in staat om aangepaste highlight-stijlen te definiëren en meerdere selectiebereiken programmatisch te beheren. Dit opent een wereld van mogelijkheden voor het creëren van rijke, interactieve en toegankelijke gebruikersinterfaces. Deze gids biedt een uitgebreid overzicht van de API, en verkent de mogelijkheden, gebruiksscenario's en implementatiedetails, alles vanuit een mondiaal perspectief.

De Basis van de CSS Custom Highlight API Begrijpen

Voordat we in complexe scenario's duiken, is het essentieel om de fundamentele concepten van de API te begrijpen. In de kern introduceert de CSS Custom Highlight API verschillende nieuwe CSS pseudo-elementen, waaronder:

• ::selection: Vertegenwoordigt het gedeelte van een document dat door de gebruiker is geselecteerd. Dit is al lange tijd beschikbaar en maakt basisstyling van tekstselecties mogelijk.
• ::highlight: Een algemener pseudo-element voor het toepassen van stijlen op gemarkeerde bereiken. Dit is de sleutel tot de kracht van de nieuwe API. U kunt nu benoemde highlights creëren en aangepaste styling op elk toepassen.
• ::target-text: Vertegenwoordigt het gedeelte van een document dat wordt gericht door een URI-fragment (bijv. #section-title). Het stelt u in staat het gedeelte van de pagina te stylen waarnaar de gebruiker via een link is gescrolld.
• ::spelling-error: Vertegenwoordigt tekst die door de user agent is geïdentificeerd als spellingfouten bevattend. Biedt stylingcontrole over indicatoren voor spellingfouten.
• ::grammar-error: Vertegenwoordigt tekst die door de user agent is geïdentificeerd als grammaticafouten bevattend. Biedt stylingcontrole over indicatoren voor grammaticafouten.

Het ::highlight pseudo-element is het werkpaard van de API. Het stelt u in staat benoemde highlights in CSS te definiëren en deze vervolgens met JavaScript toe te passen op specifieke tekstbereiken.

Sleutelconcepten: Bereiken en Highlights

De API draait om de concepten van bereiken en highlights:

• Bereik: Een aaneengesloten gedeelte van tekst binnen het document. Vertegenwoordigd door het Range object in JavaScript.
• Highlight: Een benoemde stijl die wordt toegepast op één of meer bereiken. Gedefinieerd in CSS met behulp van het ::highlight(highlight-name) pseudo-element en gemanipuleerd via de Highlight en HighlightRegistry API's in JavaScript.

Zie het zo: een bereik is het 'wat' (de tekst die u wilt highlighten), en de highlight is het 'hoe' (de stijl die u wilt toepassen).

Aangepaste Highlights Instellen met CSS

De eerste stap is het definiëren van uw aangepaste highlight-stijlen in CSS. Dit doet u met behulp van het ::highlight() pseudo-element.

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

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

            

              
                Copy
              
            
          

In dit voorbeeld hebben we twee aangepaste highlight-stijlen gedefinieerd: search-result en important-term. De search-result highlight past een gele achtergrond met zwarte tekst toe, terwijl de important-term highlight een lichtblauwe achtergrond gebruikt en de tekst vet maakt. U kunt elke gewenste CSS-eigenschap definiëren binnen deze highlight-stijlen.

Highlights Beheren met JavaScript

Zodra u uw highlight-stijlen in CSS hebt gedefinieerd, kunt u JavaScript gebruiken om ze toe te passen op specifieke tekstbereiken. De Highlight en HighlightRegistry API's bieden de tools hiervoor.

De HighlightRegistry

De HighlightRegistry is een globaal object dat alle highlights in het document beheert. U kunt er toegang toe krijgen via de CSS interface:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Highlights Creëren

Om een highlight te creëren, gebruikt u de Highlight constructor:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Aanvankelijk heeft een highlight geen bereiken die eraan zijn gekoppeld. U moet bereiken toevoegen aan de highlight met behulp van de addRange() methode.

Bereiken Toevoegen aan een Highlight

Om een bereik toe te voegen aan een highlight, moet u eerst een Range object creëren. Dit doet u met behulp van de document.createRange() methode:

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

highlight.addRange(range);

            

              
                Copy
              
            
          

Waar:

• startNode: Het DOM-knooppunt waar het bereik begint.
• startOffset: De tekenoffset binnen de startNode waar het bereik begint.
• endNode: Het DOM-knooppunt waar het bereik eindigt.
• endOffset: De tekenoffset binnen de endNode waar het bereik eindigt.

Voorbeeld: Zoekresultaten Highlighten

Stel dat u een tekstblok hebt en u wilt alle voorkomens van een zoekterm highlighten. Zo zou u dat kunnen doen:

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

  if (index === -1) {
    return; // Zoekterm niet gevonden
  }

  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);
  }

  // Pas de 'search-result' highlight-stijl toe
  highlightRegistry.set('search-result', highlight);
}

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

            

              
                Copy
              
            
          

Dit codefragment vindt alle voorkomens van het woord "example" binnen het element met de ID "content" en past de search-result highlight-stijl erop toe.

Bereiken en Highlights Verwijderen

U kunt bereiken uit een highlight verwijderen met behulp van de deleteRange() methode:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

U kunt ook alle bereiken uit een highlight verwijderen met behulp van de clear() methode:

            
highlight.clear();

            

              
                Copy
              
            
          

Om een highlight volledig te verwijderen, kunt u de delete() methode van de HighlightRegistry gebruiken:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Geavanceerde Gebruiksscenario's en Overwegingen

De CSS Custom Highlight API is een krachtig hulpmiddel dat kan worden gebruikt in diverse geavanceerde scenario's.

Collaboratief Bewerken

In collaboratieve bewerkingsapplicaties kunt u de API gebruiken om de wijzigingen die door verschillende gebruikers zijn aangebracht te highlighten. Elke gebruiker zou zijn eigen aangepaste highlight-stijl kunnen hebben, zodat u gemakkelijk kunt zien wie welke wijzigingen heeft aangebracht. Bijvoorbeeld, een collaboratieve documenteditor die door teams in meerdere landen wordt gebruikt, zou verschillende highlight-kleuren kunnen gebruiken om bewerkingen van teamleden in Japan, Duitsland en Brazilië weer te geven.

Code-editors

Code-editors kunnen de API benutten voor syntaxiskleuring. Verschillende syntaxiselementen (bijv. trefwoorden, operatoren, opmerkingen) kunnen verschillende highlight-stijlen krijgen. Moderne code-editors hebben vaak complexe regels voor syntaxiskleuring, en deze API maakt een preciezere en aanpasbaardere controle mogelijk dan traditionele methoden.

Toegankelijkheid

De API kan worden gebruikt om de toegankelijkheid te verbeteren. U zou bijvoorbeeld het momenteel gefocuste element of de tekst die door een schermlezer wordt gelezen kunnen highlighten. Denk eraan om voldoende kleurcontrast te garanderen tussen de highlight-achtergrond en de tekstkleur voor gebruikers met visuele beperkingen. De WCAG (Web Content Accessibility Guidelines) biedt specifieke richtlijnen voor kleurcontrastverhoudingen.

Internationaliserings (i18n) Overwegingen

Bij het gebruik van de API in meertalige applicaties, let op het volgende:

• Tekstrichting: Zorg ervoor dat uw highlight-stijlen correct werken met zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) talen.
• Woordgrenzen: Verschillende talen hebben verschillende regels voor woordgrenzen. Zorg ervoor dat u geschikte algoritmen voor woordgrensdetectie gebruikt bij het highlighten van woorden of zinsdelen.
• Tekensets: De API ondersteunt Unicode, dus u kunt tekst in elke taal highlighten.

Bijvoorbeeld, bij het highlighten van zoektermen in het Arabisch (een RTL-taal), zorg ervoor dat de highlight visueel de juiste tekstrichting weergeeft. Op dezelfde manier, wanneer u trefwoorden in het Japans highlight, dat geen spaties tussen woorden gebruikt, moet u geschikte morfologische analyse gebruiken om woordgrenzen te identificeren.

Prestatieoverwegingen

Hoewel de API krachtig is, is het belangrijk om rekening te houden met prestaties. Het creëren en beheren van een groot aantal highlights kan de prestaties beïnvloeden, vooral in grote documenten. Overweeg deze tips:

• Bereikcreatie Optimaliseren: Het creëren van Range objecten kan duur zijn. Hergebruik bestaande bereiken waar mogelijk.
• Batch-updates: Wanneer u meerdere wijzigingen aan highlights aanbrengt, batcht u deze samen in één enkele update om reflows te minimaliseren.
• Lazy Loading: Highlight alleen de tekst die momenteel zichtbaar is voor de gebruiker. Laad extra highlights naarmate de gebruiker scrollt.
• Virtualisatie: Voor zeer grote documenten, overweeg het gebruik van virtualisatietechnieken om alleen het zichtbare gedeelte van het document weer te geven.

Praktische Voorbeelden en Codefragmenten

Voorbeeld 1: Dynamische Trefwoord Highlighting

Dit voorbeeld demonstreert hoe u dynamisch trefwoorden in een tekst highlight op basis van gebruikersinvoer. Stel u voor dat een gebruiker een zoekopdracht typt in een zoekvak; de gehighlighte trefwoorden worden in realtime bijgewerkt.

            


  Dit is een voorbeeldtekst. Het bevat trefwoorden die we willen highlighten. We zullen de trefwoorden highlighten op basis van gebruikersinvoer.


            

              
                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-transparant oranje */
  color: black;
}

            

              
                Copy
              
            
          

Voorbeeld 2: Een "Alles Zoeken"-functie Implementeren

Dit voorbeeld simuleert een "Alles Zoeken"-functie, vergelijkbaar met die in teksteditors en IDE's. Alle voorkomens van een zoekterm worden gelijktijdig gehighlight.

            


  Dit document bevat meerdere exemplaren van de zoekterm. De zoekterm zal overal in het document worden gehighlight.
  Dit is een tweede exemplaar van de zoekterm. Hier is nog een zoekterm.


            

              
                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; /* Lichtgroen */
  color: black;
}

            

              
                Copy
              
            
          

Browsercompatibiliteit en Polyfills

De CSS Custom Highlight API is een relatief nieuwe functie, dus browsercompatibiliteit kan variëren. Eind 2024 geniet het goede ondersteuning in moderne browsers zoals Chrome, Firefox, Safari en Edge. Het is echter essentieel om de meest recente browsercompatibiliteitsgegevens te controleren op websites zoals "Can I use..." om ervoor te zorgen dat uw doelgroep uw functies kan gebruiken. Als u oudere browsers moet ondersteunen, kunt u polyfills of alternatieve benaderingen verkennen die de functionaliteit van de API nabootsen, hoewel ze mogelijk niet hetzelfde niveau van prestaties of nauwkeurigheid bieden.

De Toekomst van Tekstselectie en Highlighting

De CSS Custom Highlight API vertegenwoordigt een belangrijke stap voorwaarts in webontwikkeling, en biedt ontwikkelaars gedetailleerde controle over tekstselectie en highlighting. Naarmate de API volwassener wordt en de browserondersteuning verbetert, kunnen we nog meer innovatieve toepassingen van deze technologie verwachten. Van geavanceerde teksteditors tot collaboratieve documentplatformen, de mogelijkheden zijn eindeloos. Deze API maakt een rijkere, interactievere en toegankelijkere gebruikerservaring mogelijk. Overweeg hoe dit kan worden gebruikt om gebruikerservaringen te verbeteren in alles van internationale nieuwswebsites tot online taal leerplatformen.

Conclusie

De CSS Custom Highlight API is een krachtig hulpmiddel voor het creëren van dynamische en interactieve gebruikersinterfaces. Door de basisconcepten van bereiken, highlights en de HighlightRegistry te begrijpen, kunt u deze API benutten om boeiende gebruikerservaringen te bouwen die voorheen moeilijk of onmogelijk te realiseren waren. Terwijl u deze API verkent, vergeet niet rekening te houden met toegankelijkheid, internationalisering en prestaties om ervoor te zorgen dat uw applicaties bruikbaar en performant zijn voor een wereldwijd publiek. Met zijn flexibiliteit en controle staat de CSS Custom Highlight API klaar om een essentieel onderdeel te worden van de toolkit van de moderne webontwikkelaar.