CSS Custom Highlight API: Teksti valiku stiliseerimise meisterlik valdamine

Tagasihoidlik tegevus, teksti valimine veebilehel, on midagi, mida enamik kasutajaid teeb pikemalt mõtlemata. Arendajatena püüame aga sageli täiustada isegi kõige peenemaid interaktsioone. CSS Custom Highlight API annab meile võimaluse revolutsiooniliselt muuta teksti valimise kogemust, pakkudes enneolematut kontrolli valitud teksti välimuse üle. See võimekus ületab lihtsaid tausta- ja tekstivärvi muudatusi, võimaldades luua keerukaid ja kaasahaaravaid kasutajaliideseid.

Mis on CSS Custom Highlight API?

CSS Custom Highlight API on kaasaegne veebistandard, mis pakub võimalust stiliseerida teksti valikute (ja muude esiletõstetud vahemike) välimust CSS-i abil. See tutvustab ::highlight() pseudo-elementi, mis sihib konkreetseid tekstivahemikke arendaja määratletud kriteeriumide alusel. See API ületab traditsioonilise ::selection pseudo-elemendi piirangud, mis pakub väga elementaarseid stiliseerimisvõimalusi. Custom Highlight API abil saate luua väga kohandatud ja kontekstiteadlikke teksti valiku stiile.

Miks kasutada CSS Custom Highlight API-t?

Custom Highlight API pakub mitmeid eeliseid traditsiooniliste teksti valiku stiliseerimise meetodite ees:

• Parem kasutajakogemus: Looge visuaalselt atraktiivseid ja informatiivseid teksti valikuid, mis juhendavad kasutajaid ja parandavad loetavust.
• Kontekstiteadlik stiliseerimine: Rakendage erinevaid stiile vastavalt valitud teksti sisule, näiteks koodilõikude esiletõstmine või võtmeterminite rõhutamine.
• Parem ligipääsetavus: Pakkuge selgeid visuaalseid vihjeid valitud teksti kohta, muutes nägemispuudega kasutajatel sisu navigeerimise lihtsamaks.
• Kohandatav välimus: Minge kaugemale lihtsatest tausta- ja tekstivärvi muudatustest, et luua unikaalseid ja kaasahaaravaid teksti valiku stiile.
• Dünaamiline stiliseerimine: Muutke teksti valikute välimust vastavalt kasutaja interaktsioonidele või rakenduse olekule.

Põhimõistete mõistmine

Enne koodinäidetesse sukeldumist on oluline mõista CSS Custom Highlight API põhimõisteid:

1. Esiletõstu registreerimine

Protsess algab kohandatud esiletõstu nime registreerimisega JavaScripti abil. Seda nime kasutatakse seejärel CSS-is konkreetsete teksti valikute sihtimiseks.

2. Esiletõstu vahemikud

Esiletõstu vahemikud määravad konkreetsed tekstilõigud, mida stiliseerida. Need vahemikud luuakse programmiliselt, kasutades Highlight ja StaticRange või Range API-sid. Need määravad esiletõstetava teksti algus- ja lõpp-punktid.

3. ::highlight() pseudo-element

Seda pseudo-elementi kasutatakse CSS-is stiilide rakendamiseks registreeritud esiletõstude nimedele. See toimib selektorina, sihtides esiletõstu vahemike poolt määratletud tekstilõike.

Praktilised näited: CSS Custom Highlight API rakendamine

Uurime mitmeid praktilisi näiteid, et illustreerida, kuidas CSS Custom Highlight API-t kasutada.

Näide 1: Teksti valiku põhiline stiliseerimine

See näide demonstreerib, kuidas muuta valitud teksti tausta- ja tekstivärvi.

HTML:

<p id="myText">See on tekst, mida saab valida.</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;
}

Selgitus:

