CSS-i kohandatud esiletõstmise vahemik: Täiustatud tekstivaliku stiilimine

Teksti valimine on veebis üks põhilisi interaktsioone. Kui kasutaja valib veebilehel teksti, rakendab brauser vaikimisi esiletõstmise stiili, tavaliselt sinise tausta ja valge teksti. Kuigi see on funktsionaalne, võib see vaikimisi stiil sageli veebisaidi disaini esteetikaga vastuollu minna. CSS-i kohandatud esiletõstmise vahemik pakub võimsa viisi nende vaikestiilide ülekirjutamiseks ja visuaalselt ühtsema ning kaasahaaravama kasutajakogemuse loomiseks.

Tekstivaliku põhitõdede mõistmine

Enne kohandatud esiletõstmise vahemikesse süvenemist on oluline mõista, kuidas tekstivalik brauserites toimib. Kui kasutaja lohistab hiirt (või kasutab teisi sisestusmeetodeid) teksti valimiseks, tuvastab brauser valitud tekstivahemiku ja rakendab vaikimisi esiletõstmise stiili. Seda haldab brauseri sisemine renderdusmootor ja see ei ole vaikimisi CSS-iga otse kontrollitav.

Vaikimisi valiku stiilimine

Vaikimisi tekstivaliku stiili haldab brauseri kasutajaagendi stiilileht. See stiilileht pakub põhilist stiili kõigile HTML-elementidele ja sisaldab vaikimisi esiletõstmise stiili. Kasutatavad konkreetsed värvid ja stiilid võivad brauserite ja operatsioonisüsteemide vahel veidi erineda.

::selection pseudo-elemendi tutvustus

CSS pakub ::selection pseudo-elementi valitud teksti sihtimiseks. See võimaldab teil muuta valitud teksti background-color ja color omadusi. Sellel lähenemisel on siiski piirangud. See võimaldab teil muuta ainult tausta ja teksti värvi ning ei paku peenemat kontrolli esiletõstmise vahemiku üle.

            
::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

See lihtne CSS-koodilõik muudab valitud teksti taustavärvi kollaseks ja tekstivärvi mustaks. Kuigi see on kasulik, on see alles jäämäe tipp.

CSS-i kohandatud esiletõstmise vahemiku API

CSS-i kohandatud esiletõstmise vahemiku API pakub täiustatud ja paindlikumat viisi tekstivalikute stiilimiseks. See API võimaldab teil määratleda spetsiifilisi esiletõstmise vahemikke ja rakendada neile kohandatud stiile. See on eriti kasulik visuaalselt atraktiivsemate ja kasutajasõbralikumate liideste loomiseks.

Põhimõisted

• Esiletõstmise API: Aluseks olev tehnoloogia, mis võimaldab kohandatud stiilimist.
• Esiletõstmise piirkonnad: Spetsiifilised tekstivahemikud, mida sihitakse kohandatud stiilimiseks.
• Kohandatud stiilid: CSS-i omadused (lisaks värvile ja taustavärvile), mida rakendatakse esiletõstmise piirkondadele.

CSS-i kohandatud esiletõstmise vahemiku kasutamise eelised

• Täiustatud kohandamine: Rakendage laiemat valikut CSS-i omadusi, sealhulgas gradiente, ääriseid, varje ja muud.
• Parem kasutajakogemus: Looge visuaalselt atraktiivsemaid ja ühtsemaid tekstivaliku stiile, mis sobivad teie veebisaidi disainiga.
• Ligipääsetavus: Tagage, et teie kohandatud esiletõstmise stiilid on nägemispuudega kasutajatele ligipääsetavad, pakkudes piisavat kontrasti ja selgeid visuaalseid vihjeid.
• Peeneteraline kontroll: Sihtige spetsiifilisi tekstivahemikke kohandatud stiilimiseks, võimaldades täpsemat ja kontekstiteadlikumat esiletõstmist.

CSS-i kohandatud esiletõstmise vahemiku rakendamine

CSS-i kohandatud esiletõstmise vahemiku rakendamine hõlmab JavaScripti kasutamist, et tuvastada tekstivahemikud, mida soovite stiilida, ja seejärel rakendada neile vahemikele soovitud CSS-i omadused.

1. samm: Tekstivahemiku valimine

Esimene samm on tuvastada tekstivahemik, mida soovite stiilida. Seda saab teha erinevate JavaScripti tehnikate abil, näiteks:

• document.getSelection(): See meetod tagastab Selection objekti, mis esindab kasutaja poolt valitud tekstivahemikku.
• Range API: See API võimaldab teil programmilselt luua ja manipuleerida tekstivahemikega.

Näide document.getSelection() kasutamisega:

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Nüüd on teil vahemiku objekt, millega töötada
}

            

              
                Copy
              
            
          

Näide Range API kasutamisega:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Nüüd on teil vahemik, mis valib kogu sisu elemendi sees

            

              
                Copy
              
            
          

2. samm: Esiletõstmise objekti loomine

Kui teil on Range objekt, peate looma esiletõstmise objekti. See objekt esindab kohandatud esiletõstmist ja seda kasutatakse soovitud stiilide rakendamiseks.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

3. samm: Esiletõstmise registreerimine

Esiletõstmise nähtavaks tegemiseks peate selle registreerima CSS.highlights objektiga. See on globaalne objekt, mis haldab kõiki lehel olevaid kohandatud esiletõstmisi.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API ei ole selles brauseris toetatud.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

Siin on 'my-custom-highlight' suvaline nimi, mille valite oma esiletõstmise tuvastamiseks.

4. samm: Kohandatud stiilide rakendamine CSS-iga

Lõpuks saate oma CSS-is rakendada esiletõstmisele kohandatud stiile, kasutades ::highlight() pseudo-elementi.

            
::highlight(my-custom-highlight) {
  background-color: rgba(255, 200, 0, 0.5);
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

See CSS-koodilõik rakendab poolläbipaistva kollase tausta, tumehalli teksti, paksu fondi kaalu ja peene teksti varju tekstile, mis asub 'my-custom-highlight' vahemikus.

Täielik näide

Siin on täielik näide, mis demonstreerib, kuidas kasutada CSS-i kohandatud esiletõstmise vahemikku:

HTML:

            
See on tekst, mida saab valida. Me kohandame esiletõstmise stiili, kasutades CSS-i kohandatud esiletõstmise vahemikku.

            

              
                Copy
              
            
          

JavaScript:

            
const textElement = document.getElementById('myText');

textElement.addEventListener('mouseup', () => {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const highlight = new Highlight(range);

    if (!window.CSS.highlights) {
      console.error('CSS Custom Highlight API ei ole selles brauseris toetatud.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

            
::highlight(custom-selection) {
  background-color: lightgreen;
  color: darkgreen;
  font-style: italic;
}

            

              
                Copy
              
            
          

Selles näites, kui kasutaja vabastab hiirenupu pärast teksti valimist lõigus, loob JavaScripti kood esiletõstmise ja registreerib selle. Seejärel rakendab CSS valitud tekstile helerohelise tausta, tumerohelise tekstivärvi ja kursiivse fondi stiili.

Täiustatud kohandamistehnikad

CSS-i kohandatud esiletõstmise vahemik võimaldab veelgi täiustatud kohandamistehnikaid, sealhulgas:

Gradientide kasutamine

Saate kasutada CSS-gradiente, et luua visuaalselt vapustavaid esiletõstmise efekte.

            
::highlight(gradient-highlight) {
  background-image: linear-gradient(to right, #f00, #ff0);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

Äärjoonte ja varjude lisamine

Saate lisada esiletõstmisele ääriseid ja varje, et see veelgi rohkem silma paistaks.

            
::highlight(border-highlight) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 2px solid blue;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: black;
}

            

              
                Copy
              
            
          

Tingimuslik esiletõstmine

Saate kasutada JavaScripti, et dünaamiliselt muuta esiletõstmise stiile teatud tingimuste alusel. Näiteks võiksite esile tõsta erinevat tüüpi teksti erinevate värvidega.

            
// Näide: Märksõnade esiletõstmine teise värviga
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Siia tuleks implementatsioon märksõnade leidmiseks ja vahemike loomiseks)

// Seejärel, CSS-is:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

Ligipääsetavuse kaalutlused

Kohandatud esiletõstmise stiilide rakendamisel on ülioluline arvestada ligipääsetavusega. Tagage, et teie esiletõstmise stiilid pakuvad piisavat kontrasti ja selgeid visuaalseid vihjeid nägemispuudega kasutajatele.

Kontrastsussuhe

Veenduge, et teie esiletõstmise stiilide taustavärvi ja tekstivärvi kontrastsussuhe vastab WCAG (Web Content Accessibility Guidelines) nõuetele. Normaalteksti puhul on soovitatav kontrastsussuhe vähemalt 4.5:1 ja suure teksti puhul 3:1.

Visuaalsed vihjed

Pakkuge selgeid visuaalseid vihjeid, et näidata, et tekst on valitud. Seda saab teha eristuvate värvide, äärjoonte või varjude abil.

Testimine abitehnoloogiatega

Testige oma kohandatud esiletõstmise stiile abitehnoloogiatega, näiteks ekraanilugejatega, et tagada nende ligipääsetavus kõigile kasutajatele.

Brauseri ühilduvus

CSS-i kohandatud esiletõstmise vahemiku API on suhteliselt uus tehnoloogia ja brauserite tugi võib varieeruda. 2023. aasta lõpu seisuga on see toetatud Chromiumi-põhistes brauserites (Chrome, Edge, Brave) ja Safaris (Technology Preview). Firefox on väljendanud huvi, kuid tuge pole veel rakendatud.

Enne selle API tootmises kasutamist on oluline kontrollida uusimat brauseri ühilduvuse teavet. Saate kasutada veebisaite nagu "Can I use...", et jälgida CSS-i kohandatud esiletõstmise vahemiku brauserituge.

Brauseritele, mis ei toeta seda API-t, saate varuvariandina kasutada ::selection pseudo-elementi.

Kasutusjuhud ja näited

Siin on mõned praktilised kasutusjuhud ja näited, kuidas CSS-i kohandatud esiletõstmise vahemikku saab kasutada:

Koodiredaktorid

Kohandage koodiredaktoris valitud koodi esiletõstmise stiile, et parandada loetavust ja visuaalset atraktiivsust. Erinevatel programmeerimiskeeltel võiksid isegi olla erinevad esiletõstmise skeemid.

Dokumendivaaturid

Parandage dokumendivaaturite kasutajakogemust, pakkudes kohandatud esiletõstmise stiile, mis sobivad dokumendi disainiga.

E-õppe platvormid

Looge interaktiivseid õpikogemusi, tõstes esile põhimõisteid või olulist teavet kohandatud stiilis.

Otsingutulemuste esiletõstmine

Parandage otsingutulemuste nähtavust, tõstes vastavad terminid esile selge kohandatud stiiliga. Mõelge, kuidas see võiks välja näha mitmekeelses otsingus, kus esiletõstmise värvid võiksid peenelt viidata vaste keelele.

Märkuste tegemise tööriistad

Võimaldage kasutajatel märkida teksti kohandatud esiletõstmise stiilidega, et tähistada olulisi lõike või lisada märkmeid. Erinevatele kasutajatele võiks koostöös märkmete tegemiseks määrata erinevad esiletõstmise värvid.

Parimad tavad

• Kasutage semantilisi HTML-elemente: Kasutage oma sisu struktureerimiseks semantilisi HTML-elemente. See muudab stiilitavate tekstivahemike tuvastamise lihtsamaks.
• Hoidke see lihtsana: Vältige liiga keerukate või häirivate esiletõstmise stiilide kasutamist. Eesmärk on parandada kasutajakogemust, mitte kasutajat üle koormata.
• Testige põhjalikult: Testige oma kohandatud esiletõstmise stiile erinevates brauserites ja seadmetes, et tagada nende ootuspärane toimimine.
• Arvestage jõudlusega: Vältige liiga paljude esiletõstmise vahemike loomist, kuna see võib jõudlust mõjutada. Optimeerige oma JavaScripti koodi, et tekstivahemikke tõhusalt tuvastada ja stiilida.

Kokkuvõte

CSS-i kohandatud esiletõstmise vahemik pakub võimast ja paindlikku viisi tekstivalikute stiilimiseks veebis. Selle API abil saate luua visuaalselt atraktiivsemaid ja kasutajasõbralikumaid liideseid, mis parandavad kasutajakogemust ja sobivad teie veebisaidi disainiga. Kuigi brauserite tugi on alles arenemas, muudavad selle tehnoloogia potentsiaalsed eelised selle väärtuslikuks tööriistaks veebiarendajatele ja -disaineritele. Pidage meeles, et kohandatud esiletõstmise stiilide rakendamisel tuleb esikohale seada ligipääsetavus ja jõudlus. Veebi arenedes mängivad sellised funktsioonid nagu CSS-i kohandatud esiletõstmise vahemik kasutajakogemuse kujundamisel üha olulisemat rolli.