Verbeter Je UI: De CSS Custom Highlight API Meesteren voor Tekstselectie Styling

Jarenlang was het stijlen van tekstselecties op het web een enigszins beperkte aangelegenheid. We waren grotendeels beperkt tot de standaardstyling van de browser, of op zijn best, een simpele verandering van achtergrond- en tekstkleur. De CSS Custom Highlight API verandert echter alles. Het biedt een krachtige en flexibele manier om het uiterlijk van geselecteerde tekst volledig aan te passen, wat een hele nieuwe wereld van mogelijkheden opent voor UI-ontwerp en gebruikersbetrokkenheid.

Wat is de CSS Custom Highlight API?

De CSS Custom Highlight API is een set CSS-functies waarmee ontwikkelaars tekstselecties kunnen stijlen met aangepaste stijlen die verder gaan dan de basis achtergrond- en tekstkleur. Het introduceert het ::highlight pseudo-element en gerelateerde eigenschappen, waarmee je specifieke soorten tekstselecties kunt targeten en er unieke stijlen op kunt toepassen. Deze API verbetert de gebruikerservaring aanzienlijk door visueel aantrekkelijkere en informatievere selecties mogelijk te maken.

Belangrijkste Kenmerken van de CSS Custom Highlight API:

• ::highlight Pseudo-element: De hoeksteen van de API, waarmee je geselecteerde tekst kunt targeten.
• Benoemde Highlights: Creëer aangepaste highlight-namen en pas ze toe op specifieke elementen.
• De selection Highlight: Een standaard highlight die de basis tekstselectie van de gebruiker vertegenwoordigt.
• Verbeterde Toegankelijkheid: Creëer visueel meer onderscheidende en nuttige selecties voor gebruikers met visuele beperkingen.

Browsercompatibiliteit

Eind 2023/begin 2024 groeit de browserondersteuning voor de CSS Custom Highlight API, maar is deze nog niet universeel. Grote browsers zoals Chrome en Edge hebben goede ondersteuning. Safari-ondersteuning is aanwezig, maar kan beperkt zijn afhankelijk van de versie. Controleer altijd caniuse.com voor de laatste informatie over browsercompatibiliteit voordat je de API in een productieomgeving implementeert. Overweeg het gebruik van 'progressive enhancement' om ervoor te zorgen dat je website functioneel blijft voor gebruikers met oudere browsers.

Basisgebruik: De Standaard Tekstselectie Stijlen

Laten we beginnen met een eenvoudig voorbeeld van het stijlen van de standaard tekstselectie met behulp van het ::highlight pseudo-element.

Voorbeeld: Achtergrond- en Tekstkleur Veranderen

Dit voorbeeld laat zien hoe je de achtergrond- en tekstkleur van de geselecteerde tekst kunt veranderen.

            
::highlight {
  background-color: #FFFF00; /* Geel */
  color: #000000; /* Zwart */
}

            

              
                Copy
              
            
          

