Avastage täiustatud tekstivaliku stiilimine CSS-i kohandatud esiletõstmise vahemikuga. Õppige esiletõstmise värve, taustu ja muud parema kasutajakogemuse jaoks kohandama.
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;
}
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 tagastabSelectionobjekti, mis esindab kasutaja poolt valitud tekstivahemikku.RangeAPI: 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
}
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
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);
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);
}
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);
}
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.
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);
}
}
});
CSS:
::highlight(custom-selection) {
background-color: lightgreen;
color: darkgreen;
font-style: italic;
}
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;
}
Ää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;
}
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;
}
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.