• JavaScripti kood loob Highlight objekti ja lisab vahemiku, mis katab kogu ID-ga myText lõigu.
• Meetod CSS.highlights.set() registreerib esiletõstu nimega 'myHighlight'.
• CSS-kood kasutab ::highlight(myHighlight) pseudo-elementi, et stiliseerida valitud tekst kollase tausta ja musta tekstivärviga.

Näide 2: Konkreetsete sõnade esiletõstmine

See näide demonstreerib, kuidas lõigu sees konkreetseid sõnu esile tõsta.

HTML:

<p id="myText">See on lõik sõnaga esiletõstmine, mida me tahame esile tõsta.</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;
}

Selgitus:

• JavaScripti kood itereerib läbi lõigu sõnade ja tuvastab sõna "highlight" indeksid.
• Iga esinemise korral loob see Range objekti ja lisab selle Highlight objektile.
• CSS-kood stiliseerib esiletõstetud sõnad helerohelise tausta ja rasvase kirjastiiliga.

Näide 3: Dünaamiline esiletõstmine kasutaja sisendi põhjal

See näide demonstreerib, kuidas dünaamiliselt esile tõsta teksti vastavalt kasutaja sisendile otsingukastis.

HTML:

<input type="text" id="searchInput" placeholder="Sisesta tekst esiletõstmiseks">
<p id="myText">See on tekst, mis tõstetakse dünaamiliselt esile vastavalt kasutaja sisendile.</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;
}

Selgitus:

• JavaScripti kood kuulab sisendi muutusi otsingukastis.
• See kustutab kõik olemasolevad esiletõstud ja seejärel otsib sisestatud teksti lõigust.
• Iga esinemise korral loob see Range objekti ja lisab selle Highlight objektile.
• CSS-kood stiliseerib dünaamiliselt esiletõstetud teksti kollase tausta ja musta tekstivärviga.

Näide 4: Esiletõstu välimuse kohandamine ::highlight() abil

Custom Highlight API võimsus seisneb selle võimes kohandada esiletõstetud teksti välimust ja tunnetust. Siin on, kuidas saate rakendada varje, gradiente ja muid visuaalseid efekte.

HTML:

<p id="customText">Valige see tekst, et näha kohandatud esiletõstu efekti.</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;
}

Selgitus:

• See näide rakendab esiletõstetud tekstile lineaarse gradienttausta, valge teksti, tekstivarju, ümardatud nurgad ja polsterduse.
• See näitab, kuidas saate kasutada standardseid CSS-i omadusi ::highlight() pseudo-elemendi sees, et saavutada visuaalselt atraktiivseid ja unikaalseid valiku stiile.

Ligipääsetavuse kaalutlused

Kuigi teksti valikute visuaalse välimuse parandamine on oluline, peaks ligipääsetavus alati olema esmatähtis. Siin on mõned juhised, et tagada teie kohandatud esiletõstu stiilide ligipääsetavus:

• Värvikontrastsus: Tagage piisav kontrast esiletõstetud teksti tausta- ja tekstivärvi vahel. Kasutage tööriistu nagu WebAIM Contrast Checker, et kontrollida vastavust ligipääsetavusstandarditele (WCAG).
• Visuaalsed vihjed: Pakkuge valitud teksti jaoks selgeid visuaalseid vihjeid. Vältige peeneid värvimuutusi, mida nägemispuudega kasutajatel võib olla raske tajuda.
• Klaviatuuriga navigeerimine: Veenduge, et kohandatud esiletõstu stiilid ei segaks klaviatuuriga navigeerimist. Kasutajad peaksid saama teksti klaviatuuri abil hõlpsasti valida ja navigeerida.
• Ekraanilugeja ühilduvus: Testige oma kohandatud esiletõstu stiile ekraanilugejatega, et tagada valitud teksti korrektne ettelugemine.

Brauseri ühilduvus

