CSS Custom Highlight API: Teksta iezīmēšanas stila pārvaldīšana

Vienkāršā teksta iezīmēšanas darbība tīmekļa lapā ir kaut kas, ko vairums lietotāju veic, daudz par to nedomājot. Tomēr kā izstrādātāji mēs bieži cenšamies uzlabot pat vissmalkākās mijiedarbības. CSS Custom Highlight API ļauj mums radikāli mainīt teksta iezīmēšanas pieredzi, piedāvājot nepieredzētu kontroli pār iezīmētā teksta izskatu. Šī iespēja sniedzas tālāk par vienkāršām fona un teksta krāsas izmaiņām, ļaujot veidot sarežģītas un saistošas lietotāju saskarnes.

Kas ir CSS Custom Highlight API?

CSS Custom Highlight API ir moderns tīmekļa standarts, kas nodrošina veidu, kā stilizēt teksta iezīmējumu (un citu izceltu diapazonu) izskatu, izmantojot CSS. Tas ievieš ::highlight() pseido-elementu, kas ir vērsts uz konkrētiem teksta diapazoniem, pamatojoties uz izstrādātāja definētiem kritērijiem. Šis API pārvar tradicionālā ::selection pseido-elementa ierobežojumus, kas piedāvā ļoti vienkāršas stila opcijas. Ar Custom Highlight API jūs varat izveidot ļoti pielāgotus un kontekstam atbilstošus teksta iezīmēšanas stilus.

Kāpēc izmantot CSS Custom Highlight API?

Custom Highlight API piedāvā vairākas priekšrocības salīdzinājumā ar tradicionālajām teksta iezīmēšanas stila metodēm:

• Uzlabota lietotāja pieredze: Veidojiet vizuāli pievilcīgus un informatīvus teksta iezīmējumus, kas vada lietotājus un uzlabo lasāmību.
• Kontekstam atbilstošs stils: Piemērojiet dažādus stilus atkarībā no iezīmētā teksta satura, piemēram, izceļot koda fragmentus vai uzsverot atslēgas terminus.
• Uzlabota pieejamība: Nodrošiniet skaidrus vizuālus signālus iezīmētam tekstam, atvieglojot satura navigāciju lietotājiem ar redzes traucējumiem.
• Pielāgojams izskats: Pārsniedziet vienkāršas fona un teksta krāsas maiņas robežas, lai radītu unikālus un saistošus teksta iezīmēšanas stilus.
• Dinamisks stils: Mainiet teksta iezīmējumu izskatu, pamatojoties uz lietotāja mijiedarbību vai lietojumprogrammas stāvokli.

Galveno jēdzienu izpratne

Pirms iedziļināties koda piemēros, ir svarīgi izprast CSS Custom Highlight API pamatjēdzienus:

1. Izcēluma reģistrācija

Process sākas ar pielāgota izcēluma nosaukuma reģistrēšanu, izmantojot JavaScript. Šis nosaukums pēc tam tiks izmantots CSS, lai mērķētu uz konkrētiem teksta iezīmējumiem.

2. Izcēlumu diapazoni

Izcēlumu diapazoni definē konkrētos teksta posmus, kuriem jāpiemēro stils. Šie diapazoni tiek izveidoti programmatiski, izmantojot Highlight un StaticRange vai Range API. Tie norāda izceļamā teksta sākuma un beigu punktus.

3. ::highlight() pseido-elements

Šis pseido-elements tiek izmantots CSS, lai piemērotu stilus reģistrētiem izcēlumu nosaukumiem. Tas darbojas kā selektors, mērķējot uz teksta posmiem, ko definē izcēlumu diapazoni.

Praktiski piemēri: CSS Custom Highlight API ieviešana

Apskatīsim vairākus praktiskus piemērus, lai ilustrētu, kā izmantot CSS Custom Highlight API.

1. piemērs: Vienkāršs teksta iezīmēšanas stils

Šis piemērs parāda, kā mainīt iezīmētā teksta fona un teksta krāsu.

HTML:

<p id="myText">Šis ir teksts, ko var iezīmēt.</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;
}

Paskaidrojums:

• JavaScript kods izveido Highlight objektu un pievieno diapazonu, kas aptver visu rindkopu ar ID myText.
• CSS.highlights.set() metode reģistrē izcēlumu ar nosaukumu 'myHighlight'.
• CSS kods izmanto ::highlight(myHighlight) pseido-elementu, lai stilizētu iezīmēto tekstu ar dzeltenu fonu un melnu teksta krāsu.

2. piemērs: Konkrētu vārdu izcelšana

Šis piemērs parāda, kā izcelt konkrētus vārdus rindkopā.

HTML:

<p id="myText">Šī ir rindkopa ar vārdu izcelt, kuru mēs vēlamies izcelt.</p>

JavaScript:

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

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

Paskaidrojums:

• JavaScript kods iet cauri vārdiem rindkopā un identificē vārda "izcelt" indeksus.
• Katram gadījumam tas izveido Range objektu un pievieno to Highlight objektam.
• CSS kods stilizē izceltos vārdus ar gaiši zaļu fonu un treknraksta burtu svaru.

3. piemērs: Dinamiska izcelšana, pamatojoties uz lietotāja ievadi

Šis piemērs parāda, kā dinamiski izcelt tekstu, pamatojoties uz lietotāja ievadi meklēšanas laukā.

HTML:

<input type="text" id="searchInput" placeholder="Ievadiet tekstu izcelšanai">
<p id="myText">Šis ir teksts, kas tiks dinamiski izcelts, pamatojoties uz lietotāja ievadi.</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;
}

Paskaidrojums:

• JavaScript kods klausās ievades izmaiņas meklēšanas laukā.
• Tas notīra visus esošos izcēlumus un pēc tam meklē ievadīto tekstu rindkopā.
• Katram gadījumam tas izveido Range objektu un pievieno to Highlight objektam.
• CSS kods stilizē dinamiski izcelto tekstu ar dzeltenu fonu un melnu teksta krāsu.

4. piemērs: Izcēluma izskata pielāgošana ar ::highlight()

Custom Highlight API spēks slēpjas tā spējā pielāgot izceltā teksta izskatu un sajūtu. Lūk, kā jūs varat piemērot ēnas, gradientus un citus vizuālos efektus.

HTML:

<p id="customText">Iezīmējiet šo tekstu, lai redzētu pielāgotu izcelšanas efektu.</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;
}

Paskaidrojums:

• Šis piemērs piemēro lineāru gradienta fonu, baltu tekstu, teksta ēnu, noapaļotus stūrus un polsterējumu izceltajam tekstam.
• Tas parāda, kā jūs varat izmantot standarta CSS īpašības ::highlight() pseido-elementā, lai sasniegtu vizuāli pievilcīgus un unikālus iezīmēšanas stilus.

Pieejamības apsvērumi

Lai gan teksta iezīmējumu vizuālā izskata uzlabošana ir svarīga, pieejamībai vienmēr jābūt galvenajai prioritātei. Šeit ir dažas vadlīnijas, lai nodrošinātu, ka jūsu pielāgotie izcelšanas stili ir pieejami:

• Krāsu kontrasts: Nodrošiniet pietiekamu kontrastu starp izceltā teksta fona un teksta krāsu. Izmantojiet rīkus, piemēram, WebAIM Contrast Checker, lai pārbaudītu atbilstību pieejamības standartiem (WCAG).
• Vizuālie signāli: Nodrošiniet skaidrus vizuālus signālus iezīmētam tekstam. Izvairieties no smalkām krāsu izmaiņām, kuras lietotājiem ar redzes traucējumiem var būt grūti uztvert.
• Navigācija ar tastatūru: Pārliecinieties, ka pielāgotie izcelšanas stili netraucē navigācijai ar tastatūru. Lietotājiem jāspēj viegli iezīmēt un pārvietoties tekstā, izmantojot tastatūru.
• Ekrāna lasītāju saderība: Pārbaudiet savus pielāgotos izcelšanas stilus ar ekrāna lasītājiem, lai nodrošinātu, ka iezīmētais teksts tiek pareizi paziņots.

Pārlūkprogrammu saderība

CSS Custom Highlight API ir salīdzinoši jauns tīmekļa standarts, un pārlūkprogrammu saderība var atšķirties. 2023. gada beigās/2024. gada sākumā atbalsts pieaug, bet tas nav vispārēji ieviests. Jūs varat pārbaudīt pašreizējo pārlūkprogrammu atbalsta statusu vietnēs, piemēram, "Can I use...", lai būtu informēts par saderības atjauninājumiem.

