CSS Custom Highlight Intersectie: Meester worden in overlappende selecties

Het ::highlight pseudo-element in CSS biedt krachtige controle over de styling van tekstselecties. Hoewel eenvoudige tekstmarkering rechttoe rechtaan is, vereist het beheren van de intersectie van meerdere selecties en het aanpassen van hun overlappende gebieden een dieper begrip. Dit artikel duikt in geavanceerde technieken om de intersectie van CSS custom highlights te beheersen, met praktische voorbeelden en bruikbare inzichten voor het creëren van gepolijste en toegankelijke gebruikersinterfaces.

De basis begrijpen: Het ::highlight pseudo-element

Het ::highlight pseudo-element stelt je in staat om tekst te stijlen die door de gebruiker is geselecteerd. Deze mogelijkheid gaat verder dan eenvoudige achtergrondkleuren en tekstkleuren; het stelt ontwikkelaars in staat om een breed scala aan CSS-eigenschappen toe te passen op geselecteerde tekst, inclusief randen, schaduwen en zelfs animaties. Dit is een aanzienlijke vooruitgang ten opzichte van het uitsluitend vertrouwen op de standaard markering van de browser, die vaak inconsistent is en niet altijd overeenkomt met het ontwerp van een website.

Basissyntaxis

De basissyntaxis voor het gebruik van ::highlight omvat het targeten van specifieke Selection-objecten via CSS-selectors of via de CSS Custom Highlight API.

Hier is een eenvoudig voorbeeld:

            ::highlight {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

Dit codefragment verandert de achtergrondkleur van elke geselecteerde tekst naar geel en de tekstkleur naar zwart. Dit is een globale stijl die van toepassing is op alle selecties op de pagina. Om specifieke selecties te targeten, moet je de CSS Custom Highlight API gebruiken.

De CSS Custom Highlight API: Fijnmazige controle

De CSS Custom Highlight API biedt een meer granulaire manier om tekstselecties te beheren en te stijlen. Het stelt je in staat om benoemde highlights te creëren en er specifieke stijlen op toe te passen. Dit is met name handig wanneer je onderscheid moet maken tussen verschillende soorten selecties of wanneer je te maken hebt met overlappende selecties.

Benoemde highlights creëren en toepassen

Om de CSS Custom Highlight API te gebruiken, heb je JavaScript nodig om benoemde highlights te creëren en toe te passen. Hier is een stapsgewijze handleiding:

1. Registreer een benoemde highlight: Gebruik CSS.registerProperty() om een aangepaste eigenschap te registreren die zal worden gebruikt om je highlight te stijlen. Dit wordt over het algemeen eenmaal aan het begin van je script gedaan.
2. Creëer een Range: Definieer de begin- en eindpunten van de tekst die je wilt markeren met behulp van Range-objecten.
3. Verkrijg het Selection-object: Verkrijg de huidige selectie met window.getSelection().
4. Voeg de Range toe aan de selectie: Gebruik de addRange()-methode om de range aan de selectie toe te voegen. Dit wordt vaak gecombineerd met het eerst verwijderen van alle bestaande ranges met removeAllRanges().
5. Pas stijlen toe: Definieer de stijl voor de highlight. Dit kan het instellen van CSS-variabelen inhouden.

Hier is een voorbeeld dat dit proces demonstreert:

            // Registreer de highlight-eigenschap (eenmalig uitvoeren)
CSS.registerProperty({
  name: '--my-highlight-color',
  syntax: '',
  inherits: false,
  initialValue: 'rgba(255, 165, 0, 0.5)' // Semi-transparant oranje
});

// Functie om de highlight toe te passen
function applyHighlight(startNode, startOffset, endNode, endOffset, highlightName) {
  // 1. Creëer een Range-object
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);

  // 2. Verkrijg het Selection-object
  const selection = window.getSelection();

  // 3. Wis bestaande selecties en voeg de nieuwe range toe
  selection.removeAllRanges();
  selection.addRange(range);

  // 4. Pas de highlight toe met ::highlight(highlightName) in CSS
  //   Geen JavaScript nodig voor directe styling, CSS regelt het uiterlijk
}

// Voorbeeld van gebruik:
const myElement = document.getElementById('my-text-element');
// Aannemende dat myElement de tekst bevat die je wilt markeren
applyHighlight(myElement.firstChild, 5, myElement.firstChild, 15, 'my-highlight');

            

              
                Copy
              
            
          

En de bijbehorende CSS:

            ::highlight(my-highlight) {
  background-color: var(--my-highlight-color);
}

            

              
                Copy
              
            
          

