CSS Custom Highlight -tapahtumien käsittely: Tekstinvalinnan vuorovaikutuksen nostaminen uudelle tasolle

Tekstin valinta on perustavanlaatuinen vuorovaikutus verkossa. Käyttäjät korostavat tekstiä useista syistä: sisällön kopioimiseksi, lainausten jakamiseksi, hakujen tekemiseksi tai yksinkertaisesti huomion keskittämiseksi. Vaikka selaimet tarjoavat oletusarvoisen tekstin korostuksen, CSS Custom Highlight API tarjoaa ennennäkemättömän hallinnan tähän vuorovaikutukseen, mahdollistaen kehittäjille visuaalisesti miellyttävien, kontekstitietoisten ja erittäin saavutettavien valintakokemusten luomisen. Tämä blogikirjoitus syventyy CSS Custom Highlight API:n saloihin, tutkien sen ominaisuuksia ja tarjoten käytännön esimerkkejä verkkosovellustesi parantamiseksi.

Oletusarvoisen tekstinvalinnan käyttäytymisen ymmärtäminen

Oletusarvoisesti selaimet muotoilevat valitun tekstin käyttämällä ::selection-pseudo-elementtiä. Voit muuttaa background-color- ja color-ominaisuuksia muuttaaksesi ulkoasua. Esimerkiksi:

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

            

              
                Copy
              
            
          

Tämä yksinkertainen CSS-pätkä muuttaa taustavärin vaaleansiniseksi ja tekstin värin mustaksi aina, kun käyttäjä valitsee tekstiä sivulla. Kuitenkin ::selection-pseudo-elementillä on rajoituksensa. Se sallii vain taustan ja värin muotoilun, mikä rajoittaa mukauttamista. Lisäksi siitä puuttuu semanttista tietoa valinnan kontekstista. CSS Custom Highlight API ylittää nämä rajoitukset.

Esittelyssä CSS Custom Highlight API

CSS Custom Highlight API tarjoaa vankemman ja joustavamman lähestymistavan tekstivalintojen hallintaan. Se esittelee uusia CSS-ominaisuuksia ja JavaScript-API:ita, jotka mahdollistavat mukautettujen korostusten määrittelyn ja muotoilun perustuen tiettyihin ehtoihin ja vuorovaikutuksiin.

Avainkäsitteet

• Korostusten periytyminen: Korostukset muotoillaan peräkkäisyyden ja periytymisen mekanismilla, joka on samanlainen kuin muilla CSS-ominaisuuksilla. Tämä tarkoittaa, että voit määrittää oletuskorostustyylit juuritasolla ja ohittaa ne tietyille elementeille tai konteksteille.
• Korostuksen pseudo-elementti: ::highlight()-pseudo-elementtiä käytetään tyylien soveltamiseen nimettyihin korostuksiin.
• JavaScript API: JavaScript API:t, kuten getSelection() ja Highlight-oliot, mahdollistavat korostusten ohjelmallisen luomisen, hallinnan ja vuorovaikutuksen niiden kanssa.
• Saavutettavuus: API tukee ARIA-attribuutteja ja saavutettavuusnäkökohtia, varmistaen, että mukautetut korostukset ovat havaittavissa ja ymmärrettävissä vammaisille käyttäjille.

Mukautettujen korostusten toteuttaminen: Vaiheittainen opas

Tässä on käytännön opas mukautettujen korostusten toteuttamiseen CSS Custom Highlight API:n avulla:

Vaihe 1: Nimettyjen korostusten määrittely

Ensin sinun on määriteltävä nimetty korostus CSS:n avulla. Tätä nimeä käytetään yhdistämään tyylejä tiettyihin valintoihin.

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

            

              
                Copy
              
            
          

Tässä esimerkissä olemme määrittäneet korostuksen nimeltä `custom-highlight`, jolla on puoliksi läpinäkyvä punainen tausta ja musta tekstin väri. Voit valita minkä tahansa kelvollisen CSS-väriarvon taustalle ja tekstille.

Vaihe 2: Korostusten luominen JavaScriptillä

Seuraavaksi käytä JavaScriptiä korostuksen luomiseen ja soveltamiseen. Tämä sisältää valitun tekstialueen hankkimisen ja Highlight-olion luomisen.

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

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Tyhjä valinta
  }

  const highlight = new Highlight(range);

  // Rekisteröi korostus dokumenttiin. Tämä on kokeellinen ja saattaa vaatia polyfillin tai selainlipun
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights-ominaisuutta ei tueta. Harkitse polyfillin käyttöä.');
    // Toteuta varamekanismi tähän, esim. käärimällä valittu teksti -elementtiin, jolla on luokka
    // Esimerkiksi:
    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(); // Valinnainen: Tyhjennä valinta korostuksen jälkeen
}

            

              
                Copy
              
            
          

