CSS-i kohandatud esiletõstmise kaskaad: teksti valiku prioriteetide haldamine

Veebibrauserite vaikimisi teksti valiku esiletõst on sageli lihtne sinine taust valge tekstiga. Kuigi see on funktsionaalne, ei pruugi see vastata teie veebisaidi brändingule või ligipääsetavuse nõuetele. Õnneks pakub CSS võimsaid tööriistu teksti valiku esiletõstmise kohandamiseks, võimaldades teil luua visuaalselt meeldiva ja kasutajasõbraliku kogemuse. See postitus süveneb CSS-i kohandatud esiletõstmise kaskaadi, uurides erinevaid saadaolevaid tehnikaid ja seda, kuidas hallata nende prioriteeti soovitud efekti saavutamiseks. Käsitleme standardset ::selection pseudo-elementi, arenenumat ::highlight pseudo-elementi ja seda, kuidas määratleda kohandatud esiletõstmisi, keskendudes kaskaadi ja spetsiifilisuse reeglitele, mis nende käitumist reguleerivad.

Põhitõdede mõistmine: ::selection pseudo-element

::selection pseudo-element on CSS-is teksti valiku stiilimise alus. See võimaldab teil muuta elemendi sees valitud teksti välimust. See on laialdaselt toetatud kaasaegsetes brauserites ja pakub lihtsat viisi valitud teksti taustavärvi, tekstivärvi ja muude põhiomaduste kohandamiseks.

::selection põhikäsklus

::selection kasutamiseks tuleb see lihtsalt CSS-reegliga sihtida ja määratleda soovitud stiilid. Näiteks selleks, et muuta teksti valimisel taustavärv kollaseks ja tekstivärv mustaks, kasutaksite järgmist CSS-i:

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

            

              
                Copy
              
            
          

See reegel kehtib kõigile tekstivalikutele teie veebisaidil. Kui soovite sihtida konkreetseid elemente, saate kasutada spetsiifilisemaid selektoreid:

            p::selection {
  background-color: lightgreen;
  color: darkgreen;
}

            

              
                Copy
              
            
          

See reegel mõjutab ainult tekstivalikuid <p> (lõik) elementide sees.

::selection piirangud

Kuigi ::selection on kasulik tööriist, on sellel piirangud. See võimaldab peamiselt muuta põhiomadusi nagu background-color ja color. Keerukamaid stiilivalikuid, nagu gradientide või varjude rakendamine, ei toetata otse. Lisaks ei paku ::selection mehhanismi mitme, kattuva erinevate stiilidega esiletõstmise loomiseks. Siin tulebki mängu ::highlight pseudo-element.

Tutvustame ::highlight: võimsam alternatiiv

::highlight pseudo-element on uuem lisandus CSS-i, pakkudes suuremat paindlikkust ja kontrolli teksti valiku esiletõstmise üle. See võimaldab teil määratleda nimega esiletõstmisi, mis võimaldab rakendada valitud teksti erinevatele osadele erinevaid stiile. See on eriti kasulik keerukate paigutuste puhul või kui peate valiku sees eristama erinevat tüüpi sisu.

Nimega esiletõstmiste määratlemine atribuudiga highlight-name

::highlight kasutamise võti on atribuut highlight-name. See atribuut võimaldab teil määrata konkreetsele esiletõstmisele nime, mida saate seejärel CSS-reeglitega sihtida. ::highlight kasutamiseks peate esmalt määratlema nimega esiletõstmise JavaScripti abil. Seda seetõttu, et CSS ise ei saa uut esiletõstmise nime määratleda; see saab ainult *stiilida* esiletõstmisi, mille brauser on juba loonud. Siin on näide:

            // JavaScript:
CSS.registerProperty({
  name: '--my-custom-highlight',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent',
});

            

              
                Copy
              
            
          

