CSS Custom Highlight API: Tekstin valinnan tyylittelyn hallinta

Tekstin valinta verkkosivulla on vaatimaton toimenpide, jota useimmat käyttäjät tekevät sen enempää ajattelematta. Kehittäjinä pyrimme kuitenkin usein parantamaan jopa hienovaraisimpia vuorovaikutuksia. CSS Custom Highlight API antaa meille mahdollisuuden mullistaa tekstin valintakokemuksen tarjoamalla ennennäkemätöntä hallintaa valitun tekstin ulkoasuun. Tämä ominaisuus ylittää yksinkertaiset taustan ja tekstin värimuutokset, mahdollistaen monimutkaiset ja mukaansatempaavat käyttöliittymät.

Mikä on CSS Custom Highlight API?

CSS Custom Highlight API on moderni verkkostandardi, joka tarjoaa tavan muotoilla tekstivalintojen (ja muiden korostettujen alueiden) ulkoasua CSS:n avulla. Se esittelee ::highlight()-pseudo-elementin, joka kohdistuu tiettyihin tekstialueisiin kehittäjän määrittämien kriteerien perusteella. Tämä API ylittää perinteisen ::selection-pseudo-elementin rajoitukset, joka tarjoaa vain hyvin perustason tyylittelyvaihtoehtoja. Custom Highlight API:n avulla voit luoda erittäin mukautettuja ja kontekstitietoisia tekstinvalintatyylejä.

Miksi käyttää CSS Custom Highlight API:a?

Custom Highlight API tarjoaa useita etuja perinteisiin tekstivalintojen tyylittelymenetelmiin verrattuna:

• Parannettu käyttäjäkokemus: Luo visuaalisesti miellyttäviä ja informatiivisia tekstivalintoja, jotka ohjaavat käyttäjiä ja parantavat luettavuutta.
• Kontekstitietoinen tyylittely: Sovella eri tyylejä valitun tekstin sisällön perusteella, kuten koodinpätkien korostaminen tai avaintermien painottaminen.
• Parempi saavutettavuus: Tarjoa selkeitä visuaalisia vihjeitä valitulle tekstille, mikä helpottaa näkövammaisten käyttäjien sisällön selaamista.
• Mukautettava ulkoasu: Mene perus-taustavärien ja tekstivärien muutoksia pidemmälle luodaksesi ainutlaatuisia ja mukaansatempaavia tekstinvalintatyylejä.
• Dynaaminen tyylittely: Muuta tekstivalintojen ulkoasua käyttäjän vuorovaikutuksen tai sovelluksen tilan perusteella.

Keskeisten käsitteiden ymmärtäminen

Ennen koodiesimerkkeihin sukeltamista on tärkeää ymmärtää CSS Custom Highlight API:n ydinajatukset:

1. Korostuksen rekisteröinti

Prosessi alkaa mukautetun korostusnimen rekisteröimisellä JavaScriptin avulla. Tätä nimeä käytetään sitten CSS:ssä kohdistamaan tyylit tiettyihin tekstivalintoihin.

2. Korostusalueet

Korostusalueet määrittävät tietyt tyyliteltävät tekstijaksot. Nämä alueet luodaan ohjelmallisesti käyttämällä Highlight- ja StaticRange- tai Range-API:eita. Ne määrittelevät korostettavan tekstin alku- ja loppupisteet.

3. ::highlight()-pseudo-elementti

Tätä pseudo-elementtiä käytetään CSS:ssä tyylien soveltamiseen rekisteröidyille korostusnimille. Se toimii valitsimena, joka kohdistuu korostusalueiden määrittämiin tekstijaksoihin.

Käytännön esimerkkejä: CSS Custom Highlight API:n käyttöönotto

Tutustutaanpa useisiin käytännön esimerkkeihin havainnollistamaan, miten CSS Custom Highlight API:a käytetään.

Esimerkki 1: Perustason tekstinvalinnan tyylittely

Tämä esimerkki näyttää, kuinka valitun tekstin tausta- ja tekstiväriä muutetaan.

HTML:

<p id="myText">This is some text that can be selected.</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();

// Select the entire paragraph.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);

CSS:

::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}

Selitys:

• JavaScript-koodi luo Highlight-olion ja lisää alueen, joka kattaa koko kappaleen, jonka ID on myText.
• CSS.highlights.set()-metodi rekisteröi korostuksen nimellä 'myHighlight'.
• CSS-koodi käyttää ::highlight(myHighlight)-pseudo-elementtiä muotoillakseen valitun tekstin keltaisella taustalla ja mustalla tekstivärillä.

Esimerkki 2: Tiettyjen sanojen korostaminen

Tämä esimerkki näyttää, kuinka tiettyjä sanoja korostetaan kappaleen sisällä.

HTML:

<p id="myText">This is a paragraph with the word highlight that we want to highlight.</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['highlight'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);

CSS:

::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}

Selitys:

• JavaScript-koodi käy läpi kappaleen sanat ja tunnistaa "highlight"-sanan indeksit.
• Jokaisen esiintymän kohdalla se luo Range-olion ja lisää sen Highlight-olioon.
• CSS-koodi muotoilee korostetut sanat vaaleanvihreällä taustalla ja lihavoidulla fontilla.

Esimerkki 3: Dynaaminen korostus käyttäjän syötteen perusteella

Tämä esimerkki näyttää, kuinka tekstiä korostetaan dynaamisesti hakukenttään syötetyn tekstin perusteella.

HTML:

<input type="text" id="searchInput" placeholder="Enter text to highlight">
<p id="myText">This is some text that will be dynamically highlighted based on user input.</p>

JavaScript:

const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Clear previous highlights

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});

CSS:

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

Selitys:

• JavaScript-koodi kuuntelee hakukentän syötteen muutoksia.
• Se poistaa kaikki olemassa olevat korostukset ja etsii sitten syötettyä tekstiä kappaleesta.
• Jokaisen esiintymän kohdalla se luo Range-olion ja lisää sen Highlight-olioon.
• CSS-koodi muotoilee dynaamisesti korostetun tekstin keltaisella taustalla ja mustalla tekstivärillä.

Esimerkki 4: Korostuksen ulkoasun mukauttaminen ::highlight()-elementillä

Custom Highlight API:n voima piilee sen kyvyssä mukauttaa korostetun tekstin ulkoasua. Näin voit soveltaa varjoja, liukuvärejä ja muita visuaalisia tehosteita.

HTML:

<p id="customText">Select this text to see a custom highlight effect.</p>

JavaScript:

const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);

CSS:

::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}

Selitys:

• Tämä esimerkki soveltaa korostettuun tekstiin liukuvärjätyn taustan, valkoisen tekstin, tekstivarjon, pyöristetyt kulmat ja täytteen.
• Tämä osoittaa, kuinka voit käyttää tavallisia CSS-ominaisuuksia ::highlight()-pseudo-elementin sisällä saavuttaaksesi visuaalisesti näyttäviä ja ainutlaatuisia valintatyylejä.

Saavutettavuusnäkökohdat

Vaikka tekstivalintojen visuaalisen ilmeen parantaminen on tärkeää, saavutettavuuden tulisi aina olla ensisijainen huolenaihe. Tässä on muutamia ohjeita varmistaaksesi, että mukautetut korostustyylisi ovat saavutettavia:

• Värikontrasti: Varmista riittävä kontrasti korostetun tekstin taustan ja tekstin värin välillä. Käytä työkaluja, kuten WebAIM Contrast Checker, varmistaaksesi saavutettavuusstandardien (WCAG) noudattamisen.
• Visuaaliset vihjeet: Tarjoa selkeitä visuaalisia vihjeitä valitulle tekstille. Vältä hienovaraisia värimuutoksia, jotka voivat olla vaikeita havaita näkövammaisille käyttäjille.
• Näppäimistöllä navigointi: Varmista, että mukautetut korostustyylit eivät häiritse näppäimistöllä navigointia. Käyttäjien tulisi pystyä helposti valitsemaan ja selaamaan tekstiä näppäimistöllä.
• Ruudunlukijayhteensopivuus: Testaa mukautettuja korostustyylejäsi ruudunlukijoilla varmistaaksesi, että valittu teksti ilmoitetaan oikein.

Selainyhteensopivuus

CSS Custom Highlight API on suhteellisen uusi verkkostandardi, ja selainyhteensopivuus voi vaihdella. Vuoden 2023 lopulla / 2024 alussa tuki on kasvussa, mutta sitä ei ole toteutettu yleisesti. Voit tarkistaa nykyisen selaintuen tilan verkkosivustoilta, kuten "Can I use...", pysyäksesi ajan tasalla yhteensopivuuspäivityksistä.

