Tõsta oma kasutajaliidese taset: CSS-i kohandatud esiletõstmise API meisterlik kasutamine teksti valiku stiilimiseks

Aastaid on teksti valikute stiilimine veebis olnud üsna piiratud tegevus. Oleme suures osas piirdunud brauseri vaikestiiliga või parimal juhul tausta- ja tekstivärvi lihtsa muutmisega. CSS Custom Highlight API muudab aga kõike. See pakub võimsat ja paindlikku viisi valitud teksti välimuse täielikuks kohandamiseks, avades täiesti uue maailma kasutajaliidese disaini ja kasutajate kaasamise võimalustele.

Mis on CSS Custom Highlight API?

CSS Custom Highlight API on CSS-i funktsioonide kogum, mis võimaldab arendajatel stiilida teksti valikuid, kasutades kohandatud stiile, mis ulatuvad kaugemale tavalisest tausta- ja tekstivärvist. See tutvustab ::highlight pseudo-elementi ja seotud omadusi, võimaldades teil sihtida konkreetseid teksti valiku tüüpe ja rakendada neile unikaalseid stiile. See API parandab oluliselt kasutajakogemust, võimaldades visuaalselt atraktiivsemaid ja informatiivsemaid valikuid.

CSS Custom Highlight API põhifunktsioonid:

• ::highlight pseudo-element: API nurgakivi, mis võimaldab teil sihtida valitud teksti.
• Nimega esiletõstmised: Looge kohandatud esiletõstmise nimesid ja rakendage neid konkreetsetele elementidele.
• Esiletõstmine selection: Vaikimisi esiletõstmine, mis esindab kasutaja tavalist teksti valikut.
• Parem ligipääsetavus: Looge nägemispuudega kasutajatele visuaalselt eristuvamaid ja abistavamaid valikuid.

Brauserite ühilduvus

2023. aasta lõpu / 2024. aasta alguse seisuga on brauserite tugi CSS Custom Highlight API-le kasvamas, kuid see pole veel universaalne. Suurtel brauseritel nagu Chrome ja Edge on hea tugi. Safari tugi on olemas, kuid võib olla piiratud sõltuvalt versioonist. Kontrollige alati caniuse.com lehelt uusimat brauserite ühilduvuse teavet enne API rakendamist tootmiskeskkonnas. Kaaluge progressiivse täiustamise kasutamist, et tagada teie veebisaidi funktsionaalsus vanemate brauseritega kasutajatele.

Põhikasutus: Vaikimisi teksti valiku stiilimine

Alustame lihtsa näitega vaikimisi teksti valiku stiilimisest, kasutades ::highlight pseudo-elementi.

Näide: Tausta- ja tekstivärvi muutmine

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

            
::highlight {
  background-color: #FFFF00; /* Kollane */
  color: #000000; /* Must */
}

            

              
                Copy
              
            
          

Selles CSS-koodis sihtime vaikimisi teksti valikut ::highlight-ga ja määrame selle taustavärviks kollase (#FFFF00) ja tekstivärviks musta (#000000). See pakub lihtsat, kuid tõhusat viisi valitud teksti välimuse kohandamiseks.

Kohandatud esiletõstmise nimede loomine

CSS Custom Highlight API tegelik jõud peitub selle võimes määratleda kohandatud esiletõstmise nimesid. See võimaldab teil sihtida oma veebisaidi konkreetseid elemente või jaotisi ja rakendada nende teksti valikutele unikaalset stiili.

Näide: Koodilõikude esiletõstmine

Oletame, et soovite oma veebisaidil koodilõike esile tõsta tavalisest tekstist erinevalt. Saate seda saavutada, luues kohandatud esiletõstmise nime.

1. Määratlege kohandatud esiletõstmise nimi: Kasutage oma CSS-is kohandatud esiletõstmise nime määratlemiseks funktsiooni highlight().
2. Rakendage esiletõstmise nimi elementidele: Kasutage ::highlight(teie-esiletõstmise-nimi) pseudo-elementi, et sihtida konkreetseid elemente ja rakendada kohandatud stiili.

            
/* Määratlege kohandatud esiletõstmise nimi koodilõikudele */
::highlight(code-highlight) {
  background-color: #ADD8E6; /* Helesinine */
  color: #00008B; /* Tumesinine */
  font-weight: bold;
}

/* Rakendage esiletõstmise nimi koodielementidele */
code::highlight(code-highlight) {
  /* Stiil rakendub ainult siis, kui tekst on valitud <code> sildi sees */
}

/* Rakendage esiletõstmine spetsiifilise klassiga span-elementidele */
.highlighted-code::highlight(code-highlight) {

}

            

              
                Copy
              
            
          

Selles näites oleme määratlenud kohandatud esiletõstmise nime nimega code-highlight. Seejärel oleme rakendanud selle esiletõstmise code elementidele. Taustavärviks on määratud helesinine (#ADD8E6), tekstivärviks tumesinine (#00008B) ja fondi kaaluks rasvane. Nüüd, kui tekst valitakse code elemendi sees, stiilitakse see nende kohandatud stiilidega.

Täpsem kasutus: Konkreetsete tekstivahemike sihtimine

CSS Custom Highlight API-d saab kasutada ka konkreetsete tekstivahemike sihtimiseks elemendi sees. See võimaldab veelgi peenemat kontrolli teksti valiku stiilimise üle.

Näide: Otsinguterminite esiletõstmine

Kujutage ette, et soovite dokumendis otsingutermineid esile tõsta. See nõuab sageli JavaScripti kasutamist koos CSS Highlight API-ga.

1. Kasutage JavaScripti otsinguterminite tuvastamiseks: Kasutage JavaScripti, et leida kõik otsingutermini esinemised dokumendis.
2. Looge esiletõstmise vahemikud: Kasutage JavaScripti Range API-d, et luua vahemikud iga otsingutermini esinemise jaoks.
3. Rakendage esiletõstmine: Kasutage meetodit CSS.highlights.set(), et rakendada esiletõstmine loodud vahemikele.

            
// JavaScripti kood otsinguterminite esiletõstmiseks
function highlightSearchTerms(searchTerm) {
  // Esmalt defineeri kohandatud esiletõstmine CSS-is
  const highlightName = 'search-highlight';
  const ranges = [];

  // Leia kõik tekstisõlmed
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Rakenda esiletõstmised kasutades CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('CSS Custom Highlight API ei ole selles brauseris täielikult toetatud. Pakutakse varulahendust');
    // Pakkuge varulahendus piiratud toega brauseritele (nt vanem Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Hele lõheroosa
      span.style.color = '#000000'; // Must
      span.className = 'search-highlight-fallback'; // Lisage klass varulahenduse stiilimiseks
      range.surroundContents(span);
    });
  }
}

