Hev nivået på ditt brukergrensesnitt: Mestre CSS Custom Highlight API for styling av tekstmarkering

I dette eksempelet har vi definert et eget markeringsnavn kalt code-highlight. Vi har deretter brukt denne markeringen på code-elementer. Bakgrunnsfargen er satt til lyseblå (#ADD8E6), tekstfargen er satt til mørkeblå (#00008B), og skriftvekten er satt til fet. Nå, når tekst markeres inne i et code-element, vil den bli stylet med disse tilpassede stilene.

Avansert bruk: Målretting mot spesifikke tekstområder

CSS Custom Highlight API kan også brukes til å målrette mot spesifikke tekstområder innenfor et element. Dette gir enda mer detaljert kontroll over stylingen av tekstmarkeringer.

Eksempel: Utheving av søkeord

Forestill deg at du vil utheve søkeord i et dokument. Dette krever ofte JavaScript i kombinasjon med CSS Highlight API.

1. Bruk JavaScript for å identifisere søkeord: Bruk JavaScript for å finne alle forekomster av søkeordet i dokumentet.
2. Opprett markeringsområder: Bruk Range API-et i JavaScript for å opprette områder for hver forekomst av søkeordet.
3. Bruk markeringen: Bruk CSS.highlights.set()-metoden for å bruke markeringen på de opprettede områdene.

            
// JavaScript-kode for å utheve søkeord
function highlightSearchTerms(searchTerm) {
  // Først, definer den egendefinerte markeringen i CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Finn alle tekstnoder
  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);
    }
  });

  // Bruk markeringene med CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('CSS Custom Highlight API støttes ikke fullt ut i denne nettleseren. Tilbyr reserveløsning');
    // Tilby en reserveløsning for nettlesere med begrenset støtte (f.eks. eldre Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Lys lakserosa
      span.style.color = '#000000'; // Svart
      span.className = 'search-highlight-fallback'; // Legg til en klasse for reservestyling
      range.surroundContents(span);
    });
  }
}

// CSS-kode for å style søkemarkeringen
::highlight(search-highlight) {
  background-color: #FFA07A; /* Lys lakserosa */
  color: #000000; /* Svart */
}

/* Reservestyling for nettlesere som ikke støtter API-et fullt ut */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Eksempel på bruk: uthev termen "example"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

Dette kodeutdraget demonstrerer hvordan man kan utheve søkeord i et dokument ved hjelp av JavaScript og CSS Custom Highlight API. JavaScript-koden identifiserer søkeordene, oppretter områder for hver forekomst, og bruker search-highlight på disse områdene. CSS-koden styler deretter den uthevede teksten med en lys lakserosa bakgrunn og svart tekst.

Viktig merknad: Denne tilnærmingen krever JavaScript og er avhengig av CSS.highlights API-et. Siden støtten ikke er universell, demonstreres en reserveløsning (som å omgi teksten med en `span` og style den `span`-en).

Hensyn til tilgjengelighet

Når du bruker CSS Custom Highlight API, er det avgjørende å ta hensyn til tilgjengelighet for å sikre at nettstedet ditt er brukbart for alle, inkludert brukere med nedsatt funksjonsevne.

Tips for tilgjengelig styling av tekstmarkering:

• Sørg for tilstrekkelig kontrast: Oppretthold tilstrekkelig kontrast mellom bakgrunnen og tekstfargen på den markerte teksten for å gjøre den lesbar for brukere med nedsatt syn. WCAG-retningslinjene anbefaler et kontrastforhold på minst 4,5:1 for normal tekst.
• Unngå å stole utelukkende på farge: Ikke stol utelukkende på farge for å indikere en tekstmarkering. Bruk ekstra visuelle signaler, som understreking eller fet skrift, for å gjøre markeringen tydeligere.
• Tilby alternativ styling for høykontrastmodus: Brukere som aktiverer høykontrastmodus i operativsystemet sitt, kan overstyre dine tilpassede stiler. Tilby alternativ styling som fungerer godt i høykontrastmodus for å sikre lesbarhet. Du kan bruke medieforespørsler som @media (forced-colors: active) for å oppdage når høykontrastmodus er aktivert.
• Test med hjelpeteknologi: Test nettstedet ditt med hjelpeteknologier, som skjermlesere, for å sikre at den markerte teksten blir korrekt annonsert og forstått.

