CSS Custom Highlight API: Mestre tekstutvelgelse med flere områder for dynamiske brukergrensesnitt

CSS Custom Highlight API er et kraftig nytt verktøy for webutviklere som gir enestående kontroll over tekstutvelgelse og utheving i webapplikasjoner. I motsetning til de grunnleggende nettleserfunksjonene for utvelgelse, lar dette API-et utviklere definere egendefinerte uthevingsstiler og administrere flere utvalgsområder programmatisk. Dette åpner for en verden av muligheter for å skape rike, interaktive og tilgjengelige brukergrensesnitt. Denne guiden gir en omfattende oversikt over API-et, og utforsker dets muligheter, brukstilfeller og implementeringsdetaljer, alt med et globalt perspektiv.

Forstå det grunnleggende om CSS Custom Highlight API

Før du dykker ned i komplekse scenarier, er det viktig å forstå de grunnleggende konseptene i API-et. I sin kjerne introduserer CSS Custom Highlight API flere nye CSS-pseudo-elementer, inkludert:

• ::selection: Representerer den delen av et dokument som er valgt av brukeren. Dette har vært tilgjengelig lenge, og gir grunnleggende styling av tekstutvalg.
• ::highlight: Et mer generelt pseudo-element for å bruke stiler på uthevede områder. Dette er nøkkelen til det nye API-ets kraft. Du kan nå opprette navngitte uthevinger og bruke egendefinert styling på hver enkelt.
• ::target-text: Representerer den delen av et dokument som er målrettet av et URI-fragment (f.eks. #section-title). Det lar deg style delen av siden som brukeren rullet til via en lenke.
• ::spelling-error: Representerer tekst identifisert av brukeragenten som inneholder stavefeil. Tilbyr stylingkontroll over stavefeilindikatorer.
• ::grammar-error: Representerer tekst identifisert av brukeragenten som inneholder grammatiske feil. Tilbyr stylingkontroll over grammatikkfeilindikatorer.

::highlight pseudo-elementet er arbeidshesten til API-et. Det lar deg definere navngitte uthevinger i CSS og deretter bruke disse uthevingene på spesifikke tekstområder ved hjelp av JavaScript.

Nøkkelkonsepter: Områder og uthevinger

API-et dreier seg om konseptene områder og uthevinger:

• Område: En sammenhengende del av tekst i dokumentet. Representert av Range-objektet i JavaScript.
• Utheving: En navngitt stil som brukes på ett eller flere områder. Definert i CSS ved hjelp av ::highlight(highlight-name) pseudo-elementet og manipulert gjennom Highlight og HighlightRegistry API-ene i JavaScript.

Tenk på det slik: et område er 'hva' (teksten du vil utheve), og uthevingen er 'hvordan' (stilen du vil bruke).

Sette opp egendefinerte uthevinger med CSS

Det første trinnet er å definere dine egendefinerte uthevingsstiler i CSS. Du gjør dette ved hjelp av ::highlight() pseudo-elementet.

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

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

            

              
                Copy
              
            
          

I dette eksemplet har vi definert to egendefinerte uthevingsstiler: search-result og important-term. search-result-uthevingen vil bruke en gul bakgrunn med svart tekst, mens important-term-uthevingen vil bruke en lyseblå bakgrunn og gjøre teksten fet. Du kan definere hvilke som helst CSS-egenskaper du vil innenfor disse uthevingsstilene.

Administrere uthevinger med JavaScript

Når du har definert uthevingsstilene dine i CSS, kan du bruke JavaScript til å bruke dem på spesifikke tekstområder. Highlight og HighlightRegistry API-ene gir verktøyene for dette.

The HighlightRegistry

HighlightRegistry er et globalt objekt som administrerer alle uthevingene i dokumentet. Du kan få tilgang til det via CSS-grensesnittet:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Opprette uthevinger

For å opprette en utheving, bruker du Highlight-konstruktøren:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

I utgangspunktet har en utheving ingen områder tilknyttet seg. Du må legge til områder i uthevingen ved hjelp av addRange()-metoden.

Legge til områder i en utheving

For å legge til et område i en utheving, må du først opprette et Range-objekt. Du kan gjøre dette ved hjelp av document.createRange()-metoden:

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

highlight.addRange(range);

            

              
                Copy
              
            
          

Hvor:

• startNode: DOM-noden der området starter.
• startOffset: Tegnutjevningen i startNode der området starter.
• endNode: DOM-noden der området slutter.
• endOffset: Tegnutjevningen i endNode der området slutter.

Eksempel: Utheving av søkeresultater

La oss si at du har en tekstblokk og du vil utheve alle forekomster av et søkeord. Slik kan du gjøre det:

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

  if (index === -1) {
    return; // Søkeord ikke funnet
  }

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

  // Bruk 'search-result'-uthevingsstilen
  highlightRegistry.set('search-result', highlight);
}

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

            

              
                Copy
              
            
          

