Händelsehantering för CSS Custom Highlight: Förbättra interaktioner med textmarkering

Textmarkering är en fundamental interaktion på webben. Användare markerar text av olika anledningar: för att kopiera innehåll, dela citat, utföra sökningar eller helt enkelt för att fokusera uppmärksamheten. Medan webbläsare erbjuder standardmarkering av text, ger CSS Custom Highlight API en oöverträffad kontroll över denna interaktion, vilket gör det möjligt för utvecklare att skapa visuellt tilltalande, kontextmedvetna och mycket tillgängliga markeringsupplevelser. Detta blogginlägg djupdyker i CSS Custom Highlight API, utforskar dess möjligheter och ger praktiska exempel för att förbättra dina webbapplikationer.

Förståelse för standardbeteendet vid textmarkering

Som standard stylar webbläsare markerad text med pseudo-elementet ::selection. Du kan ändra egenskaperna background-color och color för att justera utseendet. Till exempel:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

Detta enkla CSS-kodstycke ändrar bakgrundsfärgen till en ljusblå och textfärgen till svart när en användare markerar text på sidan. Däremot har pseudo-elementet ::selection sina begränsningar. Det tillåter endast styling av bakgrund och färg, vilket begränsar anpassningen. Dessutom saknar det semantisk information om markeringskontexten. CSS Custom Highlight API övervinner dessa begränsningar.

Introduktion till CSS Custom Highlight API

CSS Custom Highlight API erbjuder ett mer robust och flexibelt tillvägagångssätt för att hantera textmarkeringar. Det introducerar nya CSS-egenskaper och JavaScript-API:er som låter dig definiera och styla anpassade markeringar baserat på specifika villkor och interaktioner.

Nyckelkoncept

• Ärvning av markering: Markeringar stylas genom en kaskad- och ärvningsmekanism liknande andra CSS-egenskaper. Detta innebär att du kan definiera standardstilar för markeringar på rotnivå och åsidosätta dem för specifika element eller kontexter.
• Markerings-pseudo: Pseudo-elementet ::highlight() används för att applicera stilar på namngivna markeringar.
• JavaScript API: JavaScript-API:er som getSelection() och Highlight-objekt låter dig programmatiskt skapa, hantera och interagera med markeringar.
• Tillgänglighet: API:et stöder ARIA-attribut och tillgänglighetsaspekter, vilket säkerställer att anpassade markeringar är uppfattbara och förståeliga för användare med funktionsnedsättningar.

Implementera anpassade markeringar: En steg-för-steg-guide

Här är en praktisk guide för att implementera anpassade markeringar med hjälp av CSS Custom Highlight API:

Steg 1: Definiera namngivna markeringar

Först måste du definiera en namngiven markering med CSS. Detta namn kommer att användas för att associera stilar med specifika markeringar.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

I detta exempel har vi definierat en markering med namnet `custom-highlight` med en halvtransparent röd bakgrund och svart textfärg. Du kan välja vilket giltigt CSS-färgvärde som helst för bakgrund och text.

Steg 2: Skapa markeringar i JavaScript

Använd sedan JavaScript för att skapa och applicera markeringen. Detta involverar att hämta det markerade textområdet och skapa ett Highlight-objekt.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // Ingen markering
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Tom markering
  }

  const highlight = new Highlight(range);

  // Registrera markeringen med dokumentet. Det är experimentellt och kan kräva polyfill eller webbläsarflagga
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implementera en fallback-mekanism här, t.ex. genom att omsluta den markerade texten i en  med en klass
    // Till exempel:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Valfritt: Rensa markeringen efter markering
}

            

              
                Copy
              
            
          

Förklaring:

• window.getSelection(): Hämtar det aktuella markeringsobjektet.
• selection.rangeCount: Kontrollerar om det finns en aktiv markering.
• selection.getRangeAt(0): Hämtar det markerade området (range).
• new Highlight(range): Skapar ett nytt Highlight-objekt från området.
• CSS.highlights.set('custom-highlight', highlight): Registrerar markeringen i CSS-markeringsregistret. Detta är det avgörande steget som länkar JavaScript-markeringen till de CSS-stilar som definierades tidigare.
• Fallback-mekanism: Inkluderar en avgörande fallback-mekanism för webbläsare som ännu inte har fullt stöd för `CSS.highlights`. Detta säkerställer att din funktion degraderar elegant och bibehåller funktionalitet i äldre webbläsare.
• selection.removeAllRanges(): Rensar markeringen efter markering. Detta är valfritt och beror på den önskade användarupplevelsen.

Kom ihåg att koppla denna funktion till en händelselyssnare, som ett knappklick eller ett kortkommando.

Steg 3: Hantera flera områden (överlappande markeringar)

API:et kan hantera flera överlappande områden inom en och samma markering. Du kan lägga till flera områden i ett Highlight-objekt:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implementera en fallback för flera områden (mer komplext)
  // Detta skulle kräva att texten delas upp i mindre span-element och att stilar appliceras
  // Detta är en mer avancerad fallback-implementering och kanske inte passar i alla fall
}

            

              
                Copy
              
            
          