// CSS-kood otsingu esiletõstmise stiilimiseks
::highlight(search-highlight) {
  background-color: #FFA07A; /* Hele lõheroosa */
  color: #000000; /* Must */
}

/* Varulahenduse stiilimine brauseritele, mis ei toeta API-d täielikult */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Kasutusnäide: tõsta esile termin "example"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

See koodilõik demonstreerib, kuidas dokumendis otsingutermineid esile tõsta, kasutades JavaScripti ja CSS Custom Highlight API-d. JavaScripti kood tuvastab otsinguterminid, loob iga esinemise jaoks vahemikud ja rakendab neile vahemikele search-highlight. CSS-kood seejärel stiilib esiletõstetud teksti heleda lõheroosa tausta ja musta tekstiga.

Oluline märkus: See lähenemine nõuab JavaScripti ja tugineb CSS.highlights API-le. Kuna tugi pole universaalne, on demonstreeritud varumehhanismi (nagu teksti ümbritsemine `span`-iga ja selle `span`-i stiilimine).

Ligipääsetavuse kaalutlused

CSS Custom Highlight API kasutamisel on oluline arvestada ligipääsetavusega, et tagada teie veebisaidi kasutatavus kõigile, sealhulgas puuetega kasutajatele.

Nõuanded ligipääsetavaks teksti valiku stiilimiseks:

• Tagage piisav kontrastsus: Hoidke valitud teksti tausta- ja tekstivärvi vahel piisavat kontrasti, et see oleks nägemispuudega kasutajatele loetav. WCAG juhised soovitavad tavalise teksti puhul kontrastsussuhet vähemalt 4.5:1.
• Vältige ainult värvile tuginemist: Ärge lootke teksti valiku tähistamiseks ainult värvile. Kasutage valiku selgemaks muutmiseks täiendavaid visuaalseid vihjeid, nagu allajoonimine või rasvane kiri.
• Pakkuge alternatiivset stiili kõrge kontrastsuse režiimi jaoks: Kasutajad, kes lubavad oma operatsioonisüsteemis kõrge kontrastsuse režiimi, võivad teie kohandatud stiilid üle kirjutada. Pakkuge alternatiivset stiili, mis töötab hästi kõrge kontrastsuse režiimis, et tagada loetavus. Saate kasutada meediapäringuid nagu @media (forced-colors: active), et tuvastada, millal kõrge kontrastsuse režiim on lubatud.
• Testige abistavate tehnoloogiatega: Testige oma veebisaiti abistavate tehnoloogiatega, näiteks ekraanilugejatega, et tagada valitud teksti korrektne ettelugemine ja mõistmine.

Näide: Piisava kontrastsuse tagamine

            
::highlight {
  background-color: #000080; /* Tumesinine */
  color: #FFFFFF; /* Valge */
}

            

              
                Copy
              
            
          

