CSS pasirinktinio paryškinimo API: Teksto žymėjimo stiliaus įvaldymas

Paprastas teksto žymėjimo veiksmas tinklalapyje yra tai, ką dauguma vartotojų atlieka apie tai per daug negalvodami. Tačiau mes, kūrėjai, dažnai siekiame patobulinti net ir subtiliausias sąveikas. CSS pasirinktinio paryškinimo API (angl. Custom Highlight API) leidžia mums iš esmės pakeisti teksto žymėjimo patirtį, suteikdama beprecedentę kontrolę, kaip atrodo pažymėtas tekstas. Ši galimybė peržengia paprastų fono ir teksto spalvų keitimo ribas, leidžiant kurti sudėtingas ir patrauklias vartotojo sąsajas.

Kas yra CSS pasirinktinio paryškinimo API?

CSS pasirinktinio paryškinimo API yra modernus interneto standartas, suteikiantis būdą stilizuoti teksto žymėjimų (ir kitų paryškintų sričių) išvaizdą naudojant CSS. Jis pristato ::highlight() pseudo-elementą, kuris taikomas konkrečioms teksto sritims pagal kūrėjo nustatytus kriterijus. Šis API įveikia tradicinio ::selection pseudo-elemento apribojimus, kuris siūlo tik labai paprastas stiliaus parinktis. Su pasirinktinio paryškinimo API galite sukurti itin pritaikytus ir kontekstą atitinkančius teksto žymėjimo stilius.

Kodėl verta naudoti CSS pasirinktinio paryškinimo API?

Pasirinktinio paryškinimo API siūlo keletą pranašumų, palyginti su tradiciniais teksto žymėjimų stilizavimo metodais:

Geresnė vartotojo patirtis: Kurkite vizualiai patrauklius ir informatyvius teksto žymėjimus, kurie padeda vartotojams ir pagerina skaitomumą.
Kontekstą atitinkantis stilius: Taikykite skirtingus stilius priklausomai nuo pažymėto teksto turinio, pavyzdžiui, paryškindami kodo fragmentus ar pabrėždami svarbiausius terminus.
Geresnis prieinamumas: Suteikite aiškius vizualinius signalus pažymėtam tekstui, kad vartotojams su regos sutrikimais būtų lengviau naršyti turinį.
Pritaikoma išvaizda: Neapsiribokite paprastais fono ir teksto spalvų pakeitimais, kurkite unikalius ir patrauklius teksto žymėjimo stilius.
Dinamiškas stilius: Keiskite teksto žymėjimų išvaizdą atsižvelgiant į vartotojo veiksmus ar programos būseną.

Pagrindinių sąvokų supratimas

Prieš pradedant nagrinėti kodo pavyzdžius, būtina suprasti pagrindines CSS pasirinktinio paryškinimo API sąvokas:

1. Paryškinimo registracija

Procesas prasideda nuo pasirinktinio paryškinimo pavadinimo registravimo naudojant „JavaScript“. Šis pavadinimas vėliau bus naudojamas CSS, norint pritaikyti stilių konkretiems teksto žymėjimams.

2. Paryškinimo sritys

Paryškinimo sritys (angl. Highlight ranges) apibrėžia konkrečias teksto dalis, kurios bus stilizuojamos. Šios sritys sukuriamos programiškai naudojant Highlight ir StaticRange arba Range API. Jos nurodo paryškinamo teksto pradžios ir pabaigos taškus.

3. `::highlight()` pseudo-elementas

Šis pseudo-elementas naudojamas CSS, norint pritaikyti stilius registruotiems paryškinimų pavadinimams. Jis veikia kaip selektorius, taikomas teksto dalims, apibrėžtoms paryškinimo srityse.

Praktiniai pavyzdžiai: CSS pasirinktinio paryškinimo API diegimas

Panagrinėkime kelis praktinius pavyzdžius, iliustruojančius, kaip naudoti CSS pasirinktinio paryškinimo API.

1 pavyzdys: Paprastas teksto žymėjimo stilius

Šis pavyzdys parodo, kaip pakeisti pažymėto teksto fono ir teksto spalvą.

HTML:

<p id="myText">Tai yra tekstas, kurį galima pažymėti.</p>

JavaScript:

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

// Pažymėti visą pastraipą.
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;
}

Paaiškinimas:

„JavaScript“ kodas sukuria Highlight objektą ir prideda sritį, apimančią visą pastraipą su ID myText.
CSS.highlights.set() metodas registruoja paryškinimą pavadinimu 'myHighlight'.
CSS kodas naudoja ::highlight(myHighlight) pseudo-elementą, kad stilizuotų pažymėtą tekstą geltonu fonu ir juoda teksto spalva.

2 pavyzdys: Konkrečių žodžių paryškinimas

Šis pavyzdys parodo, kaip paryškinti konkrečius žodžius pastraipoje.

HTML:

<p id="myText">Tai yra pastraipa su žodžiu paryškinti, kurį norime paryškinti.</p>

JavaScript:

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

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

Paaiškinimas:

„JavaScript“ kodas peržiūri žodžius pastraipoje ir nustato žodžio „paryškinti“ indeksus.
Kiekvienam pasikartojimui jis sukuria Range objektą ir prideda jį prie Highlight objekto.
CSS kodas stilizuoja paryškintus žodžius šviesiai žaliu fonu ir pastorintu šriftu.

3 pavyzdys: Dinaminis paryškinimas pagal vartotojo įvestį

Šis pavyzdys parodo, kaip dinamiškai paryškinti tekstą pagal vartotojo įvestį paieškos laukelyje.

HTML:

<input type="text" id="searchInput" placeholder="Įveskite tekstą paryškinimui">
<p id="myText">Tai yra tekstas, kuris bus dinamiškai paryškintas pagal vartotojo įvestį.</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(); // Išvalyti ankstesnius paryškinimus

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

Paaiškinimas:

„JavaScript“ kodas laukia įvesties pakeitimų paieškos laukelyje.
Jis išvalo visus esamus paryškinimus ir tada ieško įvesto teksto pastraipoje.
Kiekvienam pasikartojimui jis sukuria Range objektą ir prideda jį prie Highlight objekto.
CSS kodas stilizuoja dinamiškai paryškintą tekstą geltonu fonu ir juoda teksto spalva.

4 pavyzdys: Paryškinimo išvaizdos pritaikymas su `::highlight()`

Pasirinktinio paryškinimo API galia slypi gebėjime pritaikyti paryškinto teksto išvaizdą ir pojūtį. Štai kaip galite pritaikyti šešėlius, gradientus ir kitus vizualinius efektus.

HTML:

<p id="customText">Pažymėkite šį tekstą, kad pamatytumėte pasirinktinį paryškinimo efektą.</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;
}

Paaiškinimas:

Šis pavyzdys pritaiko linijinio gradiento foną, baltą tekstą, teksto šešėlį, užapvalintus kampus ir atitraukimą paryškintam tekstui.
Tai parodo, kaip galite naudoti standartines CSS savybes ::highlight() pseudo-elemente, kad pasiektumėte vizualiai patrauklius ir unikalius žymėjimo stilius.

Prieinamumo aspektai

Nors teksto žymėjimų vizualinės išvaizdos gerinimas yra svarbus, prieinamumas visada turėtų būti pagrindinis prioritetas. Štai keletas gairių, kaip užtikrinti, kad jūsų pasirinktiniai paryškinimo stiliai būtų prieinami:

Spalvų kontrastas: Užtikrinkite pakankamą kontrastą tarp paryškinto teksto fono ir teksto spalvos. Naudokite įrankius, tokius kaip „WebAIM Contrast Checker“, kad patikrintumėte atitiktį prieinamumo standartams (WCAG).
Vizualiniai signalai: Suteikite aiškius vizualinius signalus pažymėtam tekstui. Venkite subtilių spalvų pokyčių, kuriuos vartotojams su regos sutrikimais gali būti sunku suvokti.
Navigacija klaviatūra: Užtikrinkite, kad pasirinktiniai paryškinimo stiliai netrukdytų navigacijai klaviatūra. Vartotojai turėtų galėti lengvai pažymėti ir naršyti tekstą naudodami klaviatūrą.
Ekrano skaitytuvų suderinamumas: Išbandykite savo pasirinktinius paryškinimo stilius su ekrano skaitytuvais, kad įsitikintumėte, jog pažymėtas tekstas yra tinkamai perskaitomas.

Naršyklių suderinamumas

CSS pasirinktinio paryškinimo API yra palyginti naujas interneto standartas, todėl naršyklių suderinamumas gali skirtis. 2023 m. pabaigoje / 2024 m. pradžioje palaikymas auga, bet dar nėra visuotinai įdiegtas. Dabartinę naršyklių palaikymo būseną galite patikrinti svetainėse, tokiose kaip „Can I use...“, kad būtumėte informuoti apie suderinamumo atnaujinimus.

Apsvarstykite galimybę naudoti funkcijos aptikimą (angl. feature detection), kad pateiktumėte atsarginius stilius naršyklėms, kurios dar nepalaiko šio API.

if ('CSS' in window && 'highlights' in CSS) {
  // Naudoti pasirinktinio paryškinimo API
} else {
  // Pateikti atsarginius stilius naudojant ::selection
}

Realaus pasaulio naudojimo atvejai

CSS pasirinktinio paryškinimo API turi daugybę realių pritaikymo galimybių, įskaitant:

Kodo redaktoriai: Sintaksės elementų, klaidų ir įspėjimų paryškinimas kodo redaktoriuose.
E-mokymosi platformos: Pagrindinių sąvokų ir apibrėžimų pabrėžimas mokomojoje medžiagoje.
Dokumentų peržiūros programos: Leidžia vartotojams paryškinti ir komentuoti tekstą dokumentuose.
Paieškos rezultatai: Paieškos terminų paryškinimas paieškos rezultatuose.
Duomenų vizualizacija: Konkrečių duomenų taškų ar tendencijų paryškinimas diagramose ir grafikuose.

Geroji praktika ir patarimai

Naudokite aprašomuosius paryškinimų pavadinimus: Pasirinkite paryškinimų pavadinimus, kurie aiškiai nurodo paryškinimo tikslą.
Išvalykite paryškinimus, kai reikia: Nepamirškite išvalyti paryškinimų, kai jie nebereikalingi, kad išvengtumėte netikėtų stiliaus problemų.
Optimizuokite našumą: Venkite kurti per daug paryškinimo sričių, nes tai gali paveikti našumą.
Kruopščiai testuokite: Išbandykite savo pasirinktinius paryškinimo stilius skirtingose naršyklėse ir įrenginiuose, kad užtikrintumėte suderinamumą ir prieinamumą.
Apsvarstykite atsarginius variantus: Pateikite atsarginius stilius naršyklėms, kurios dar nepalaiko pasirinktinio paryškinimo API.

Pažangios technikos

1. Kelių paryškinimų derinimas

Galite derinti kelis paryškinimus, kad sukurtumėte sudėtingesnius stiliaus efektus. Pavyzdžiui, galite norėti paryškinti ir raktinius žodžius, ir vartotojo pasirinktą tekstą skirtingais stiliais.

2. Įvykių (events) naudojimas paryškinimams atnaujinti

Galite naudoti „JavaScript“ įvykius, tokius kaip pelės užvedimas (mouseover) ar paspaudimas (click), kad dinamiškai atnaujintumėte paryškinimo sritis pagal vartotojo veiksmus.

3. Integracija su trečiųjų šalių bibliotekomis

Galite integruoti pasirinktinio paryškinimo API su trečiųjų šalių bibliotekomis, kad sukurtumėte sudėtingesnius paryškinimo sprendimus. Pavyzdžiui, galite naudoti natūraliosios kalbos apdorojimo (NLP) biblioteką, kad automatiškai nustatytumėte ir paryškintumėte svarbiausius terminus dokumente.

Teksto žymėjimo stiliaus ateitis

CSS pasirinktinio paryškinimo API yra reikšmingas žingsnis į priekį teksto žymėjimo stiliaus srityje. Jis suteikia kūrėjams galimybę kurti patrauklesnes, prieinamesnes ir kontekstą atitinkančias vartotojo sąsajas. Naršyklių palaikymui nuolat augant, pasirinktinio paryškinimo API taps esminiu įrankiu interneto kūrėjams visame pasaulyje.

Išvada

CSS pasirinktinio paryškinimo API atveria daugybę galimybių pritaikyti teksto žymėjimo patirtį. Suprasdami pagrindines sąvokas, išnagrinėję praktinius pavyzdžius ir atsižvelgdami į prieinamumo gaires, galite pasinaudoti šiuo galingu API, kad sukurtumėte išties išskirtines vartotojo sąsajas. Priimkite pasirinktinio paryškinimo API ir pakelkite savo interneto svetainių kūrimo projektus į naujas aukštumas.

Eksperimentuokite su pateiktais pavyzdžiais, pritaikykite juos savo specifiniams poreikiams ir ištyrinėkite visas CSS pasirinktinio paryškinimo API galimybes. Jūsų vartotojai įvertins dėmesį detalėms ir pagerintą vartotojo patirtį.

CSS pasirinktinio paryškinimo API: Teksto žymėjimo stiliaus įvaldymas

Kas yra CSS pasirinktinio paryškinimo API?

Kodėl verta naudoti CSS pasirinktinio paryškinimo API?

Pagrindinių sąvokų supratimas

1. Paryškinimo registracija

2. Paryškinimo sritys

3. ::highlight() pseudo-elementas

Praktiniai pavyzdžiai: CSS pasirinktinio paryškinimo API diegimas

1 pavyzdys: Paprastas teksto žymėjimo stilius

2 pavyzdys: Konkrečių žodžių paryškinimas

3 pavyzdys: Dinaminis paryškinimas pagal vartotojo įvestį

4 pavyzdys: Paryškinimo išvaizdos pritaikymas su ::highlight()

Prieinamumo aspektai

Naršyklių suderinamumas

Realaus pasaulio naudojimo atvejai

Geroji praktika ir patarimai

Pažangios technikos

1. Kelių paryškinimų derinimas

2. Įvykių (events) naudojimas paryškinimams atnaujinti

3. Integracija su trečiųjų šalių bibliotekomis

Teksto žymėjimo stiliaus ateitis

Išvada

3. `::highlight()` pseudo-elementas

4 pavyzdys: Paryškinimo išvaizdos pritaikymas su `::highlight()`