Dette kodeutdraget finner alle forekomster av ordet "example" i elementet med ID-en "content" og bruker search-result-uthevingsstilen på dem.

Fjerne områder og uthevinger

Du kan fjerne områder fra en utheving ved hjelp av deleteRange()-metoden:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

Du kan også fjerne alle områder fra en utheving ved hjelp av clear()-metoden:

            
highlight.clear();

            

              
                Copy
              
            
          

For å fjerne en utheving helt, kan du bruke delete()-metoden til HighlightRegistry:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Avanserte brukstilfeller og hensyn

CSS Custom Highlight API er et kraftig verktøy som kan brukes i en rekke avanserte scenarier.

Samarbeidsredigering

I samarbeidsredigeringsapplikasjoner kan du bruke API-et til å utheve endringene som er gjort av forskjellige brukere. Hver bruker kan ha sin egen egendefinerte uthevingsstil, slik at du enkelt kan se hvem som har gjort hvilke endringer. For eksempel kan en samarbeidsdokumentredigerer som brukes av team i flere land, bruke forskjellige uthevingsfarger for å representere redigeringer fra teammedlemmer i Japan, Tyskland og Brasil.

Kodeeditorer

Kodeeditorer kan utnytte API-et for syntaksutheving. Ulike syntakselementer (f.eks. nøkkelord, operatorer, kommentarer) kan tildeles forskjellige uthevingsstiler. Moderne kodeeditorer har ofte komplekse syntaksuthevingsregler, og dette API-et gir mulighet for mer presis og tilpassbar kontroll enn tradisjonelle metoder.

Tilgjengelighet

API-et kan brukes til å forbedre tilgjengeligheten. For eksempel kan du utheve det fokuserte elementet eller teksten som leses av en skjermleser. Husk å sikre tilstrekkelig fargekontrast mellom uthevingsbakgrunnen og tekstfargen for brukere med synshemming. WCAG (Web Content Accessibility Guidelines) gir spesifikke retningslinjer for fargekontrastforhold.

Internasjonalisering (i18n) hensyn

Når du bruker API-et i flerspråklige applikasjoner, må du være oppmerksom på følgende:

• Tekstretning: Sørg for at uthevingsstilene dine fungerer korrekt med både venstre-til-høyre (LTR) og høyre-til-venstre (RTL) språk.
• Ordbegrensninger: Ulike språk har forskjellige regler for ordbegrensninger. Sørg for å bruke passende algoritmer for deteksjon av ordbegrensninger når du uthever ord eller uttrykk.
• Tegnsett: API-et støtter Unicode, slik at du kan utheve tekst på hvilket som helst språk.

Når du for eksempel uthever søkeord på arabisk (et RTL-språk), må du sørge for at uthevingen visuelt gjenspeiler riktig tekstretning. På samme måte, når du uthever nøkkelord på japansk, som ikke bruker mellomrom mellom ord, må du bruke passende morfologisk analyse for å identifisere ordbegrensninger.