In deze CSS-code targeten we de standaard tekstselectie met ::highlight en stellen we de achtergrondkleur in op geel (#FFFF00) en de tekstkleur op zwart (#000000). Dit biedt een eenvoudige maar effectieve manier om het uiterlijk van geselecteerde tekst aan te passen.

Aangepaste Highlight-Namen Maken

De ware kracht van de CSS Custom Highlight API ligt in de mogelijkheid om aangepaste highlight-namen te definiëren. Hiermee kun je specifieke elementen of secties van je website targeten en unieke styling toepassen op hun tekstselecties.

Voorbeeld: Codefragmenten Markeren

Stel dat je codefragmenten anders wilt markeren dan reguliere tekst op je website. Dit kun je bereiken door een aangepaste highlight-naam te maken.

1. Definieer een Aangepaste Highlight-Naam: Gebruik de highlight()-functie om een aangepaste highlight-naam in je CSS te definiëren.
2. Pas de Highlight-Naam toe op Elementen: Gebruik het ::highlight(jouw-highlight-naam) pseudo-element om specifieke elementen te targeten en de aangepaste styling toe te passen.

            
/* Definieer een aangepaste highlight-naam voor codefragmenten */
::highlight(code-highlight) {
  background-color: #ADD8E6; /* Lichtblauw */
  color: #00008B; /* Donkerblauw */
  font-weight: bold;
}

/* Pas de highlight-naam toe op code-elementen */
code::highlight(code-highlight) {
  /* Stijl wordt alleen toegepast wanneer tekst *binnen* een <code> tag wordt geselecteerd */
}

/* Pas de highlight toe op spans met een specifieke klasse */
.highlighted-code::highlight(code-highlight) {

}

            

              
                Copy
              
            
          

In dit voorbeeld hebben we een aangepaste highlight-naam gedefinieerd genaamd code-highlight. Vervolgens hebben we deze highlight toegepast op code-elementen. De achtergrondkleur is ingesteld op lichtblauw (#ADD8E6), de tekstkleur op donkerblauw (#00008B) en het lettergewicht op vet. Nu, telkens wanneer tekst binnen een code-element wordt geselecteerd, zal deze worden gestyled met deze aangepaste stijlen.

Geavanceerd Gebruik: Specifieke Tekstbereiken Targeten

De CSS Custom Highlight API kan ook worden gebruikt om specifieke tekstbereiken binnen een element te targeten. Dit zorgt voor nog meer gedetailleerde controle over de styling van tekstselecties.

Voorbeeld: Zoektermen Markeren

Stel je voor dat je zoektermen binnen een document wilt markeren. Dit vereist vaak JavaScript in combinatie met de CSS Highlight API.

1. Gebruik JavaScript om Zoektermen te Identificeren: Gebruik JavaScript om alle voorkomens van de zoekterm in het document te vinden.
2. Maak Highlight-Bereiken: Gebruik de Range API in JavaScript om bereiken te creëren voor elk voorkomen van de zoekterm.
3. Pas de Highlight toe: Gebruik de CSS.highlights.set()-methode om de highlight toe te passen op de gecreëerde bereiken.

            
// JavaScript-code om zoektermen te markeren
function highlightSearchTerms(searchTerm) {
  // Definieer eerst de aangepaste highlight in CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Zoek alle tekstnodes
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Pas de highlights toe met CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('CSS Custom Highlight API is not fully supported in this browser. Providing fallback');
    // Bied een fallback voor browsers met beperkte ondersteuning (bijv. oudere Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Lichtzalm
      span.style.color = '#000000'; // Zwart
      span.className = 'search-highlight-fallback'; // Voeg een klasse toe voor fallback-styling
      range.surroundContents(span);
    });
  }
}

// CSS-code om de zoek-highlight te stijlen
::highlight(search-highlight) {
  background-color: #FFA07A; /* Lichtzalm */
  color: #000000; /* Zwart */
}

/* Fallback-styling voor browsers die de API niet volledig ondersteunen */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Voorbeeldgebruik: markeer de term "voorbeeld"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

Dit codefragment demonstreert hoe je zoektermen in een document kunt markeren met JavaScript en de CSS Custom Highlight API. De JavaScript-code identificeert de zoektermen, creëert bereiken voor elk voorkomen en past de search-highlight toe op die bereiken. De CSS-code stijlt vervolgens de gemarkeerde tekst met een lichtzalm achtergrond en zwarte tekst.

Belangrijke Opmerking: Deze aanpak vereist JavaScript en is afhankelijk van de CSS.highlights API. Aangezien de ondersteuning niet universeel is, wordt een fallback-mechanisme gedemonstreerd (zoals het omringen van de tekst met een span en die span stijlen).

Overwegingen voor Toegankelijkheid

Bij het gebruik van de CSS Custom Highlight API is het cruciaal om rekening te houden met toegankelijkheid om ervoor te zorgen dat je website door iedereen bruikbaar is, inclusief gebruikers met een beperking.

Tips voor Toegankelijke Tekstselectie Styling:

• Zorg voor Voldoende Contrast: Behoud voldoende contrast tussen de achtergrond- en tekstkleur van de geselecteerde tekst om deze leesbaar te maken voor gebruikers met visuele beperkingen. De WCAG-richtlijnen bevelen een contrastverhouding van ten minste 4.5:1 aan voor normale tekst.
• Vertrouw Niet Alleen op Kleur: Vertrouw niet uitsluitend op kleur om tekstselectie aan te duiden. Gebruik aanvullende visuele aanwijzingen, zoals onderstreping of vetgedrukte tekst, om de selectie duidelijker te maken.
• Bied Alternatieve Styling voor Hoge Contrastmodus: Gebruikers die de hoge contrastmodus in hun besturingssysteem inschakelen, kunnen je aangepaste stijlen overschrijven. Bied alternatieve styling die goed werkt in de hoge contrastmodus om de leesbaarheid te garanderen. Je kunt media-queries zoals @media (forced-colors: active) gebruiken om te detecteren wanneer de hoge contrastmodus is ingeschakeld.
• Test met Hulptechnologieën: Test je website met hulptechnologieën, zoals schermlezers, om ervoor te zorgen dat de geselecteerde tekst correct wordt aangekondigd en begrepen.

Voorbeeld: Zorgen voor Voldoende Contrast

            
::highlight {
  background-color: #000080; /* Marineblauw */
  color: #FFFFFF; /* Wit */
}

            

              
                Copy
              
            
          

