Tag din UI til næste niveau: Behersk CSS Custom Highlight API til styling af tekstmarkering

I dette eksempel har vi defineret et brugerdefineret highlight-navn kaldet code-highlight. Vi har derefter anvendt dette highlight på code-elementer. Baggrundsfarven er sat til lyseblå (#ADD8E6), tekstfarven er sat til mørkeblå (#00008B), og skriftvægten er sat til fed. Nu, hver gang tekst markeres inden i et code-element, vil det blive stylet med disse brugerdefinerede stilarter.

Avanceret brug: Målretning af specifikke tekstområder

CSS Custom Highlight API kan også bruges til at målrette specifikke tekstområder inden for et element. Dette giver mulighed for endnu mere finkornet kontrol over styling af tekstmarkering.

Eksempel: Fremhævning af søgetermer

Forestil dig, at du vil fremhæve søgetermer i et dokument. Dette kræver ofte JavaScript i kombination med CSS Highlight API.

1. Brug JavaScript til at identificere søgetermer: Brug JavaScript til at finde alle forekomster af søgetermen i dokumentet.
2. Opret highlight-områder: Brug Range API'et i JavaScript til at oprette områder for hver forekomst af søgetermen.
3. Anvend highlightet: Brug CSS.highlights.set()-metoden til at anvende highlightet på de oprettede områder.

            
// JavaScript-kode til at fremhæve søgetermer
function highlightSearchTerms(searchTerm) {
  // Definer først det brugerdefinerede highlight i CSS
  const highlightName = 'search-highlight';
  const ranges = [];

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

  // Anvend highlights ved hjælp af 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');
    // Sørg for et fallback til browsere med begrænset understøttelse (f.eks. ældre Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Lys laksefarve
      span.style.color = '#000000'; // Sort
      span.className = 'search-highlight-fallback'; // Tilføj en klasse til fallback-styling
      range.surroundContents(span);
    });
  }
}

// CSS-kode til at style søge-highlightet
::highlight(search-highlight) {
  background-color: #FFA07A; /* Lys laksefarve */
  color: #000000; /* Sort */
}

/* Fallback-styling til browsere, der ikke fuldt ud understøtter API'et */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Eksempel på brug: fremhæv termen "example"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

Dette kode-snippet demonstrerer, hvordan man fremhæver søgetermer i et dokument ved hjælp af JavaScript og CSS Custom Highlight API. JavaScript-koden identificerer søgetermerne, opretter områder for hver forekomst og anvender search-highlight på disse områder. CSS-koden styler derefter den fremhævede tekst med en lys laksefarvet baggrund og sort tekst.

Vigtig bemærkning: Denne tilgang kræver JavaScript og er afhængig af CSS.highlights API'et. Da understøttelsen ikke er universel, demonstreres en fallback-mekanisme (som at omgive teksten med et `span` og style det `span`).

Overvejelser om tilgængelighed

Når du bruger CSS Custom Highlight API, er det afgørende at overveje tilgængelighed for at sikre, at din hjemmeside kan bruges af alle, inklusive brugere med handicap.

Tips til tilgængelig styling af tekstmarkering:

• Sørg for tilstrækkelig kontrast: Oprethold tilstrækkelig kontrast mellem baggrunds- og tekstfarven på den markerede tekst for at gøre den læselig for brugere med synshandicap. WCAG-retningslinjer anbefaler et kontrastforhold på mindst 4,5:1 for normal tekst.
• Undgå at stole udelukkende på farve: Stol ikke udelukkende på farve for at indikere tekstmarkering. Brug yderligere visuelle tegn, såsom understregning eller fed skrift, for at gøre markeringen tydeligere.
• Sørg for alternativ styling til høj kontrast-tilstand: Brugere, der aktiverer høj kontrast-tilstand i deres operativsystem, kan tilsidesætte dine brugerdefinerede stilarter. Sørg for alternativ styling, der fungerer godt i høj kontrast-tilstand for at sikre læsbarheden. Du kan bruge media queries som @media (forced-colors: active) til at registrere, hvornår høj kontrast-tilstand er aktiveret.
• Test med hjælpeteknologier: Test din hjemmeside med hjælpeteknologier, såsom skærmlæsere, for at sikre, at den markerede tekst bliver korrekt annonceret og forstået.

Eksempel: Sikring af tilstrækkelig kontrast

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

            

              
                Copy
              
            
          