In dit voorbeeld registreren we de aangepaste eigenschap --my-highlight-color en markeren we vervolgens de tekst van karakter 5 tot 15 binnen het `my-text-element`. De CSS gebruikt vervolgens de geregistreerde eigenschap om de achtergrondkleur in te stellen.

Internationale overwegingen voor tekstbereiken

Bij het werken met tekstbereiken in verschillende talen is het cruciaal om rekening te houden met Unicode en tekencodering. De waarden startOffset en endOffset vertegenwoordigen karakterindices, wat problematisch kan zijn bij talen die multi-byte karakters of grafeemclusters gebruiken. In sommige Oost-Aziatische talen kan een enkel karakter bijvoorbeeld worden vertegenwoordigd door meerdere bytes. Mogelijk moet je bibliotheken gebruiken die Unicode correct afhandelen om ervoor te zorgen dat je markeringen nauwkeurig worden toegepast in verschillende talen.

Bovendien kan de tekstrichting (links-naar-rechts versus rechts-naar-links) ook van invloed zijn op hoe bereiken worden berekend en toegepast. Zorg ervoor dat je je markeringsimplementatie test met verschillende talen en scripts om een goede functionaliteit en weergave te garanderen.

Omgaan met overlappende selecties

De echte uitdaging ontstaat bij het omgaan met meerdere selecties die elkaar overlappen. Het standaardgedrag van de browser voor overlappende selecties kan onvoorspelbaar zijn en levert vaak niet het gewenste visuele effect op. De CSS Custom Highlight API biedt tools om deze overlap te beheren, waardoor je kunt bepalen hoe verschillende highlights met elkaar interageren.

Het probleem begrijpen

Wanneer meerdere selecties elkaar overlappen, past de browser doorgaans de stijlen van de laatst gemaakte selectie toe. Dit kan leiden tot visuele inconsistenties en een verwarrende gebruikerservaring. Als je bijvoorbeeld twee overlappende highlights hebt, een groene en een blauwe, kan het overlappende gebied alleen de blauwe highlight tonen, waardoor de groene volledig wordt verborgen. Om dit aan te pakken, moet je een strategie implementeren om de overlap op te lossen.

Strategieën voor het oplossen van overlap

Er zijn verschillende strategieën die je kunt gebruiken om overlappende highlights op te lossen:

• Prioritering: Wijs verschillende prioriteiten toe aan verschillende soorten highlights. De highlight met de hoogste prioriteit krijgt voorrang in het overlappende gebied.
• Mengen: Meng de kleuren van de overlappende highlights om een nieuwe kleur te creëren. Dit kan een visueel aantrekkelijke manier zijn om de aanwezigheid van meerdere selecties aan te geven.
• Gelaagdheid: Gebruik CSS-eigenschappen zoals z-index om de stapelvolgorde van de highlights te bepalen. Dit stelt je in staat een gelaagd effect te creëren, waarbij de ene highlight boven op de andere verschijnt.
• Aangepaste rendering: Voor complexe scenario's kun je JavaScript gebruiken om de overlappende bereiken te analyseren en aangepaste visuele elementen te renderen, zoals randen of iconen, om de aanwezigheid van meerdere selecties aan te geven.

Prioritering implementeren

Prioritering omvat het toewijzen van een prioriteitsniveau aan elke highlight en ervoor zorgen dat de highlight met de hoogste prioriteit wordt weergegeven in het overlappende gebied. Dit kan worden bereikt door de volgorde waarin highlights worden toegepast zorgvuldig te beheren en CSS te gebruiken om hun uiterlijk te controleren.

Hier is een voorbeeld van hoe je prioritering zou kunnen implementeren met CSS-variabelen en JavaScript:

            // Definieer highlight-prioriteiten
const highlightPriorities = {
  'important-highlight': 2,
  'secondary-highlight': 1,
  'default-highlight': 0
};

// Functie om een highlight met een specifieke prioriteit toe te passen
function applyHighlightWithPriority(startNode, startOffset, endNode, endOffset, highlightName) {
  // (Dezelfde logica voor het maken van een range en selectie als voorheen)
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // Pas de highlight-naam toe op een aangepaste eigenschap van de selectie.
  // Geen directe CSS-manipulatie hier; vertrouwt op de onderstaande CSS.
  //  Dit vereist polyfilling voor browsers die CSS.supports missen.
  //  Wees ook voorzichtig met de beveiligingsimplicaties van het instellen van
  //  willekeurige stijlen via JavaScript en zorg ervoor dat alleen vertrouwde code dit kan doen.
  let priority = highlightPriorities[highlightName] || 0;

  if (CSS.supports('selector(::highlight(' + highlightName + ''))')) {
      // Het is niet nodig om het stijlobject rechtstreeks te manipuleren als CSS.supports beschikbaar is
      // De CSS zal de rest afhandelen op basis van de selectie.
  }
  else {
      // Fallback-gedrag, pas stijlen direct toe. Dit wordt NIET aanbevolen
      //  voor productiecode, omdat het moeilijk te beheren en te onderhouden is.
      //   Het is beter om de CSS Custom Highlight API met een polyfill te gebruiken, of simpelweg
      //   de markeringsfunctie sierlijk te degraderen als de browser deze niet ondersteunt.
      console.warn("CSS.supports niet ondersteund, directe stijlmanipulatie kan nodig zijn");
  }

}

            

              
                Copy
              
            
          