Selles näites oleme valinud tumesinise taustavärvi ja valge tekstivärvi, mis tagab piisava kontrastsuse nägemispuudega kasutajatele. Kasutage alati värvikontrastsuse kontrollijat, et veenduda, et teie värvivalikud vastavad ligipääsetavuse standarditele. Abiks võivad olla tööriistad nagu WebAIM-i kontrastsuse kontrollija.

Praktilised näited ja kasutusjuhud

CSS Custom Highlight API pakub laia valikut võimalusi kasutajakogemuse parandamiseks. Siin on mõned praktilised näited ja kasutusjuhud:

• Koodi esiletõstmine: Nagu varem demonstreeritud, saate API-d kasutada koodilõikude esiletõstmiseks kohandatud stiilidega, muutes need visuaalselt atraktiivsemaks ja kergemini loetavaks.
• Otsinguterminite esiletõstmine: Tõstke dokumendis esile otsinguterminid, et aidata kasutajatel kiiresti leida otsitavat teavet.
• Vigade esiletõstmine: Tõstke esile vead või hoiatused vormides või muudes kasutajaliidestes, et juhtida neile kasutaja tähelepanu.
• Tsitaatide esiletõstmine: Tõstke esile tsiteeritud tekst akadeemilistes töödes või artiklites, et seda visuaalselt põhisisust eristada.
• Vestluse esiletõstmine: Vestlusrakendustes tõstke esile kasutaja enda sõnumid või konkreetsete kasutajate sõnumid, et neid oleks lihtsam jälgida.
• Mängustamine: Tõstke mängus esile konkreetsed sõnad või fraasid, et anda mängijale vihjeid.
• Teksti kokkuvõte: Tõstke dokumendis esile võtmelaused või -fraasid, et anda sisu kohta kiire kokkuvõte. See hõlmab sageli keerulisi algoritme olulisuse määramiseks.

Parimad tavad ja näpunäited

CSS Custom Highlight API maksimaalseks ärakasutamiseks järgige neid parimaid tavasid ja näpunäiteid:

• Kasutage kirjeldavaid esiletõstmise nimesid: Valige kirjeldavad esiletõstmise nimed, mis näitavad selgelt esiletõstmise eesmärki. See muudab teie koodi loetavamaks ja hooldatavamaks. Näiteks kasutage code-highlight asemel highlight-1.
• Hoidke stiilid järjepidevad: Hoidke kõigi oma esiletõstmiste puhul järjepidevat stiili, et luua ühtne kasutajakogemus. Kasutage järjepidevuse tagamiseks disainisüsteemi või stiilijuhendit.
• Vältige esiletõstmiste liigset kasutamist: Ärge kasutage esiletõstmisi liiga palju, kuna see võib kasutajaid segadusse ajada ja üle koormata. Kasutage neid säästlikult ja strateegiliselt, et juhtida tähelepanu kõige olulisemale teabele.
• Testige erinevatel seadmetel ja brauserites: Testige oma veebisaiti erinevatel seadmetel ja brauserites, et veenduda, et teie kohandatud esiletõstmised kuvatakse õigesti. Pöörake erilist tähelepanu mobiilseadmetele ja vanematele brauseritele.
• Kaaluge jõudlust: Kuigi CSS Custom Highlight API on üldiselt hea jõudlusega, olge teadlik kasutatavate esiletõstmiste arvust, eriti suurte dokumentide puhul. Liiga palju esiletõstmisi võib jõudlust mõjutada. Kui kasutate esiletõstmiste haldamiseks JavaScripti, optimeerige oma koodi, et minimeerida DOM-i manipulatsioonide arvu.
• Kasutage progressiivset täiustamist: Kuna brauserite tugi ei ole universaalne, kasutage progressiivse täiustamise tehnikaid. Rakendage standardse CSS-stiiliga varumehhanism, et tagada kasutuskogemuse jäämine vanemate brauserite kasutajatele. Kaaluge funktsioonide tuvastamise (nt CSS.highlights olemasolu kontrollimine) kasutamist, et otsustada, kas kasutada API-d või varulahendust.

Kokkuvõte

CSS Custom Highlight API on võimas tööriist kasutajakogemuse parandamiseks ning visuaalselt atraktiivsemate ja informatiivsemate teksti valikute loomiseks. Selle API valdamisega saate viia oma kasutajaliidese disaini järgmisele tasemele ja pakkuda kasutajatele kaasahaaravamat ja ligipääsetavamat sirvimiskogemust. Kuigi brauserite tugi areneb endiselt, aitab selle API mõistmine ja katsetamine teil luua tipptasemel veebikogemusi, kui selle kasutuselevõtt kasvab. Ärge unustage seada esikohale ligipääsetavust ja pakkuda varulahendusi vanematele brauseritele, et tagada positiivne kogemus kõigile kasutajatele.

Ressursid

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM-i kontrastsuse kontrollija