Apsveriet iespēju izmantot funkciju noteikšanu, lai nodrošinātu rezerves stilus pārlūkprogrammām, kas vēl neatbalsta šo API.

if ('CSS' in window && 'highlights' in CSS) {
  // Use the Custom Highlight API
} else {
  // Provide fallback styles using ::selection
}

Reālās pasaules pielietojuma gadījumi

CSS Custom Highlight API ir daudz reālu pielietojumu, tostarp:

• Koda redaktori: Izcelt sintakses elementus, kļūdas un brīdinājumus koda redaktoros.
• E-mācību platformas: Uzsvērt galvenos jēdzienus un definīcijas mācību materiālos.
• Dokumentu skatītāji: Ļaut lietotājiem izcelt un pievienot anotācijas tekstam dokumentos.
• Meklēšanas rezultāti: Izcelt meklēšanas terminus meklēšanas rezultātos.
• Datu vizualizācija: Izcelt konkrētus datu punktus vai tendences diagrammās un grafikos.

Labākā prakse un padomi

• Izmantojiet aprakstošus izcēlumu nosaukumus: Izvēlieties izcēlumu nosaukumus, kas skaidri norāda izcelšanas mērķi.
• Notīriet izcēlumus, kad nepieciešams: Atcerieties notīrīt izcēlumus, kad tie vairs nav vajadzīgi, lai izvairītos no negaidītām stila problēmām.
• Optimizējiet veiktspēju: Izvairieties no pārmērīgi daudzu izcēlumu diapazonu izveides, jo tas var ietekmēt veiktspēju.
• Rūpīgi pārbaudiet: Pārbaudiet savus pielāgotos izcelšanas stilus dažādās pārlūkprogrammās un ierīcēs, lai nodrošinātu saderību un pieejamību.
• Apsveriet rezerves variantus: Nodrošiniet rezerves stilus pārlūkprogrammām, kas vēl neatbalsta Custom Highlight API.

Padziļinātas tehnikas

1. Vairāku izcēlumu apvienošana

Jūs varat apvienot vairākus izcēlumus, lai radītu sarežģītākus stila efektus. Piemēram, jūs varētu vēlēties izcelt gan atslēgvārdus, gan lietotāja iezīmēto tekstu ar dažādiem stiliem.

2. Notikumu izmantošana izcēlumu atjaunināšanai

Jūs varat izmantot JavaScript notikumus, piemēram, peles pārbraukšanu (mouseover) vai klikšķi (click), lai dinamiski atjauninātu izcēlumu diapazonus, pamatojoties uz lietotāja mijiedarbību.

3. Integrācija ar trešo pušu bibliotēkām

Jūs varat integrēt Custom Highlight API ar trešo pušu bibliotēkām, lai radītu sarežģītākus izcelšanas risinājumus. Piemēram, jūs varētu izmantot dabiskās valodas apstrādes (NLP) bibliotēku, lai automātiski identificētu un izceltu atslēgas terminus dokumentā.

Teksta iezīmēšanas stila nākotne

CSS Custom Highlight API ir nozīmīgs progress teksta iezīmēšanas stilā. Tas ļauj izstrādātājiem veidot saistošākas, pieejamākas un kontekstam atbilstošākas lietotāju saskarnes. Tā kā pārlūkprogrammu atbalsts turpina pieaugt, Custom Highlight API ir gatavs kļūt par būtisku rīku tīmekļa izstrādātājiem visā pasaulē.

Noslēgums

CSS Custom Highlight API paver plašas iespējas teksta iezīmēšanas pieredzes pielāgošanai. Izprotot galvenos jēdzienus, izpētot praktiskus piemērus un ņemot vērā pieejamības vadlīnijas, jūs varat izmantot šo jaudīgo API, lai radītu patiesi izcilas lietotāju saskarnes. Pieņemiet Custom Highlight API un paceliet savus tīmekļa izstrādes projektus jaunos augstumos.

Eksperimentējiet ar sniegtajiem piemēriem, pielāgojiet tos savām specifiskajām vajadzībām un izpētiet pilnu CSS Custom Highlight API potenciālu. Jūsu lietotāji novērtēs uzmanību detaļām un uzlaboto lietotāja pieredzi.