CSS Custom Highlight API: Monipuolisen tekstin valinnan hallinta dynaamisille käyttöliittymille

CSS Custom Highlight API on tehokas uusi työkalu web-kehittäjille, jonka avulla he saavat ennennäkemättömän hallinnan tekstin valintaan ja korostukseen web-sovelluksissa. Toisin kuin perus selaimen valintamahdollisuudet, tämä API mahdollistaa kehittäjille mukautettujen korostustyylien määrittämisen ja useiden valinta-alueiden hallinnan ohjelmallisesti. Tämä avaa maailman mahdollisuuksia rikkaiden, interaktiivisten ja saavutettavien käyttöliittymien luomiseen. Tämä opas tarjoaa kattavan yleiskatsauksen API:sta, tutkien sen ominaisuuksia, käyttötapauksia ja toteutustietoja, kaikki globaalista näkökulmasta.

CSS Custom Highlight API:n perusteiden ymmärtäminen

Ennen kuin sukeltaa monimutkaisiin skenaarioihin, on olennaista ymmärtää API:n peruskäsitteet. Ytimessä CSS Custom Highlight API esittelee useita uusia CSS-pseudo-elementtejä, mukaan lukien:

• ::selection: Edustaa asiakirjan osaa, jonka käyttäjä on valinnut. Tämä on ollut saatavilla pitkään, mikä mahdollistaa tekstivalintojen perusmuotoilun.
• ::highlight: Yleisempi pseudo-elementti tyylien soveltamiseen korostettuihin alueisiin. Tämä on uuden API:n voiman avain. Voit nyt luoda nimetyt korostukset ja soveltaa niihin mukautettua tyyliä.
• ::target-text: Edustaa asiakirjan osaa, joka on kohdistettu URI-fragmentilla (esim. #section-title). Sen avulla voit muotoilla sivun osaa, johon käyttäjä vieritti linkin kautta.
• ::spelling-error: Edustaa käyttäjäagentin tunnistamaa tekstiä, joka sisältää oikeinkirjoitusvirheitä. Tarjoaa tyylin hallinnan oikeinkirjoitusvirheiden ilmaisimille.
• ::grammar-error: Edustaa käyttäjäagentin tunnistamaa tekstiä, joka sisältää kielioppivirheitä. Tarjoaa tyylin hallinnan kielioppivirheiden ilmaisimille.

::highlight pseudo-elementti on API:n työjuhta. Sen avulla voit määrittää nimettyjä korostuksia CSS:ssä ja sitten soveltaa näitä korostuksia tiettyihin tekstialueisiin JavaScriptin avulla.

Keskeiset käsitteet: Alueet ja korostukset

API pyörii alueiden ja korostusten ympärillä:

• Alue: Jatkuva tekstiosa asiakirjassa. Edustaa Range-objektilla JavaScriptissä.
• Korostus: Nimetty tyyli, joka on sovellettu yhdelle tai useammalle alueelle. Määritelty CSS:ssä käyttämällä ::highlight(highlight-name) pseudo-elementtiä ja manipuloitu Highlight ja HighlightRegistry API:iden kautta JavaScriptissä.

Ajattele sitä näin: alue on 'mitä' (teksti, jonka haluat korostaa) ja korostus on 'miten' (tyyli, jonka haluat soveltaa).

Mukautettujen korostusten asettaminen CSS:n avulla

Ensimmäinen vaihe on määrittää mukautetut korostustyylisi CSS:ssä. Teet tämän käyttämällä ::highlight() pseudo-elementtiä.

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

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

            

              
                Copy
              
            
          

Tässä esimerkissä olemme määritelleet kaksi mukautettua korostustyyliä: search-result ja important-term. search-result-korostus soveltaa keltaista taustaa mustalla tekstillä, kun taas important-term-korostus käyttää vaaleansinistä taustaa ja lihavoi tekstin. Voit määrittää mitä tahansa CSS-ominaisuuksia, joita haluat näissä korostustyyleissä.

Korostusten hallinta JavaScriptillä

Kun olet määrittänyt korostustyylisi CSS:ssä, voit käyttää JavaScriptiä niiden soveltamiseen tiettyihin tekstialueisiin. Highlight ja HighlightRegistry API:t tarjoavat tähän tarvittavat työkalut.

HighlightRegistry

HighlightRegistry on globaali objekti, joka hallitsee kaikkia korostuksia asiakirjassa. Voit käyttää sitä CSS-rajapinnan kautta:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Korostusten luominen

Luodaksesi korostuksen, käytät Highlight-konstruktoria:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Aluksi korostuksella ei ole siihen liittyviä alueita. Sinun on lisättävä alueita korostukseen käyttämällä addRange()-metodia.

Alueiden lisääminen korostukseen

Lisätäksesi alueen korostukseen, sinun on ensin luotava Range-objekti. Voit tehdä tämän käyttämällä document.createRange()-metodia:

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

highlight.addRange(range);

            

              
                Copy
              
            
          

Missä:

• startNode: DOM-solmu, josta alue alkaa.
• startOffset: Merkin siirtymä startNode:ssa, josta alue alkaa.
• endNode: DOM-solmu, jossa alue päättyy.
• endOffset: Merkin siirtymä endNode:ssa, jossa alue päättyy.

Esimerkki: Hakutulosten korostaminen

Oletetaan, että sinulla on tekstilohko ja haluat korostaa kaikki hakutermin esiintymät. Tässä on, kuinka voisit tehdä sen:

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

  if (index === -1) {
    return; // Hakutermiä ei löytynyt
  }

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

  // Sovella 'search-result' korostustyyliä
  highlightRegistry.set('search-result', highlight);
}

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

            

              
                Copy
              
            
          