Stylingen kommer att appliceras på alla områden inom markeringen.

Avancerade användningsfall och tekniker

CSS Custom Highlight API öppnar upp ett brett spektrum av möjligheter för att förbättra interaktioner med textmarkering. Här är några avancerade användningsfall och tekniker:

1. Kontextmedveten markering

Du kan använda JavaScript för att analysera den markerade texten och applicera olika markeringsstilar baserat på dess innehåll eller omgivande kontext. Du kan till exempel markera nyckelord i ett dokument med en specifik färg, eller identifiera och markera kodstycken.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Markera kodkommentarer
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Markera JavaScript-nyckelord
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Fallback-implementering, eventuellt med data-attribut och anpassad CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Definiera CSS-stilar för varje markeringstyp:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Markera sökresultat

Du kan använda API:et för att markera söktermer i ett dokument. Detta är särskilt användbart för sökresultatsidor eller sökfunktionalitet i en applikation.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Eller specifikt element
  const regex = new RegExp(searchTerm, 'gi'); // Global, skiftlägesokänslig

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Skapa ett område (range) för varje matchning
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback kräver, återigen, noggrann hantering av textnoder
    }
  }
}

            

              
                Copy
              
            
          

Definiera CSS-stilen för sökresultatmarkeringen:

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

            

              
                Copy
              
            
          

3. Integrering med Shadow DOM

CSS Custom Highlight API fungerar sömlöst med Shadow DOM, vilket gör att du kan skapa inkapslade komponenter med anpassade markeringsstilar. Du kan definiera markeringar inom Shadow DOM och applicera dem på element inom komponenten.

4. Tillgänglighetsaspekter

Se till att dina anpassade markeringar är tillgängliga för alla användare. Tänk på följande:

• Färgkontrast: Säkerställ tillräcklig färgkontrast mellan markeringsbakgrunden och textfärgen för att uppfylla WCAG-riktlinjerna.
• Tangentbordsnavigering: Se till att användare kan navigera till markerad text med tangentbordet.
• Skärmläsarkompatibilitet: Testa dina markeringar med skärmläsare för att säkerställa att den markerade texten läses upp korrekt.
• Fokusindikatorer: När ett markerat element får fokus, tillhandahåll en tydlig visuell fokusindikator.

Du kan använda ARIA-attribut för att ge ytterligare semantisk information om markeringarna. Du kan till exempel använda aria-label för att beskriva syftet med ett markerat avsnitt.

5. Lokalisering och internationalisering

När du hanterar textmarkering i ett globalt sammanhang, tänk på följande:

• Textriktning: Se till att dina markeringar fungerar korrekt med både vänster-till-höger (LTR) och höger-till-vänster (RTL) textriktningar.
• Språkspecifika regler: Var medveten om språkspecifika regler för textmarkering och ordgränser.
• Typsnittsstöd: Använd typsnitt som stöder de tecken som används i olika språk.

6. Prestandaoptimering

Att applicera anpassade markeringar kan påverka prestandan, särskilt i stora dokument. Överväg följande optimeringstekniker:

• Debouncing: Använd "debounce" på markeringsfunktionen för att undvika överdrivna beräkningar vid snabba markeringar.
• Cachelagring: Cachelagra beräknade markeringsområden för att undvika att beräkna om dem i onödan.
• Virtualisering: Använd virtualiseringstekniker för att endast rendera markeringar som för närvarande är synliga i visningsområdet (viewport).
• Web Workers: Avlasta beräkningar för markeringar till en web worker för att undvika att blockera huvudtråden.

Webbläsarstöd och Polyfills

CSS Custom Highlight API är relativt nytt och kanske inte stöds fullt ut av alla webbläsare. Kontrollera de senaste webbläsarkompatibilitetstabellerna innan du använder det i produktion. Överväg att använda en polyfill för att ge stöd för äldre webbläsare. En polyfill lägger till den nödvändiga koden för att äldre webbläsare ska förstå det nya API:et. Sök online efter "CSS Custom Highlight API Polyfill" för att hitta alternativ.

Slutsats

CSS Custom Highlight API ger utvecklare möjlighet att skapa engagerande, kontextmedvetna och tillgängliga upplevelser för textmarkering. Genom att förstå API:ets kapabiliteter och tillämpa de tekniker som beskrivs i detta blogginlägg kan du höja användarupplevelsen i dina webbapplikationer och erbjuda ett mer intuitivt och visuellt tilltalande sätt för användare att interagera med text. Kom ihåg att prioritera tillgänglighet och prestanda när du implementerar anpassade markeringar, och att överväga webbläsarkompatibilitet och polyfill-alternativ. Denna nyanserade kontroll över textmarkering ger utvecklare kraften att bygga mer interaktiva och användarvänliga webbupplevelser, skräddarsydda för specifika applikationsbehov och användarpreferenser. I takt med att webbläsarstödet växer, lovar CSS Custom Highlight API att bli ett oumbärligt verktyg för modern webbutveckling.

Vidare utforskning

• MDN Web Docs: Highlight API
• CSS Houdini: Lär dig mer om CSS Houdini-projektet som möjliggör dessa avancerade CSS-funktioner.