See Javascripti kood registreerib CSS-i kohandatud omaduse nimega --my-custom-highlight, mis aktsepteerib värviväärtusi ja ei päri. See on vajalik samm enne esiletõstmise stiilimist. Nüüd saate esiletõstmise rakendamiseks kasutada CSS-i:

            ::highlight(my-custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: white;
}

            

              
                Copy
              
            
          

See CSS-reegel sihib esiletõstmist nimega "my-custom-highlight" ja rakendab punase tausta 30% läbipaistvusega ja valge teksti. Pange tähele rgba kasutamist läbipaistvuse saavutamiseks. Peate looma nime (nagu `my-custom-highlight`) ja seejärel viitama sellele CSS-is ::highlight(my-custom-highlight) kaudu.

Esiletõstmiste rakendamine JavaScripti abil

Nüüd, et esiletõstmist meie veebilehel tegelikult rakendada, kasutame Javascripti. Tavaliselt tehakse seda, mähkides esiletõstmist vajava tekstiosa <span> sildiga ja määrates stiili highlight-name:

            <p>See on mingi <span style="--highlight: my-custom-highlight;">oluline</span> tekst.</p>

            

              
                Copy
              
            
          

Selles näites tõstetakse sõna "oluline" esile stiilidega, mis on määratletud "my-custom-highlight" jaoks. Teine näide võiks olla:

            <p>See on <span style="--highlight: warning-highlight;">hoiatus</span>, mis vajab tähelepanu.</p>

            

              
                Copy
              
            
          

Kus 'warning-highlight' vastab nimele, mille registreerisite CSS.registerProperty abil ja kasutasite CSS-plokis ::highlight(warning-highlight).

::highlight eelised

• Mitu esiletõstmist: Saate määratleda mitu nimega esiletõstmist ja rakendada neid teksti erinevatele osadele.
• Peeneteraline kontroll: Saate sihtida konkreetseid tekstiosi erinevate esiletõstmise stiilidega.
• Semantiline esiletõstmine: Saate kasutada esiletõstmisi tähenduse edastamiseks, näiteks vigade või hoiatuste esiletõstmiseks.

CSS-i esiletõstmise kaskaadi mõistmine: prioriteet ja spetsiifilisus

Kui samale tekstile kehtivad mitmed esiletõstmise stiilid, määrab CSS-i kaskaad, milline stiil on ülimuslik. Kaskaad on reeglite kogum, mida brauserid kasutavad erinevate CSS-reeglite vaheliste konfliktide lahendamiseks. Kaskaadi mõistmine on ülioluline kohandatud esiletõstmise stiilide haldamiseks ja soovitud stiilide korrektse rakendamise tagamiseks.

Eelistuste järjekord

CSS-i kaskaad järgib konkreetset eelistuste järjekorda, mida saab kokku võtta järgmiselt (madalaimast kõrgeima prioriteedini):

1. Kasutajaagendi stiilid: Brauseri vaikestiilid.
2. Kasutaja stiilid: Kasutaja määratletud stiilid (nt brauserilaienduste kaudu).
3. Autori stiilid: Veebisaidi arendaja määratletud stiilid (teie CSS).
4. !important autori stiilid: Veebisaidi arendaja määratletud stiilid märksõnaga !important.
5. !important kasutaja stiilid: Kasutaja määratletud stiilid märksõnaga !important.

Igal neist tasemetest mängib spetsiifilisus olulist rolli. Spetsiifilisus viitab CSS-selektori kaalule või tähtsusele. Spetsiifilisemad selektorid alistavad vähem spetsiifilised selektorid.

Spetsiifilisuse reeglid

Spetsiifilisus arvutatakse järgmiste reeglite alusel:

1. Reasisesed stiilid: Stiilid, mis on määratletud otse HTML-elemendis style atribuuti kasutades, omavad kõrgeimat spetsiifilisust.
2. ID-d: Selektorid, mis sihivad elemente nende ID järgi (nt #my-element), omavad kõrget spetsiifilisust.
3. Klassid, pseudoklassid ja atribuudid: Selektorid, mis sihivad elemente nende klassi (nt .my-class), pseudoklasside (nt :hover) või atribuutide (nt [type="text"]) järgi, omavad keskmist spetsiifilisust.
4. Elemendid ja pseudo-elemendid: Selektorid, mis sihivad elemente nende sildinime (nt p) või pseudo-elementide (nt ::selection, ::highlight) järgi, omavad madalat spetsiifilisust.
5. Universaalne selektor: Universaalsel selektoril (*) on madalaim spetsiifilisus.

Kui samale elemendile kehtivad mitmed selektorid, arvutab brauser iga selektori spetsiifilisuse ja rakendab stiili selektorilt, millel on kõrgeim spetsiifilisus. Kui kahel selektoril on sama spetsiifilisus, rakendatakse stiil selektorilt, mis ilmub CSS-stiililehel hiljem.

Spetsiifilisuse rakendamine esiletõstmise stiilidele

Kohandatud esiletõstmise stiilidega töötamisel on spetsiifilisus eriti oluline, kuna võite kasutada nii ::selection kui ka ::highlight, potentsiaalselt koos reasiseste stiilidega. Siin on, kuidas spetsiifilisuse kaalutlused võivad kehtida:

1. ::selection vs. ::highlight: ::highlight peetakse üldiselt *spetsiifilisemaks* kui ::selection. See tähendab, et kui samale tekstile kehtivad nii ::selection kui ka ::highlight reeglid, on ::highlight reeglitel tavaliselt eelis.
2. Reasisesed stiilid: Nagu alati, alistavad reasisesed stiilid (kasutades style atribuuti otse HTML-elemendil) nii ::selection kui ka ::highlight stiilid, välja arvatud juhul, kui kasutatakse !important.
3. Selektori spetsiifilisus: ::highlight-ga kasutatavate selektorite spetsiifilisus võib tulemust veelgi mõjutada. Näiteks p::highlight(my-highlight) on spetsiifilisem kui lihtsalt ::highlight(my-highlight) ja on eelistatud, kui mõlemad kehtivad.

Spetsiifilisuse näited praktikas

Illustreerime seda mõne näitega:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

::highlight(my-highlight) {
  background-color: red;
  color: yellow;
}

            

              
                Copy
              
            
          

            <p>See on mingi <span style="--highlight: my-highlight;">oluline</span> tekst.</p>

            

              
                Copy
              
            
          

Sellisel juhul, kui kasutaja valib teksti, on "my-highlight"-ga märgitud osal punane taust ja kollane tekst, kuna ::highlight(my-highlight) reegel on spetsiifilisem ja alistab selle konkreetse span-elemendi jaoks üldise ::selection reegli.

Vaatleme teist näidet:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

p::selection {
  background-color: green;
  color: black;
}

            

              
                Copy
              
            
          

            <p>See on mingi tekst.</p>

            

              
                Copy
              
            
          

Siin, kui kasutaja valib teksti <p> sildi sees, on sellel roheline taust ja must tekst. p::selection selektor on spetsiifilisem kui globaalne ::selection selektor.

Strateegiad esiletõstmise kaskaadi haldamiseks

Selleks, et tõhusalt hallata esiletõstmise kaskaadi ja tagada, et teie kohandatud esiletõstmise stiilid rakendatakse ettenähtud viisil, kaaluge järgmisi strateegiaid:

1. Kasutage spetsiifilisi selektoreid

Kasutage spetsiifilisi selektoreid, et sihtida elemente, mida soovite stiilida. Näiteks globaalse ::selection reegli kasutamise asemel sihtige konkreetseid elemente või oma veebisaidi osi, kasutades spetsiifilisemaid selektoreid nagu .my-section::selection või #my-element::selection.

2. Kasutage highlight-name atribuuti

Võimaluse korral kasutage ::highlight-ga nimega esiletõstmiste määratlemiseks atribuuti highlight-name. See võimaldab teil sihtida konkreetseid tekstiosi ja rakendada erinevaid stiile vastavalt nende semantilisele tähendusele või kontekstile.

3. Vältige !important (üldiselt)

Kuigi !important märksõna kasutamine võib olla ahvatlev, tuleks seda võimaluse korral vältida. !important kasutamine võib muuta teie CSS-i hooldamise raskemaks ja põhjustada ootamatuid konflikte. Selle asemel keskenduge kaskaadi kontrollimiseks spetsiifilisuse kasutamisele.

4. Korraldage oma CSS

Korraldage oma CSS loogilisel ja järjepideval viisil. Kasutage kommentaare oma koodi dokumenteerimiseks ja seotud stiilide grupeerimiseks. See muudab teie CSS-i mõistmise ja hooldamise lihtsamaks.

5. Testige põhjalikult

Testige oma kohandatud esiletõstmise stiile põhjalikult erinevates brauserites ja seadmetes. Erinevatel brauseritel võivad olla veidi erinevad CSS-i kaskaadi implementatsioonid, seega on oluline tagada, et teie stiilid rakendatakse järjepidevalt kõigil platvormidel.

6. Kaaluge ligipääsetavust

Kohandatud esiletõstmise stiilide kujundamisel arvestage alati ligipääsetavusega. Veenduge, et teie valitud värvid pakuvad piisavat kontrasti teksti ja tausta vahel. Samuti vältige stiilide kasutamist, mis võivad olla kognitiivsete puuetega kasutajatele häirivad või segadust tekitavad.

Ligipääsetavuse kaalutlused

Teksti valiku esiletõstmise kohandamine võib oluliselt parandada kasutajakogemust, kuid on ülioluline seada esikohale ligipääsetavus. Halvasti kujundatud esiletõstmised võivad muuta sisu lugemise ja mõistmise raskeks nägemispuudega või kognitiivsete puuetega kasutajatele.

Värvikontrastsus

Veenduge, et teksti ja tausta vaheline värvikontrastsus on piisav. Veebisisu ligipääsetavuse suunised (WCAG) soovitavad tavalise teksti puhul kontrastsussuhet vähemalt 4.5:1 ja suure teksti puhul 3:1. Kasutage veebitööriistu oma esiletõstmise värvide kontrastsussuhte kontrollimiseks.

Vältige vilkumist või värelust

Vältige oma esiletõstmise stiilides vilkuvaid või värelevaid efekte. Need efektid võivad olla häirivad ja võivad valgustundliku epilepsiaga kasutajatel krampe esile kutsuda.

Pakkuge selgeid visuaalseid vihjeid

Veenduge, et esiletõstmise stiilid pakuvad selgeid visuaalseid vihjeid, et näidata, et tekst on valitud. Vältige stiilide kasutamist, mis võivad olla mitmetähenduslikud või segadust tekitavad. Näiteks vältige taustavärvide kasutamist, mis on liiga sarnased vaikimisi taustavärviga.

Testige abitehnoloogiatega

Testige oma kohandatud esiletõstmise stiile abitehnoloogiatega, näiteks ekraanilugejatega. Veenduge, et valitud tekst on ekraanilugeja poolt õigesti ette loetud ja et esiletõstmise stiilid ei sega kasutaja võimet sisu navigeerida ja mõista.

Rahvusvahelistamise ja lokaliseerimise kaalutlused

Globaalsele publikule veebisaitide arendamisel on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n). See hõlmab teie veebisaidi sisu ja kujunduse kohandamist erinevatele keeltele, kultuuridele ja piirkondadele.