I dette eksempel har vi valgt en marineblå baggrundsfarve og hvid tekstfarve, hvilket giver tilstrækkelig kontrast for brugere med synshandicap. Brug altid en farvekontrast-checker til at verificere, at dine farvevalg overholder tilgængelighedsstandarder. Værktøjer som WebAIM's Contrast Checker kan være nyttige.

Praktiske eksempler og anvendelsestilfælde

CSS Custom Highlight API tilbyder en bred vifte af muligheder for at forbedre brugeroplevelsen. Her er nogle praktiske eksempler og anvendelsestilfælde:

• Kodefremhævning: Som demonstreret tidligere kan du bruge API'et til at fremhæve kode-snippets med brugerdefinerede stilarter, hvilket gør dem mere visuelt tiltalende og lettere at læse.
• Fremhævning af søgetermer: Fremhæv søgetermer i et dokument for at hjælpe brugere med hurtigt at finde den information, de leder efter.
• Fejlfremhævning: Fremhæv fejl eller advarsler i formularer eller andre brugergrænseflader for at henlede brugerens opmærksomhed på dem.
• Fremhævning af citater: Fremhæv citeret tekst i akademiske artikler for visuelt at adskille den fra hovedindholdet.
• Fremhævning i samtaler: I chat-applikationer kan du fremhæve brugerens egne beskeder eller beskeder fra specifikke brugere for at gøre dem lettere at følge.
• Gamification: Fremhæv specifikke ord eller sætninger i et spil for at give spor eller hints til spilleren.
• Tekstresumé: Fremhæv nøglesætninger eller -fraser i et dokument for at give et hurtigt resumé af indholdet. Dette involverer ofte komplekse algoritmer for at bestemme vigtighed.

Bedste praksis og tips

For at få mest muligt ud af CSS Custom Highlight API, følg disse bedste praksisser og tips:

• Brug beskrivende highlight-navne: Vælg beskrivende highlight-navne, der tydeligt angiver formålet med fremhævningen. Dette vil gøre din kode mere læsbar og vedligeholdelsesvenlig. Brug for eksempel code-highlight i stedet for highlight-1.
• Hold stilarter konsistente: Oprethold en konsistent stil på tværs af alle dine highlights for at skabe en sammenhængende brugeroplevelse. Brug et designsystem eller en stilguide for at sikre konsistens.
• Undgå overdreven brug af highlights: Brug ikke for mange highlights, da dette kan være distraherende og overvældende for brugerne. Brug dem sparsomt og strategisk til at henlede opmærksomheden på den vigtigste information.
• Test på forskellige enheder og browsere: Test din hjemmeside på forskellige enheder og browsere for at sikre, at dine brugerdefinerede highlights vises korrekt. Vær særligt opmærksom på mobile enheder og ældre browsere.
• Overvej ydeevne: Selvom CSS Custom Highlight API generelt har god ydeevne, skal du være opmærksom på antallet af highlights, du bruger, især i store dokumenter. For mange highlights kan påvirke ydeevnen. Hvis du bruger JavaScript til at administrere highlights, skal du optimere din kode for at minimere antallet af DOM-manipulationer.
• Brug progressiv forbedring: Da browserunderstøttelsen ikke er universel, bør du bruge teknikker til progressiv forbedring. Implementer en fallback-mekanisme ved hjælp af standard CSS-styling for at sikre, at oplevelsen forbliver brugbar for dem med ældre browsere. Overvej at bruge funktionsdetektering (f.eks. at tjekke for eksistensen af `CSS.highlights`) for at afgøre, om du skal bruge API'et eller fallback-mekanismen.

Konklusion

CSS Custom Highlight API er et kraftfuldt værktøj til at forbedre brugeroplevelsen og skabe mere visuelt tiltalende og informative tekstmarkeringer. Ved at mestre denne API kan du tage dit UI-design til det næste niveau og give brugerne en mere engagerende og tilgængelig browsingoplevelse. Selvom browserunderstøttelsen stadig udvikler sig, vil en forståelse af og eksperimentering med denne API nu positionere dig til at skabe banebrydende weboplevelser, efterhånden som udbredelsen vokser. Husk at prioritere tilgængelighed og sørge for fallbacks til ældre browsere for at sikre en positiv oplevelse for alle brugere.

Ressourcer

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