En de bijbehorende CSS:

            ::highlight(default-highlight) {
  background-color: lightgray;
  z-index: 0; // Laagste prioriteit
}

::highlight(secondary-highlight) {
  background-color: lightblue;
  z-index: 1;
}

::highlight(important-highlight) {
  background-color: orange;
  z-index: 2; // Hoogste prioriteit
}

/* Gebruik dit om z-index problemen in sommige browsers aan te pakken */
::highlight {
  position: relative;
}

            

              
                Copy
              
            
          

In dit voorbeeld wordt aan elk highlight-type een z-index-waarde toegewezen, waarbij hogere waarden een hogere prioriteit aangeven. De position: relative-declaratie op het ::highlight pseudo-element kan nodig zijn om ervoor te zorgen dat z-index in sommige browsers correct werkt.

Mengen implementeren

Mengen houdt in dat de kleuren van overlappende highlights worden gecombineerd om een nieuwe kleur te creëren. Dit kan worden bereikt met CSS-blendmodi of door de achtergrondkleuren van de highlights te manipuleren met JavaScript.

Hier is een voorbeeld van hoe je mengen kunt implementeren met CSS-blendmodi:

            ::highlight(highlight-1) {
  background-color: rgba(255, 0, 0, 0.5); /* Rood met 50% dekking */
  mix-blend-mode: multiply;
}

::highlight(highlight-2) {
  background-color: rgba(0, 0, 255, 0.5); /* Blauw met 50% dekking */
  mix-blend-mode: multiply;
}

            

              
                Copy
              
            
          

In dit voorbeeld wordt de eigenschap mix-blend-mode: multiply gebruikt om de kleuren van de overlappende highlights te mengen. Wanneer een rode highlight een blauwe highlight overlapt, zal de resulterende kleur in het overlappende gebied paars zijn.

Gelaagdheid implementeren

Gelaagdheid omvat het gebruik van CSS-eigenschappen zoals z-index om de stapelvolgorde van de highlights te bepalen. Dit stelt je in staat een gelaagd effect te creëren, waarbij de ene highlight boven op de andere verschijnt. Deze aanpak is vergelijkbaar met prioritering, maar biedt meer flexibiliteit op het gebied van visuele styling.

Het voorbeeld in de sectie Prioritering demonstreert al hoe je gelaagdheid kunt implementeren met z-index.

Aangepaste rendering implementeren

Voor complexe scenario's kun je JavaScript gebruiken om de overlappende bereiken te analyseren en aangepaste visuele elementen te renderen, zoals randen of iconen, om de aanwezigheid van meerdere selecties aan te geven. Deze aanpak biedt de meeste flexibiliteit, maar vereist ook de meeste inspanning om te implementeren.

Hier is een algemeen overzicht van hoe je aangepaste rendering zou kunnen implementeren:

1. Analyseer overlappende bereiken: Gebruik JavaScript om door de selecties te itereren en eventuele overlappende bereiken te identificeren.
2. Creëer aangepaste elementen: Maak HTML-elementen, zoals <span> of <div>, om de aangepaste visuele elementen weer te geven.
3. Positioneer elementen: Positioneer de aangepaste elementen nauwkeurig over de overlappende bereiken met behulp van JavaScript en CSS.
4. Stijl elementen: Pas aangepaste stijlen toe op de elementen om het gewenste visuele effect te creëren.
5. Voeg elementen in: Voeg de aangepaste elementen in de DOM in en zorg ervoor dat ze correct gepositioneerd zijn ten opzichte van de tekst.

Deze aanpak kan complex zijn en vereist veel aandacht voor detail, maar het biedt de ultieme controle over het uiterlijk van overlappende highlights. Het is belangrijk om randgevallen, zoals tekstomloop en veranderingen in lettergrootte, af te handelen om ervoor te zorgen dat de aangepaste elementen correct gepositioneerd blijven.

Toegankelijkheidsoverwegingen