In dit voorbeeld hebben we gekozen voor een marineblauwe achtergrondkleur en witte tekstkleur, wat voldoende contrast biedt voor gebruikers met visuele beperkingen. Gebruik altijd een kleurcontrast-checker om te controleren of je kleurkeuzes voldoen aan de toegankelijkheidsnormen. Hulpmiddelen zoals WebAIM's Contrast Checker kunnen hierbij helpen.

Praktische Voorbeelden en Gebruiksscenario's

De CSS Custom Highlight API biedt een breed scala aan mogelijkheden om de gebruikerservaring te verbeteren. Hier zijn enkele praktische voorbeelden en gebruiksscenario's:

• Code Markeren: Zoals eerder gedemonstreerd, kun je de API gebruiken om codefragmenten te markeren met aangepaste stijlen, waardoor ze visueel aantrekkelijker en beter leesbaar worden.
• Zoektermen Markeren: Markeer zoektermen in een document om gebruikers te helpen snel de informatie te vinden die ze zoeken.
• Fouten Markeren: Markeer fouten of waarschuwingen in formulieren of andere gebruikersinterfaces om de aandacht van de gebruiker hierop te vestigen.
• Citaties Markeren: Markeer geciteerde tekst in academische papers of artikelen om deze visueel te onderscheiden van de hoofdinhoud.
• Conversaties Markeren: In chat-applicaties, markeer de eigen berichten van de gebruiker of berichten van specifieke gebruikers om ze gemakkelijker te kunnen volgen.
• Gamification: Markeer specifieke woorden of zinnen in een spel om aanwijzingen of hints te geven aan de speler.
• Tekstsamenvatting: Markeer belangrijke zinnen of frasen in een document om een snelle samenvatting van de inhoud te geven. Dit vereist vaak complexe algoritmen om het belang te bepalen.

Best Practices en Tips

Volg deze best practices en tips om het meeste uit de CSS Custom Highlight API te halen:

• Gebruik Beschrijvende Highlight-Namen: Kies beschrijvende highlight-namen die duidelijk het doel van de highlight aangeven. Dit maakt je code leesbaarder en onderhoudbaarder. Gebruik bijvoorbeeld code-highlight in plaats van highlight-1.
• Houd Stijlen Consistent: Handhaaf een consistente stijl voor al je highlights om een samenhangende gebruikerservaring te creëren. Gebruik een design system of stijlgids om consistentie te garanderen.
• Vermijd Overmatig Gebruik van Highlights: Gebruik highlights niet te veel, omdat dit afleidend en overweldigend kan zijn voor gebruikers. Gebruik ze spaarzaam en strategisch om de aandacht te vestigen op de belangrijkste informatie.
• Test op Verschillende Apparaten en Browsers: Test je website op verschillende apparaten en browsers om ervoor te zorgen dat je aangepaste highlights correct worden weergegeven. Besteed bijzondere aandacht aan mobiele apparaten en oudere browsers.
• Houd Rekening met Prestaties: Hoewel de CSS Custom Highlight API over het algemeen performant is, moet je letten op het aantal highlights dat je gebruikt, vooral bij grote documenten. Te veel highlights kunnen de prestaties beïnvloeden. Als je JavaScript gebruikt om highlights te beheren, optimaliseer dan je code om het aantal DOM-manipulaties te minimaliseren.
• Gebruik Progressive Enhancement: Omdat de browserondersteuning niet universeel is, gebruik je 'progressive enhancement'-technieken. Implementeer een fallback-mechanisme met standaard CSS-styling om ervoor te zorgen dat de ervaring bruikbaar blijft voor gebruikers van oudere browsers. Overweeg het gebruik van 'feature detection' (bijv. controleren op het bestaan van CSS.highlights) om te bepalen of je de API of de fallback moet gebruiken.

Conclusie

De CSS Custom Highlight API is een krachtig hulpmiddel om de gebruikerservaring te verbeteren en visueel aantrekkelijkere en informatievere tekstselecties te creëren. Door deze API te beheersen, kun je je UI-ontwerp naar een hoger niveau tillen en gebruikers een boeiendere en toegankelijkere browse-ervaring bieden. Hoewel de browserondersteuning nog in ontwikkeling is, zal het nu begrijpen en experimenteren met deze API je in staat stellen om geavanceerde webervaringen te creëren naarmate de adoptie groeit. Vergeet niet om prioriteit te geven aan toegankelijkheid en fallbacks te bieden voor oudere browsers om een positieve ervaring voor alle gebruikers te garanderen.

Bronnen

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Contrast Checker