Teksti suund

Olge teadlik erinevatest teksti suundadest. Mõned keeled, nagu araabia ja heebrea, kirjutatakse paremalt vasakule (RTL). Veenduge, et teie kohandatud esiletõstmise stiilid töötavad korrektselt nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) teksti suundadega. CSS-i loogilised omadused (nt `margin-inline-start`, `border-inline-end`) võivad siin abiks olla.

Kultuurilised erinevused

Esiletõstmise värvide valimisel olge tähelepanelik kultuuriliste erinevuste suhtes. Värvidel võib olla erinevates kultuurides erinev tähendus. Näiteks võib punane värv ühes kultuuris sümboliseerida õnne ja teises ohtu. Uurige värvide kultuurilist tähtsust oma veebisaidi sihtturgudel.

Fondi tugi

Veenduge, et teie valitud fondid toetavad erinevates keeltes kasutatavaid märke ja glüüfe. Kasutage Unicode'i fonte, mis toetavad laia valikut märke. Samuti kaaluge fondi varustrateegiate kasutamist, et tagada teie veebisaidi teksti korrektne kuvamine isegi siis, kui kasutaja seadmes pole vajalikke fonte installitud.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid ja kasutusjuhte CSS-i kohandatud esiletõstmise kaskaadi jaoks:

1. Koodi semantiline esiletõstmine

Saate kasutada kohandatud esiletõstmisi erinevat tüüpi koodielementide, näiteks märksõnade, muutujate ja kommentaaride esiletõstmiseks. See võib muuta koodilõikude lugemise ja mõistmise kasutajatele lihtsamaks.

            /* CSS */
::highlight(keyword) {
  color: #0077cc;
}

::highlight(variable) {
  color: #cc0077;
}

::highlight(comment) {
  color: #666666;
  font-style: italic;
}

            

              
                Copy
              
            
          

            <pre><code>
  <span style="--highlight: keyword;">function</span> <span style="--highlight: variable;">greet</span>(<span style="--highlight: variable;">name</span>) {
    <span style="--highlight: comment;">// See on kommentaar</span>
    console.log("Hello, " + <span style="--highlight: variable;">name</span> + "!");
  }
</code></pre>

            

              
                Copy
              
            
          

2. Otsinguterminite esiletõstmine

Saate kasutada kohandatud esiletõstmisi otsingutulemustes otsinguterminite esiletõstmiseks. See aitab kasutajatel kiiresti tuvastada teksti osi, mis on nende otsingupäringuga seotud.

            /* CSS */
::highlight(search-term) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

            <p>See on <span style="--highlight: search-term;">otsingu</span>tulemus, mis sisaldab <span style="--highlight: search-term;">otsingu</span>terminit.</p>

            

              
                Copy
              
            
          

3. Nõutavate väljade märkimine vormides

Saate kasutada kohandatud esiletõstmisi vormides nõutavate väljade märkimiseks. See aitab kasutajatel kiiresti tuvastada väljad, mida nad peavad enne vormi esitamist täitma.

            /* CSS */
::highlight(required) {
  background-color: #ffeeee;
  border: 1px solid red;
}

            

              
                Copy
              
            
          

            <label for="name">Nimi:</label>
<input type="text" id="name" <span style="--highlight: required;">required</span><br>

            

              
                Copy
              
            
          

Kokkuvõte

CSS-i kohandatud esiletõstmise kaskaad pakub võimsaid tööriistu teksti valiku esiletõstmise kohandamiseks ning visuaalselt meeldiva ja kasutajasõbraliku kogemuse loomiseks. Mõistes CSS-i kaskaadi, spetsiifilisuse reegleid ning ::selection ja ::highlight võimekust, saate tõhusalt hallata esiletõstmise stiile ja tagada, et need rakendatakse ettenähtud viisil. Ärge unustage kohandatud esiletõstmise stiilide kujundamisel arvestada ligipääsetavuse ja rahvusvahelistamisega, et luua veebisait, mis on kaasav ja kättesaadav globaalsele publikule. Hoolikalt planeerides ::selection ja ::highlight kasutamist koos semantilise HTML-i ja CSS-i kohandatud omadustega, saate saavutada täpselt soovitud esiletõstmise efekti, parandades nii oma veebilehtede kasutatavust kui ka visuaalset atraktiivsust. Nende CSS-i funktsioonide pakutav paindlikkus võimaldab teil luua kasutajatele kohandatud ja intuitiivse kogemuse, muutes teie sisu kaasahaaravamaks ja ligipääsetavamaks.