Bij het aanpassen van tekstmarkeringen is het cruciaal om rekening te houden met toegankelijkheid om ervoor te zorgen dat je website bruikbaar is voor mensen met een beperking. Hier zijn enkele belangrijke overwegingen:

• Kleurcontrast: Zorg ervoor dat het kleurcontrast tussen de markeringskleur en de tekstkleur voldoende is voor mensen met een visuele beperking. Gebruik een kleurcontrastcontrole om te verifiëren dat de contrastverhouding voldoet aan de toegankelijkheidsrichtlijnen. De contrastcontrole van WebAIM is een geweldige bron.
• Toetsenbordnavigatie: Zorg ervoor dat gebruikers met het toetsenbord kunnen navigeren en interageren met gemarkeerde tekst. Dit kan inhouden dat ARIA-attributen aan de gemarkeerde elementen worden toegevoegd om semantische informatie te verstrekken aan hulptechnologieën.
• Compatibiliteit met schermlezers: Test je markeringsimplementatie met schermlezers om ervoor te zorgen dat de gemarkeerde tekst correct wordt aangekondigd. Geef beschrijvende tekst voor de markeringen om gebruikers te helpen hun doel en betekenis te begrijpen.
• Vermijd het uitsluitend vertrouwen op kleur: Vertrouw niet alleen op kleur om betekenis over te brengen. Bied alternatieve visuele aanwijzingen, zoals randen of iconen, om ervoor te zorgen dat de markeringen toegankelijk zijn voor mensen die kleurenblind zijn.

Praktijkvoorbeelden en use-cases

Aangepaste highlight-intersectie kan in verschillende praktijkscenario's worden gebruikt om de gebruikerservaring te verbeteren. Hier zijn enkele voorbeelden:

• Code-editors: Code-editors kunnen aangepaste highlights gebruiken om syntaxisfouten, waarschuwingen en andere belangrijke informatie aan te geven. Overlappende highlights kunnen worden gebruikt om meerdere problemen in hetzelfde codegebied weer te geven.
• Documenteditors: Documenteditors kunnen aangepaste highlights gebruiken om bijgehouden wijzigingen, opmerkingen en annotaties aan te geven. Overlappende highlights kunnen worden gebruikt om meerdere revisies in hetzelfde tekstgedeelte weer te geven.
• Zoekresultaten: Pagina's met zoekresultaten kunnen aangepaste highlights gebruiken om de zoektermen binnen de zoekresultaten te tonen. Overlappende highlights kunnen worden gebruikt om meerdere zoektermen die in hetzelfde tekstgebied verschijnen, weer te geven.
• Annotatietools: Annotatietools kunnen aangepaste highlights gebruiken om gebruikers in staat te stellen tekst te markeren en te annoteren. Overlappende highlights kunnen worden gebruikt om verschillende soorten annotaties in hetzelfde tekstgebied weer te geven.

Best practices

Hier zijn enkele best practices die je kunt volgen bij het implementeren van CSS custom highlight intersectie:

• Gebruik de CSS Custom Highlight API: De CSS Custom Highlight API biedt de meest flexibele en efficiënte manier om tekstselecties te beheren en te stijlen.
• Houd rekening met toegankelijkheid: Houd altijd rekening met toegankelijkheid bij het aanpassen van tekstmarkeringen. Zorg ervoor dat de markeringen bruikbaar zijn voor mensen met een beperking.
• Test grondig: Test je markeringsimplementatie grondig op verschillende browsers, apparaten en talen om er zeker van te zijn dat deze correct werkt.
• Gebruik een consistente visuele stijl: Gebruik een consistente visuele stijl voor je highlights om een duidelijke en intuïtieve gebruikerservaring te bieden.
• Documenteer je code: Documenteer je code duidelijk en beknopt om het onderhoud en de updates te vergemakkelijken.

Conclusie

CSS custom highlight intersectie is een krachtige techniek waarmee je visueel aantrekkelijke en informatieve gebruikersinterfaces kunt creëren. Door het ::highlight pseudo-element en de CSS Custom Highlight API te beheersen, kun je het uiterlijk van tekstselecties controleren en de intersectie van meerdere selecties beheren om een naadloze en toegankelijke gebruikerservaring te bieden. Vergeet niet om prioriteit te geven aan toegankelijkheid, grondig te testen en een consistente visuele stijl te gebruiken om ervoor te zorgen dat je markeringsimplementatie effectief en gebruiksvriendelijk is.

Verdere bronnen

• MDN Web Docs: ::highlight
• MDN Web Docs: CSS Custom Highlight API
• WebAIM Color Contrast Checker