Ytelseshensyn

Selv om API-et er kraftig, er det viktig å være oppmerksom på ytelsen. Å opprette og administrere et stort antall uthevinger kan påvirke ytelsen, spesielt i store dokumenter. Vurder disse tipsene:

• Optimaliser områdeoppretting: Oppretting av Range-objekter kan være dyrt. Gjenbruk eksisterende områder når det er mulig.
• Batchoppdateringer: Når du gjør flere endringer i uthevinger, kan du samle dem i en enkelt oppdatering for å minimere omflytinger.
• Lat lasting: Uthev bare teksten som er synlig for brukeren. Last inn flere uthevinger etter hvert som brukeren ruller.
• Virtualisering: For veldig store dokumenter bør du vurdere å bruke virtualiseringsteknikker for bare å gjengi den synlige delen av dokumentet.

Praktiske eksempler og kodeutdrag

Eksempel 1: Dynamisk nøkkelordutheving

Dette eksemplet demonstrerer hvordan du dynamisk kan utheve nøkkelord i en tekst basert på brukerinndata. Tenk deg at en bruker skriver inn et søk i en søkeboks; de uthevede nøkkelordene oppdateres i sanntid.

            


  This is some example text.  It contains keywords that we want to highlight.  We will highlight the keywords based on user input.


            

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

            

              
                Copy
              
            
          

Eksempel 2: Implementere en "Finn alle"-funksjon

Dette eksemplet simulerer en "Finn alle"-funksjon, som ligner de som finnes i tekstredigerere og IDE-er. Alle forekomster av et søkeord er uthevet samtidig.

            


  This document contains multiple instances of the search term. The search term will be highlighted throughout the document.
  This is a second instance of the search term. Here's another search term.


            

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

            

              
                Copy
              
            
          

Nettleserkompatibilitet og polyfills

CSS Custom Highlight API er en relativt ny funksjon, så nettleserkompatibiliteten kan variere. Fra og med slutten av 2024 har den god støtte i moderne nettlesere som Chrome, Firefox, Safari og Edge. Det er imidlertid viktig å sjekke de nyeste nettleserkompatibilitetsdataene på nettsteder som "Can I use..." for å sikre at målgruppen din kan bruke funksjonene dine. Hvis du trenger å støtte eldre nettlesere, kan du utforske polyfills eller alternative tilnærminger som etterligner funksjonaliteten til API-et, selv om de kanskje ikke gir det samme nivået av ytelse eller kvalitet.

Fremtiden for tekstutvelgelse og utheving

CSS Custom Highlight API representerer et betydelig fremskritt innen webutvikling, og gir utviklere detaljert kontroll over tekstutvelgelse og utheving. Etter hvert som API-et modnes og nettleserstøtten forbedres, kan vi forvente å se enda mer innovative bruksområder for denne teknologien. Fra avanserte tekstredigerere til samarbeidsdokumentplattformer er mulighetene uendelige. Dette API-et gir en rikere, mer interaktiv og mer tilgjengelig brukeropplevelse. Vurder hvordan dette kan brukes til å forbedre brukeropplevelser i alt fra internasjonale nyhetssider til nettbaserte språkopplæringsplattformer.

Konklusjon

CSS Custom Highlight API er et kraftig verktøy for å lage dynamiske og interaktive brukergrensesnitt. Ved å forstå de grunnleggende konseptene for områder, uthevinger og HighlightRegistry, kan du utnytte dette API-et til å bygge overbevisende brukeropplevelser som tidligere var vanskelige eller umulige å oppnå. Når du utforsker dette API-et, husk å vurdere tilgjengelighet, internasjonalisering og ytelse for å sikre at applikasjonene dine er brukervennlige og effektive for et globalt publikum. Med sin fleksibilitet og kontroll er CSS Custom Highlight API klar til å bli en viktig del av den moderne webutviklerens verktøykasse.