Selitys:

• window.getSelection(): Hakee nykyisen valinta-objektin.
• selection.rangeCount: Tarkistaa, onko aktiivista valintaa.
• selection.getRangeAt(0): Hakee valitun alueen.
• new Highlight(range): Luo uuden Highlight-objektin alueesta.
• CSS.highlights.set('custom-highlight', highlight): Rekisteröi korostuksen CSS-korostusrekisteriin. Tämä on ratkaiseva vaihe, joka linkittää JavaScript-korostuksen aiemmin määriteltyihin CSS-tyyleihin.
• Varamekanismi: Sisältää tärkeän varamekanismin selaimille, jotka eivät vielä täysin tue CSS.highlights-ominaisuutta. Tämä varmistaa, että ominaisuutesi heikkenee hallitusti ja säilyttää toiminnallisuuden vanhemmilla selaimilla.
• selection.removeAllRanges(): Tyhjentää valinnan korostuksen jälkeen. Tämä on valinnaista ja riippuu haluamastasi käyttäjäkokemuksesta.

Muista liittää tämä funktio tapahtumankuuntelijaan, kuten napin painallukseen tai pikanäppäimeen.

Vaihe 3: Useiden alueiden käsittely (päällekkäiset valinnat)

API voi käsitellä useita päällekkäisiä alueita yhden korostuksen sisällä. Voit lisätä useita alueita Highlight-objektiin:

            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-ominaisuutta ei tueta. Harkitse polyfillin käyttöä.');
  // Varamekanismin toteuttaminen useille alueille (monimutkaisempi)
  // Tämä vaatisi tekstin jakamista pienempiin span-elementteihin ja tyylien soveltamista
  // Tämä on edistyneempi varamekanismin toteutus eikä välttämättä sovi kaikkiin tapauksiin
}

            

              
                Copy
              
            
          

Muotoilu sovelletaan kaikkiin korostuksen sisällä oleviin alueisiin.

Edistyneet käyttötapaukset ja tekniikat

CSS Custom Highlight API avaa laajan valikoiman mahdollisuuksia tekstinvalinnan vuorovaikutusten parantamiseen. Tässä on joitakin edistyneitä käyttötapauksia ja tekniikoita:

1. Kontekstitietoinen korostus

Voit käyttää JavaScriptiä analysoidaksesi valittua tekstiä ja soveltaa erilaisia korostustyylejä sen sisällön tai ympäröivän kontekstin perusteella. Voit esimerkiksi korostaa avainsanoja asiakirjassa tietyllä värillä tai tunnistaa ja korostaa koodinpätkiä.

            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'; // Korosta koodikommentit
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Korosta JavaScript-avainsanat
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights-ominaisuutta ei tueta. Harkitse polyfillin käyttöä.');
    // Varamekanismin toteutus, mahdollisesti käyttäen data-attribuutteja ja mukautettua CSS:ää
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Määritä CSS-tyylit jokaiselle korostustyypille:

            ::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. Hakutulosten korostaminen

Voit käyttää API:a hakutermien korostamiseen asiakirjassa. Tämä on erityisen hyödyllistä hakutulossivuilla tai sovelluksen sisäisessä hakutoiminnossa.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Tai tietty elementti
  const regex = new RegExp(searchTerm, 'gi'); // Globaali, kirjainkoosta riippumaton

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

    // Luo alue jokaiselle osumalle
    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-ominaisuutta ei tueta. Harkitse polyfillin käyttöä.');
      // Varamekanismi vaatii jälleen tekstisolmujen huolellista käsittelyä
    }
  }
}

            

              
                Copy
              
            
          

Määritä CSS-tyyli hakutuloksen korostukselle:

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

            

              
                Copy
              
            
          

3. Integrointi Shadow DOM:in kanssa

CSS Custom Highlight API toimii saumattomasti Shadow DOM:in kanssa, mikä mahdollistaa kapseloitujen komponenttien luomisen mukautetuilla korostustyyleillä. Voit määrittää korostuksia Shadow DOM:in sisällä ja soveltaa niitä komponentin sisällä oleviin elementteihin.