Tämä koodinpätkä löytää kaikki sanan "example" esiintymät elementissä, jonka ID on "content", ja soveltaa niihin search-result-korostustyyliä.

Alueiden ja korostusten poistaminen

Voit poistaa alueita korostuksesta käyttämällä deleteRange()-metodia:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

Voit myös poistaa kaikki alueet korostuksesta käyttämällä clear()-metodia:

            
highlight.clear();

            

              
                Copy
              
            
          

Poistaaksesi korostuksen kokonaan, voit käyttää HighlightRegistry:n delete()-metodia:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Edistyneet käyttötapaukset ja huomioitavia asioita

CSS Custom Highlight API on tehokas työkalu, jota voidaan käyttää monissa edistyneissä skenaarioissa.

Yhteistyömuokkaus

Yhteistyömuokkaussovelluksissa voit käyttää API:a korostamaan eri käyttäjien tekemiä muutoksia. Jokaisella käyttäjällä voi olla oma mukautettu korostustyyli, jonka avulla voit helposti nähdä, kuka teki mitä muutoksia. Esimerkiksi useiden maiden tiimien käyttämä yhteistyöasiakirjaeditori voisi käyttää eri korostusvärejä edustamaan Japanin, Saksan ja Brasilian tiimin jäsenten tekemiä muokkauksia.

Koodieditorit

Koodieditorit voivat hyödyntää API:a syntaksin korostamiseen. Eri syntaksielementeille (esim. avainsanat, operaattorit, kommentit) voidaan määrittää eri korostustyylejä. Nykyaikaisissa koodieditoreissa on usein monimutkaiset syntaksin korostussäännöt, ja tämä API mahdollistaa tarkemman ja muokattavamman hallinnan kuin perinteiset menetelmät.

Saavutettavuus

API:a voidaan käyttää saavutettavuuden parantamiseen. Voit esimerkiksi korostaa tällä hetkellä keskittynyttä elementtiä tai ruudunlukijan lukemaa tekstiä. Muista varmistaa riittävä värikontrasti korostustaustan ja tekstin värin välillä näkövammaisille käyttäjille. WCAG (Web Content Accessibility Guidelines) tarjoaa erityisiä ohjeita värikontrastisuhteista.

Kansainvälistymisen (i18n) huomioitavaa

Kun käytät API:a monikielisissä sovelluksissa, ota huomioon seuraavat:

• Tekstin suunta: Varmista, että korostustyylisi toimivat oikein sekä vasemmalta oikealle (LTR) että oikealta vasemmalle (RTL) kielissä.
• Sananrajat: Eri kielillä on erilaiset säännöt sanarajoille. Varmista, että käytät sopivia sanarajojen tunnistusalgoritmeja korostaessasi sanoja tai lauseita.
• Merkistöt: API tukee Unicodea, joten voit korostaa tekstiä millä tahansa kielellä.

Esimerkiksi korostaessasi hakutermejä arabiaksi (RTL-kieli), varmista, että korostus visuaalisesti heijastaa oikeaa tekstin suuntaa. Samoin korostaessasi avainsanoja japaniksi, joka ei käytä välilyöntejä sanojen välissä, sinun on käytettävä sopivaa morfologista analyysiä sanarajojen tunnistamiseen.

Suorituskykyyn liittyvät huomiot

Vaikka API on tehokas, on tärkeää olla tietoinen suorituskyvystä. Suuren määrän korostusten luominen ja hallinta voi vaikuttaa suorituskykyyn, erityisesti suurissa asiakirjoissa. Harkitse näitä vinkkejä:

• Optimoi alueen luominen: Range-objektien luominen voi olla kallista. Käytä uudelleen olemassa olevia alueita aina kun mahdollista.
• Eräpäivitykset: Kun teet useita muutoksia korostuksiin, niputa ne yhteen päivitykseen minimoimaan uudelleen asettelut.
• Laiska lataus: Korosta vain teksti, joka on tällä hetkellä käyttäjän näkyvissä. Lataa lisää korostuksia käyttäjän vierittäessä.
• Virtualisointi: Hyvin suurissa asiakirjoissa harkitse virtualisointitekniikoiden käyttöä renderöidäksesi vain asiakirjan näkyvän osan.

Käytännön esimerkkejä ja koodinpätkiä

Esimerkki 1: Dynaaminen avainsanojen korostus

Tämä esimerkki osoittaa, kuinka dynaamisesti korostetaan avainsanoja tekstissä käyttäjän syötteen perusteella. Kuvittele, että käyttäjä kirjoittaa hakukyselyn hakukenttään; korostetut avainsanat päivittyvät reaaliajassa.

            


  Tämä on joitain esimerkkitekstiä. Se sisältää avainsanoja, jotka haluamme korostaa. Korostamme avainsanat käyttäjän syötteen perusteella.


            

              
                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); /* Puoliläpinäkyvä oranssi */
  color: black;
}

            

              
                Copy
              
            
          

Esimerkki 2: "Etsi kaikki" -ominaisuuden toteuttaminen

Tämä esimerkki simuloi "Etsi kaikki" -ominaisuutta, joka on samanlainen kuin tekstieditoreissa ja IDE:issä. Kaikki hakutermin esiintymät korostetaan samanaikaisesti.

            


  Tämä asiakirja sisältää useita hakutermin esiintymiä. Hakutermi korostetaan koko asiakirjassa.
  Tämä on toinen esiintymä hakutermistä. Tässä on toinen hakutermi.


            

              
                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
              
            
          

Selaimen yhteensopivuus ja polyfillit

CSS Custom Highlight API on suhteellisen uusi ominaisuus, joten selaimen yhteensopivuus voi vaihdella. Vuoden 2024 lopulla sillä on hyvä tuki moderneissa selaimissa, kuten Chrome, Firefox, Safari ja Edge. On kuitenkin välttämätöntä tarkistaa uusimmat selaimen yhteensopivuustiedot verkkosivustoilla, kuten "Can I use...", varmistaaksesi, että kohdeyleisösi voi käyttää ominaisuuksiasi. Jos sinun on tuettava vanhempia selaimia, voit tutkia polyfillejä tai vaihtoehtoisia lähestymistapoja, jotka jäljittelevät API:n toiminnallisuutta, vaikka ne eivät välttämättä tarjoa samaa suorituskyvyn tai tarkkuuden tasoa.

Tekstin valinnan ja korostuksen tulevaisuus

CSS Custom Highlight API on merkittävä askel eteenpäin web-kehityksessä, joka antaa kehittäjille yksityiskohtaisen hallinnan tekstin valintaan ja korostukseen. Kun API kypsyy ja selaimen tuki paranee, voimme odottaa näkevämme vieläkin innovatiivisempia tämän teknologian käyttötapoja. Edistyneistä tekstieditoreista yhteistyöasiakirjoihin, mahdollisuudet ovat rajattomat. Tämä API mahdollistaa rikkaamman, interaktiivisemman ja saavutettavamman käyttökokemuksen. Harkitse, miten tätä voidaan käyttää parantamaan käyttökokemuksia kaikessa kansainvälisistä uutissivustoista online-kielen oppimisalustoihin.

Johtopäätös

CSS Custom Highlight API on tehokas työkalu dynaamisten ja interaktiivisten käyttöliittymien luomiseen. Ymmärtämällä alueiden, korostusten ja HighlightRegistry:n peruskäsitteet, voit hyödyntää tätä API:a rakentaaksesi vakuuttavia käyttökokemuksia, joita oli aiemmin vaikea tai mahdoton saavuttaa. Kun tutkit tätä API:a, muista ottaa huomioon saavutettavuus, kansainvälistyminen ja suorituskyky varmistaaksesi, että sovelluksesi ovat käyttökelpoisia ja suorituskykyisiä globaalille yleisölle. Joustavuutensa ja hallintansa ansiosta CSS Custom Highlight API on asettumassa modernin web-kehittäjän työkalupakin olennaiseksi osaksi.