17. august 2025Eesti

Õppige, kuidas CSS-i abil kohandada teksti valiku esiletõstu värvi ja välimust, parandades kasutajakogemust ja brändi ühtsust erinevates brauserites.

CSS-i kohandatud esiletõst: Teksti valiku stiilide meisterlik valdamine

Teksti valimine, see lihtne tegevus, kus kursorit üle veebilehe sõnade lohistatakse, jääb disaini ja brändingu puhul sageli tähelepanuta. Ometi võib brauseri vaikimisi esiletõstuvärvi kohandamine oluliselt parandada kasutajakogemust ja tugevdada teie brändi identiteeti. See põhjalik juhend selgitab kõike, mida peate teadma CSS-i kohandatud esiletõstust, käsitledes ::selection pseudoelementi, brauserite ühilduvust, ligipääsetavuse kaalutlusi ja praktilisi näiteid oma veebisaidi disaini täiustamiseks.

Miks kohandada teksti valiku esiletõste?

Kuigi brauseri vaikimisi esiletõstuvärv (tavaliselt sinine) on funktsionaalne, ei pruugi see sobida teie veebisaidi värviskeemi või brändi esteetikaga. Esiletõstuvärvi kohandamine pakub mitmeid eeliseid:

Brändi ühtsus: Veenduge, et valiku esiletõst täiendab teie brändi värve, luues sidusa visuaalse kogemuse.
Parem kasutajakogemus: Hästi valitud esiletõstuvärv võib parandada loetavust ja vähendada silmade koormust, eriti nägemispuudega kasutajate jaoks.
Täiustatud visuaalne atraktiivsus: Kohandatud esiletõst võib lisada teie veebisaidi disainile peent elegantsi ja professionaalsust.
Suurenenud kaasatus: Kuigi pealtnäha väikesed, aitavad visuaalsed detailid kaasa kasutajate üldisele kaasatusele ja rahulolule.

`::selection` pseudoelement

::selection pseudoelement on võti teksti valiku esiletõstude kohandamiseks CSS-i abil. See võimaldab teil stiilida valitud teksti taustavärvi ja tekstivärvi. Pange tähele, et te ei saa selle pseudoelemendiga stiilida muid omadusi nagu fondi suurus, fondi kaal või teksti kaunistus.

Põhisüntaks

Põhisüntaks on lihtne:


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

Asendage color soovitud värviväärtustega (nt kuueteistkümnendsüsteemis, RGB, HSL või nimega värvidega).

Näide

Siin on lihtne näide, mis seab teksti valimisel taustavärviks helesinise ja tekstivärviks valge:


::selection {
  background-color: #ADD8E6; /* Helesinine */
  color: white;
}

Lisage see CSS-reegel oma stiililehele või <style> sildile, et rakendada kohandatud esiletõstu.

Brauserite ühilduvus: prefiksitega tegelemine

Kuigi ::selection on kaasaegsetes brauserites laialdaselt toetatud, võivad vanemad versioonid nõuda tootjaprefikseid. Maksimaalse ühilduvuse tagamiseks on hea tava lisada -moz-selection ja -webkit-selection prefiksid.

Uuendatud süntaks prefiksitega

Siin on uuendatud süntaks tootjaprefiksite lisamiseks:


::-moz-selection {
  background-color: #ADD8E6;
  color: white;
}

::selection {
  background-color: #ADD8E6;
  color: white;
}

::-webkit-selection {
  background-color: #ADD8E6;
  color: white;
}

See tagab, et teie kohandatud esiletõst töötab laiemas valikus brauserites, sealhulgas Firefoxi (-moz-selection) ja Safari/Chrome'i (-webkit-selection) vanemates versioonides.

Ligipääsetavuse kaalutlused

Teksti valiku esiletõstude kohandamisel on oluline seada esikohale ligipääsetavus. Halvad värvivalikud võivad nägemispuudega kasutajatel valitud teksti lugemise keeruliseks muuta. Siin on mõned olulised kaalutlused:

Kontrastsussuhe: Tagage piisav kontrastsus esiletõstu taustavärvi ja tekstivärvi vahel. WCAG (Web Content Accessibility Guidelines) soovitab kontrastsussuhteks vähemalt 4,5:1 tavalise teksti ja 3:1 suure teksti puhul.
Värvipimedus: Olge esiletõstuvärvide valimisel teadlik värvipimedusest. Vältige värvikombinatsioone, mida erinevat tüüpi värvinägemispuudega inimestel on raske eristada. Tööriistad nagu WebAIM-i värvikontrasti kontrollija (https://webaim.org/resources/contrastchecker/) aitavad teil värvikombinatsioone hinnata.
Kasutaja eelistused: Kaaluge kasutajatel esiletõstuvärvi kohandamise lubamist vastavalt nende individuaalsetele vajadustele ja eelistustele. Seda on võimalik saavutada kasutaja seadete või brauserilaiendite kaudu.

Näide: ligipääsetav värvikombinatsioon

Siin on näide ligipääsetavast värvikombinatsioonist, millel on kõrge kontrastsussuhe:


::selection {
  background-color: #2E8B57; /* Mereroheline */
  color: #FFFFFF; /* Valge */
}

See kombinatsioon pakub tugevat kontrasti, mis teeb valitud teksti lugemise kasutajatele lihtsamaks.

Täiustatud kohandamise tehnikad

Lisaks põhilistele värvimuutustele saate kasutada CSS-muutujaid ja muid tehnikaid, et luua keerukamaid ja dünaamilisemaid teksti valiku esiletõste.

CSS-muutujate kasutamine

CSS-muutujad (tuntud ka kui kohandatud omadused) võimaldavad teil määratleda korduvkasutatavaid väärtusi, mida on lihtne uuendada. See on eriti kasulik veebisaidi disaini ühtsuse säilitamiseks.

CSS-muutujate määratlemine

Määratlege oma CSS-muutujad :root pseudoklassis:


:root {
  --highlight-background: #FFD700; /* Kuldne */
  --highlight-text: #000000; /* Must */
}

CSS-muutujate kasutamine `::selection`-is

Kasutage var() funktsiooni, et viidata CSS-muutujatele oma ::selection reeglis:


::selection {
  background-color: var(--highlight-background);
  color: var(--highlight-text);
}

Nüüd saate esiletõstuvärvi hõlpsalt muuta, uuendades CSS-muutujaid :root pseudoklassis.

Dünaamilised esiletõstuvärvid konteksti põhjal

Saate luua dünaamilisi esiletõstuvärve vastavalt valitud teksti kontekstile. Näiteks võite soovida kasutada pealkirjade jaoks teistsugust esiletõstuvärvi kui põhiteksti jaoks. Seda on võimalik saavutada JavaScripti ja CSS-muutujate abil.

Näide: eristatud esiletõstud

Esmalt määratlege CSS-muutujad erinevate esiletõstuvärvide jaoks:


:root {
  --heading-highlight-background: #87CEEB; /* Taevasinine */
  --heading-highlight-text: #FFFFFF; /* Valge */
  --body-highlight-background: #FFFFE0; /* Helkollane */
  --body-highlight-text: #000000; /* Must */
}

Seejärel kasutage JavaScripti, et lisada klass valitud teksti vanem-elemendile:


// See on lihtsustatud näide ja nõuab täpsemat implementatsiooni,
// et erinevaid valiku stsenaariume täpselt käsitleda.

document.addEventListener('mouseup', function(event) {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const parentElement = range.commonAncestorContainer.parentNode;

    if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
      parentElement.classList.add('heading-selected');
    } else {
      parentElement.classList.remove('heading-selected');
    }
  }
});

Lõpuks määratlege CSS-reeglid erinevate klasside jaoks:


.heading-selected::selection {
  background-color: var(--heading-highlight-background);
  color: var(--heading-highlight-text);
}

::selection {
  background-color: var(--body-highlight-background);
  color: var(--body-highlight-text);
}

See näide demonstreerib, kuidas saate luua pealkirjadele ja põhitekstile erinevaid esiletõstuvärve vastavalt valitud kontekstile. Põhjalikum implementatsioon nõuaks erinevate valiku stsenaariumide ja erijuhtumite käsitlemist JavaScriptiga.

Praktilised näited ja kasutusjuhud

Siin on mõned praktilised näited ja kasutusjuhud, mis inspireerivad teid looma oma kohandatud esiletõstu disaine:

Minimalistlik disain: Kasutage esiletõstuks peent, vähem küllastunud värvi, et säilitada puhas ja kaasaegne välimus. Näiteks hele hall või beež.
Tume teema: Pöörake tumeda teema jaoks vaikevärvid ümber, kasutades esiletõstuks tumedat tausta ja heledat teksti. See parandab loetavust hämaras valguses.
Brändi tugevdamine: Kasutage oma brändi põhi- või teist värvi esiletõstuks, et tugevdada brändi tuntust.
Interaktiivsed õpetused: Kasutage interaktiivsetes õpetustes eredat, tähelepanu köitvat värvi esiletõstuks, et juhendada kasutajaid samm-sammult. Näiteks ergas kollane või oranž.
Koodi esiletõstmine: Kohandage koodilõikude esiletõstuvärvi, et parandada loetavust ja eristada erinevaid koodielemente.

Näide: koodi esiletõstmine kohandatud esiletõstuga

Koodi esiletõstmisel võib peen, kuid eristuv värv parandada loetavust:


pre ::selection {
  background-color: rgba(255, 255, 0, 0.2); /* Helkollane läbipaistvusega */
  color: #000000; /* Must */
}

See näide kasutab valitud koodi esiletõstmiseks poolläbipaistvat helekollast värvi, mis teeb selle eristamise lihtsaks ilma liigselt häirimata.

Levinud vead, mida vältida

Siin on mõned levinud vead, mida vältida teksti valiku esiletõstude kohandamisel:

Ligipääsetavuse eiramine: Piisava kontrasti tagamata jätmine tausta- ja tekstivärvide vahel.
Liiga eredad või häirivad värvid: Värvide kasutamine, mis on liiga eredad või häirivad, mis võib põhjustada silmade väsimust ja vähendada loetavust.
Ebaühtlane stiilimine: Erinevate esiletõstustiilide rakendamine veebisaidi eri osades, mis loob katkendliku kasutajakogemuse.
Tootjaprefiksite unustamine: Tootjaprefiksite lisamata jätmine vanemate brauserite jaoks.
Kohandatud esiletõstude liigne kasutamine: Kasutage kohandatud esiletõste ainult seal, kus see parandab kasutajakogemust. Nende liigne kasutamine võib muuta lehe segaseks või häirivaks.

Kokkuvõte

Teksti valiku esiletõstude kohandamine CSS-iga on lihtne, kuid tõhus viis kasutajakogemuse parandamiseks ja brändi identiteedi tugevdamiseks. Mõistes ::selection pseudoelementi, tegeledes brauserite ühilduvusega ja seades esikohale ligipääsetavuse, saate luua visuaalselt atraktiivseid ja kasutajasõbralikke veebisaite. Katsetage erinevate värvikombinatsioonide ja tehnikatega, et leida oma brändile sobivaim esiletõstustiil.

Ärge unustage oma kohandatud esiletõste alati testida erinevates brauserites ja seadmetes, et tagada ühtlased tulemused. Pöörates tähelepanu sellele sageli tähelepanuta jäetud detailile, saate oma veebisaidi disaini täiustada ja luua oma kasutajatele kaasahaaravama kogemuse.