CSS Custom Highlight API on suhteliselt uus veebistandard ja brauseri ühilduvus võib varieeruda. 2023. aasta lõpu / 2024. aasta alguse seisuga on tugi kasvamas, kuid mitte universaalselt rakendatud. Saate kontrollida praegust brauseri toe staatust veebisaitidel nagu "Can I use...", et olla kursis ühilduvusvärskendustega.

Kaaluge funktsioonide tuvastamise kasutamist, et pakkuda varustiile brauseritele, mis API-t veel ei toeta.

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

Reaalse maailma kasutusjuhud

CSS Custom Highlight API-l on mitmeid reaalse maailma rakendusi, sealhulgas:

• Koodiredaktorid: Süntaksi elementide, vigade ja hoiatuste esiletõstmine koodiredaktorites.
• E-õppe platvormid: Põhimõistete ja definitsioonide rõhutamine õppematerjalides.
• Dokumendivaaturid: Kasutajatel on võimalik dokumentides teksti esile tõsta ja annoteerida.
• Otsingutulemused: Otsingusõnade esiletõstmine otsingutulemustes.
• Andmete visualiseerimine: Konkreetsete andmepunktide või suundumuste esiletõstmine diagrammidel ja graafikutel.

Parimad tavad ja näpunäited

• Kasutage kirjeldavaid esiletõstude nimesid: Valige esiletõstude nimed, mis selgelt näitavad esiletõstmise eesmärki.
• Kustutage esiletõstud vajadusel: Ärge unustage esiletõste kustutada, kui neid enam ei vajata, et vältida ootamatuid stiiliprobleeme.
• Optimeerige jõudlust: Vältige liigsete esiletõstu vahemike loomist, kuna see võib jõudlust mõjutada.
• Testige põhjalikult: Testige oma kohandatud esiletõstu stiile erinevates brauserites ja seadmetes, et tagada ühilduvus ja ligipääsetavus.
• Kaaluge varustiile: Pakkuge varustiile brauseritele, mis Custom Highlight API-t veel ei toeta.

Täiustatud tehnikad

1. Mitme esiletõstu kombineerimine

Saate kombineerida mitut esiletõstu, et luua keerukamaid stiliseerimisefekte. Näiteks võite soovida esile tõsta nii märksõnu kui ka kasutaja valitud teksti erinevate stiilidega.

2. Sündmuste kasutamine esiletõstude uuendamiseks

Saate kasutada JavaScripti sündmusi, nagu hiirega üleliikumine või klõps, et dünaamiliselt uuendada esiletõstu vahemikke vastavalt kasutaja interaktsioonidele.

3. Integreerimine kolmandate osapoolte teekidega

Saate integreerida Custom Highlight API kolmandate osapoolte teekidega, et luua keerukamaid esiletõstmise lahendusi. Näiteks võiksite kasutada loomuliku keele töötlemise (NLP) teeki, et automaatselt tuvastada ja esile tõsta dokumendis võtmetermineid.

Teksti valiku stiliseerimise tulevik

CSS Custom Highlight API kujutab endast olulist edasiminekut teksti valiku stiliseerimises. See annab arendajatele võimaluse luua kaasahaaravamaid, ligipääsetavamaid ja kontekstiteadlikumaid kasutajaliideseid. Kuna brauseritugi jätkuvalt kasvab, on Custom Highlight API-st saamas oluline tööriist veebiarendajatele üle maailma.

Kokkuvõte

CSS Custom Highlight API avab terve maailma võimalusi teksti valimise kogemuse kohandamiseks. Mõistes põhimõisteid, uurides praktilisi näiteid ja arvestades ligipääsetavuse juhiseid, saate seda võimsat API-t kasutada tõeliselt erakordsete kasutajaliideste loomiseks. Võtke Custom Highlight API omaks ja viige oma veebiarendusprojektid uutesse kõrgustesse.

Katsetage esitatud näidetega, kohandage neid oma konkreetsetele vajadustele ja avastage CSS Custom Highlight API kogu potentsiaal. Teie kasutajad hindavad tähelepanu detailidele ja parendatud kasutajakogemust.