Harkitse ominaisuuksien tunnistamista tarjotaksesi varatyylejä selaimille, jotka eivät vielä tue API:a.

if ('CSS' in window && 'highlights' in CSS) {
  // Käytä Custom Highlight API:a
} else {
  // Tarjoa varatyylit ::selection-elementillä
}

Käyttökohteita todellisessa maailmassa

CSS Custom Highlight API:lla on lukuisia käytännön sovelluksia, mukaan lukien:

• Koodieditorit: Korosta syntaksielementtejä, virheitä ja varoituksia koodieditoreissa.
• E-oppimisalustat: Painota avainkäsitteitä ja määritelmiä opetusmateriaaleissa.
• Asiakirjojen katseluohjelmat: Salli käyttäjien korostaa ja merkitä tekstiä asiakirjoissa.
• Hakutulokset: Korosta hakutermejä hakutuloksissa.
• Datan visualisointi: Korosta tiettyjä datapisteitä tai trendejä kaavioissa ja graafeissa.

Parhaat käytännöt ja vinkit

• Käytä kuvaavia korostusnimiä: Valitse korostusnimet, jotka ilmaisevat selkeästi korostuksen tarkoituksen.
• Poista korostukset tarvittaessa: Muista poistaa korostukset, kun niitä ei enää tarvita, välttääksesi odottamattomia tyyliongelmia.
• Optimoi suorituskyky: Vältä liiallisten korostusalueiden luomista, koska se voi vaikuttaa suorituskykyyn.
• Testaa perusteellisesti: Testaa mukautettuja korostustyylejäsi eri selaimilla ja laitteilla varmistaaksesi yhteensopivuuden ja saavutettavuuden.
• Harkitse vararatkaisuja: Tarjoa varatyylejä selaimille, jotka eivät vielä tue Custom Highlight API:a.

Edistyneet tekniikat

1. Useiden korostusten yhdistäminen

Voit yhdistää useita korostuksia luodaksesi monimutkaisempia tyyliefektejä. Voit esimerkiksi haluta korostaa sekä avainsanoja että käyttäjän valitsemaa tekstiä eri tyyleillä.

2. Tapahtumien käyttäminen korostusten päivittämiseen

Voit käyttää JavaScript-tapahtumia, kuten mouseover tai click, päivittääksesi dynaamisesti korostusalueita käyttäjän vuorovaikutuksen perusteella.

3. Integrointi kolmannen osapuolen kirjastoihin

Voit integroida Custom Highlight API:n kolmannen osapuolen kirjastoihin luodaksesi kehittyneempiä korostusratkaisuja. Voit esimerkiksi käyttää luonnollisen kielen käsittelyyn (NLP) erikoistunutta kirjastoa tunnistamaan ja korostamaan automaattisesti avaintermejä asiakirjassa.

Tekstinvalinnan tyylittelyn tulevaisuus

CSS Custom Highlight API edustaa merkittävää edistysaskelta tekstinvalinnan tyylittelyssä. Se antaa kehittäjille mahdollisuuden luoda entistä mukaansatempaavampia, saavutettavampia ja kontekstitietoisempia käyttöliittymiä. Selaintuen kasvaessa Custom Highlight API:sta on tulossa välttämätön työkalu verkkokehittäjille maailmanlaajuisesti.

Yhteenveto

CSS Custom Highlight API avaa lukemattomia mahdollisuuksia tekstinvalintakokemuksen mukauttamiseen. Ymmärtämällä keskeiset käsitteet, tutkimalla käytännön esimerkkejä ja ottamalla huomioon saavutettavuusohjeet voit hyödyntää tätä tehokasta API:a luodaksesi todella poikkeuksellisia käyttöliittymiä. Ota Custom Highlight API käyttöösi ja nosta verkkokehitysprojektisi uudelle tasolle.

Kokeile annettuja esimerkkejä, mukauta niitä omiin tarpeisiisi ja tutustu CSS Custom Highlight API:n koko potentiaaliin. Käyttäjäsi arvostavat huomiota yksityiskohtiin ja parannettua käyttäjäkokemusta.