Eksempel: Sikre tilstrekkelig kontrast

            
::highlight {
  background-color: #000080; /* Marineblå */
  color: #FFFFFF; /* Hvit */
}

            

              
                Copy
              
            
          

I dette eksempelet har vi valgt en marineblå bakgrunnsfarge og hvit tekstfarge, noe som gir tilstrekkelig kontrast for brukere med nedsatt syn. Bruk alltid en fargekontrastsjekker for å verifisere at fargevalgene dine oppfyller tilgjengelighetsstandarder. Verktøy som WebAIMs Contrast Checker kan være nyttige.

Praktiske eksempler og bruksområder

CSS Custom Highlight API tilbyr et bredt spekter av muligheter for å forbedre brukeropplevelsen. Her er noen praktiske eksempler og bruksområder:

• Kodeutheving: Som demonstrert tidligere, kan du bruke API-et til å utheve kodebiter med tilpassede stiler, noe som gjør dem mer visuelt tiltalende og lettere å lese.
• Utheving av søkeord: Uthev søkeord i et dokument for å hjelpe brukere med å raskt finne informasjonen de leter etter.
• Utheving av feil: Uthev feil eller advarsler i skjemaer eller andre brukergrensesnitt for å rette brukerens oppmerksomhet mot dem.
• Utheving av sitater: Uthev sitert tekst i akademiske artikler eller avhandlinger for å visuelt skille den fra hovedinnholdet.
• Utheving av samtaler: I chat-applikasjoner, uthev brukerens egne meldinger eller meldinger fra spesifikke brukere for å gjøre dem lettere å følge.
• Spillifisering: Uthev spesifikke ord eller setninger i et spill for å gi ledetråder eller hint til spilleren.
• Tekstsammendrag: Uthev nøkkelsetninger eller -fraser i et dokument for å gi et raskt sammendrag av innholdet. Dette involverer ofte komplekse algoritmer for å bestemme viktighet.

Beste praksis og tips

For å få mest mulig ut av CSS Custom Highlight API, følg disse beste praksisene og tipsene:

• Bruk beskrivende markeringsnavn: Velg beskrivende markeringsnavn som tydelig indikerer formålet med markeringen. Dette vil gjøre koden din mer lesbar og vedlikeholdbar. For eksempel, bruk code-highlight i stedet for highlight-1.
• Hold stiler konsistente: Oppretthold en konsistent stil på tvers av alle markeringene dine for å skape en sammenhengende brukeropplevelse. Bruk et designsystem eller en stilguide for å sikre konsistens.
• Unngå overforbruk av markeringer: Ikke overdriv bruken av markeringer, da dette kan være distraherende og overveldende for brukerne. Bruk dem sparsomt og strategisk for å rette oppmerksomheten mot den viktigste informasjonen.
• Test på forskjellige enheter og nettlesere: Test nettstedet ditt på forskjellige enheter og nettlesere for å sikre at dine tilpassede markeringer vises korrekt. Vær spesielt oppmerksom på mobile enheter og eldre nettlesere.
• Vurder ytelse: Selv om CSS Custom Highlight API generelt har god ytelse, vær oppmerksom på antall markeringer du bruker, spesielt på store dokumenter. For mange markeringer kan påvirke ytelsen. Hvis du bruker JavaScript til å administrere markeringer, optimaliser koden din for å minimere antall DOM-manipulasjoner.
• Bruk progressiv forbedring: Fordi nettleserstøtten ikke er universell, bruk teknikker for progressiv forbedring. Implementer en reserveløsning ved hjelp av standard CSS-styling for å sikre at opplevelsen forblir brukbar for de med eldre nettlesere. Vurder å bruke funksjonsgjenkjenning (f.eks. ved å sjekke eksistensen av CSS.highlights) for å avgjøre om du skal bruke API-et eller reserveløsningen.

Konklusjon

CSS Custom Highlight API er et kraftig verktøy for å forbedre brukeropplevelsen og skape mer visuelt tiltalende og informative tekstmarkeringer. Ved å mestre dette API-et kan du ta ditt UI-design til neste nivå og gi brukerne en mer engasjerende og tilgjengelig nettopplevelse. Selv om nettleserstøtten fortsatt er under utvikling, vil det å forstå og eksperimentere med dette API-et nå posisjonere deg for å skape banebrytende nettopplevelser etter hvert som utbredelsen øker. Husk å prioritere tilgjengelighet og tilby reserveløsninger for eldre nettlesere for å sikre en positiv opplevelse for alle brukere.

Ressurser

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