4. Saavutettavuusnäkökohdat

Varmista, että mukautetut korostuksesi ovat kaikkien käyttäjien saavutettavissa. Harkitse seuraavia seikkoja:

• Värikontrasti: Varmista riittävä värikontrasti korostuksen taustan ja tekstin värin välillä WCAG-ohjeiden täyttämiseksi.
• Näppäimistöllä navigointi: Varmista, että käyttäjät voivat navigoida korostetussa tekstissä näppäimistöllä.
• Ruudunlukijoiden yhteensopivuus: Testaa korostuksiasi ruudunlukijoilla varmistaaksesi, että valittu teksti ilmoitetaan oikein.
• Kohdistuksen ilmaisimet: Kun korostettu elementti saa kohdistuksen, tarjoa selkeä visuaalinen kohdistuksen ilmaisin.

Voit käyttää ARIA-attribuutteja antamaan lisää semanttista tietoa korostuksista. Voit esimerkiksi käyttää aria-label-attribuuttia kuvaamaan korostetun osion tarkoitusta.

5. Lokalisointi ja kansainvälistäminen

Kun käsittelet tekstin valintaa globaalissa kontekstissa, ota huomioon seuraavat seikat:

• Tekstin suunta: Varmista, että korostuksesi toimivat oikein sekä vasemmalta oikealle (LTR) että oikealta vasemmalle (RTL) -suuntaisissa teksteissä.
• Kielikohtaiset säännöt: Ole tietoinen kielikohtaisista säännöistä tekstin valinnassa ja sanarajoissa.
• Fonttituki: Käytä fontteja, jotka tukevat eri kielissä käytettyjä merkkejä.

6. Suorituskyvyn optimointi

Mukautettujen korostusten soveltaminen voi vaikuttaa suorituskykyyn, erityisesti suurissa asiakirjoissa. Harkitse seuraavia optimointitekniikoita:

• Debouncing: Käytä debounce-tekniikkaa korostusfunktiossa välttääksesi liiallisia laskutoimituksia nopeiden valintojen aikana.
• Välimuisti: Tallenna lasketut korostusalueet välimuistiin välttääksesi niiden tarpeettoman uudelleenlaskennan.
• Virtualisointi: Käytä virtualisointitekniikoita renderöidäksesi vain ne korostukset, jotka ovat tällä hetkellä näkyvissä näkymäalueella.
• Web Workerit: Siirrä korostuslaskennat web workeriin välttääksesi pääsäikeen tukkeutumisen.

Selaintuki ja polyfillit

CSS Custom Highlight API on suhteellisen uusi, eikä kaikki selaimet välttämättä tue sitä täysin. Tarkista uusimmat selainten yhteensopivuustaulukot ennen sen käyttöä tuotannossa. Harkitse polyfillin käyttöä tuen tarjoamiseksi vanhemmille selaimille. Polyfill lisää tarvittavan koodin, jotta vanhemmat selaimet ymmärtävät uuden API:n. Hae verkosta hakusanalla "CSS Custom Highlight API Polyfill" löytääksesi vaihtoehtoja.

Yhteenveto

CSS Custom Highlight API antaa kehittäjille mahdollisuuden luoda mukaansatempaavia, kontekstitietoisia ja saavutettavia tekstinvalintakokemuksia. Ymmärtämällä API:n ominaisuudet ja soveltamalla tässä blogikirjoituksessa kuvattuja tekniikoita voit parantaa verkkosovellustesi käyttäjäkokemusta ja tarjota intuitiivisemman ja visuaalisesti miellyttävämmän tavan käyttäjille vuorovaikuttaa tekstin kanssa. Muista priorisoida saavutettavuus ja suorituskyky toteuttaessasi mukautettuja korostuksia ja ottaa huomioon selaimen yhteensopivuus ja polyfill-vaihtoehdot. Tämä vivahteikas tekstinvalinnan hallinta antaa kehittäjille mahdollisuuden rakentaa vuorovaikutteisempia ja käyttäjäystävällisempiä verkkokokemuksia, jotka on räätälöity tiettyihin sovellustarpeisiin ja käyttäjäasetuksiin. Selaintuen kasvaessa CSS Custom Highlight API lupaa tulla välttämättömäksi työkaluksi modernissa web-kehityksessä.

Lisätutkimusta

• MDN Web Docs: Highlight API
• CSS Houdini: Lue lisää CSS Houdini -projektista, joka mahdollistaa nämä edistyneet CSS-ominaisuudet.