CSS Custom Highlight Kaskade: Prioritetsstyring for tekstmarkering

Standardmarkeringen for tekstvalg i nettlesere er ofte en enkel blå bakgrunn med hvit tekst. Selv om det er funksjonelt, passer det kanskje ikke med nettstedets merkevarebygging eller tilgjengelighetskrav. Heldigvis tilbyr CSS kraftige verktøy for å tilpasse tekstmarkeringer, slik at du kan skape en visuelt tiltalende og brukervennlig opplevelse. Dette innlegget dykker ned i CSS custom highlight-kaskaden, utforsker de ulike teknikkene som er tilgjengelige og hvordan man styrer deres prioritet for å oppnå ønsket effekt. Vi vil dekke standard pseudo-elementet ::selection, det mer avanserte pseudo-elementet ::highlight, og hvordan man definerer egendefinerte markeringer, med fokus på kaskade- og spesifisitetsreglene som styrer deres oppførsel.

Forstå det grunnleggende: ::selection pseudo-elementet

Pseudo-elementet ::selection er grunnlaget for styling av tekstmarkering i CSS. Det lar deg endre utseendet på markert tekst innenfor et element. Det er bredt støttet i moderne nettlesere og gir en enkel måte å tilpasse bakgrunnsfargen, tekstfargen og andre grunnleggende egenskaper for markert tekst.

Grunnleggende bruk av ::selection

For å bruke ::selection, retter du deg ganske enkelt mot det med en CSS-regel og definerer de ønskede stilene. For eksempel, for å endre bakgrunnsfargen til gul og tekstfargen til svart når tekst er markert, ville du brukt følgende CSS:

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

            

              
                Copy
              
            
          

Denne regelen vil gjelde for all tekstmarkering på hele nettstedet ditt. Hvis du vil rette deg mot spesifikke elementer, kan du bruke mer spesifikke selektorer:

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

            

              
                Copy
              
            
          

Denne regelen vil kun påvirke tekstmarkeringer innenfor <p> (avsnitt) elementer.

Begrensninger for ::selection

Selv om ::selection er et nyttig verktøy, har det begrensninger. Det lar deg primært endre grunnleggende egenskaper som background-color og color. Mer komplekse stilalternativer, som å bruke gradienter eller skygger, støttes ikke direkte. I tillegg gir ::selection ingen mekanisme for å lage flere, overlappende markeringer med forskjellige stiler. Det er her pseudo-elementet ::highlight kommer inn i bildet.

Introduksjon til ::highlight: Et kraftigere alternativ

Pseudo-elementet ::highlight er et nyere tillegg til CSS, og tilbyr større fleksibilitet og kontroll over tekstmarkeringer. Det lar deg definere navngitte markeringer, noe som gjør at du kan bruke forskjellige stiler på forskjellige deler av den markerte teksten. Dette er spesielt nyttig for komplekse layouter eller når du trenger å skille mellom ulike typer innhold innenfor en markering.

Definere navngitte markeringer med highlight-name egenskapen

Nøkkelen til å bruke ::highlight er highlight-name-egenskapen. Denne egenskapen lar deg tildele et navn til en spesifikk markering, som du deretter kan rette deg mot med CSS-regler. For å bruke ::highlight, må du først definere den navngitte markeringen ved hjelp av JavaScript. Dette er fordi CSS i seg selv ikke kan definere et nytt markeringsnavn; det kan bare *style* de markeringene som nettleseren allerede har opprettet. Her er et eksempel:

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

            

              
                Copy
              
            
          

Denne JavaScript-koden registrerer en egendefinert CSS-egenskap kalt --my-custom-highlight som aksepterer fargeverdier og ikke arves. Dette er et nødvendig skritt før du styler markeringen din. Nå kan du bruke CSS til å anvende markeringen:

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

            

              
                Copy
              
            
          

Denne CSS-regelen retter seg mot markeringen kalt "my-custom-highlight" og bruker en rød bakgrunn med 30 % opasitet og hvit tekst. Legg merke til bruken av rgba for å oppnå gjennomsiktigheten. Du må opprette navnet (som `my-custom-highlight`) og deretter referere til det i CSS via `::highlight(my-custom-highlight)`.

Anvende markeringer med JavaScript

For å faktisk anvende markeringen på nettsiden vår, vil vi bruke JavaScript. Dette gjøres vanligvis ved å pakke den delen av teksten som trenger markering inn i en <span>-tag og tildele highlight-name-stilen:

            <p>This is some <span style="--highlight: my-custom-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

I dette eksempelet vil ordet "important" bli markert med stilene definert for "my-custom-highlight". Et annet eksempel kan være:

            <p>This is <span style="--highlight: warning-highlight;">a warning message</span> that needs attention.</p>

            

              
                Copy
              
            
          

Hvor 'warning-highlight' tilsvarer navnet du registrerte med CSS.registerProperty og brukte inne i CSS-blokken ::highlight(warning-highlight).

Fordeler med ::highlight

• Flere markeringer: Du kan definere flere navngitte markeringer og anvende dem på forskjellige deler av teksten.
• Finkornet kontroll: Du kan rette deg mot spesifikke deler av teksten med forskjellige markeringsstiler.
• Semantisk markering: Du kan bruke markeringer for å formidle mening, som for eksempel å fremheve feil eller advarsler.

Forstå CSS Highlight Kaskaden: Prioritet og spesifisitet

Når flere markeringsstiler gjelder for samme tekst, bestemmer CSS-kaskaden hvilken stil som har forrang. Kaskaden er et sett med regler som nettlesere bruker for å løse konflikter mellom forskjellige CSS-regler. Å forstå kaskaden er avgjørende for å håndtere egendefinerte markeringsstiler og sikre at de ønskede stilene blir brukt korrekt.

Prioriteringsrekkefølge

CSS-kaskaden følger en spesifikk prioriteringsrekkefølge, som kan oppsummeres som følger (fra lavest til høyest prioritet):

1. Nettleserens standardstiler: Nettleserens standardstiler.
2. Brukerstiler: Stiler definert av brukeren (f.eks. gjennom nettleserutvidelser).
3. Utviklerstiler: Stiler definert av nettstedutvikleren (din CSS).
4. !important utviklerstiler: Stiler definert av nettstedutvikleren med !important-nøkkelordet.
5. !important brukerstiler: Stiler definert av brukeren med !important-nøkkelordet.

Innenfor hvert av disse nivåene spiller spesifisitet en avgjørende rolle. Spesifisitet refererer til vekten eller viktigheten av en CSS-selektor. Mer spesifikke selektorer overstyrer mindre spesifikke selektorer.

Spesifisitetsregler

Spesifisitet beregnes basert på følgende regler:

1. Innebygde stiler: Stiler definert direkte i HTML-elementet ved hjelp av style-attributtet har høyest spesifisitet.
2. ID-er: Selektorer som retter seg mot elementer etter deres ID (f.eks. #my-element) har høy spesifisitet.
3. Klasser, pseudo-klasser og attributter: Selektorer som retter seg mot elementer etter deres klasse (f.eks. .my-class), pseudo-klasser (f.eks. :hover), eller attributter (f.eks. [type="text"]) har middels spesifisitet.
4. Elementer og pseudo-elementer: Selektorer som retter seg mot elementer etter deres tag-navn (f.eks. p) eller pseudo-elementer (f.eks. ::selection, ::highlight) har lav spesifisitet.
5. Universalvelger: Universalvelgeren (*) har den laveste spesifisiteten.

Når flere selektorer gjelder for samme element, beregner nettleseren spesifisiteten til hver selektor og bruker stilen fra selektoren med høyest spesifisitet. Hvis to selektorer har samme spesifisitet, brukes stilen fra selektoren som vises senere i CSS-stilarket.

Anvende spesifisitet på markeringsstiler

Når du jobber med egendefinerte markeringsstiler, er spesifisitet spesielt viktig fordi du kanskje bruker både ::selection og ::highlight, potensielt sammen med innebygde stiler. Her er hvordan spesifisitetshensyn kan gjelde:

1. ::selection vs. ::highlight: ::highlight anses generelt for å være *mer* spesifikk enn ::selection. Dette betyr at hvis både ::selection og ::highlight-regler gjelder for samme tekst, vil ::highlight-reglene vanligvis ha forrang.
2. Innebygde stiler: Som alltid vil innebygde stiler (ved bruk av style-attributtet direkte på HTML-elementet) overstyre både ::selection og ::highlight-stiler, med mindre !important brukes.
3. Selektorspesifisitet: Spesifisiteten til selektorene som brukes med ::highlight kan ytterligere påvirke utfallet. For eksempel er p::highlight(my-highlight) mer spesifikk enn bare ::highlight(my-highlight) og vil ha forrang hvis begge gjelder.

Eksempler på spesifisitet i praksis

La oss illustrere dette med noen eksempler:

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

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

            

              
                Copy
              
            
          

            <p>This is some <span style="--highlight: my-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

I dette tilfellet, når brukeren markerer teksten, vil delen merket som "my-highlight" ha en rød bakgrunn og gul tekst, fordi ::highlight(my-highlight)-regelen er mer spesifikk og overstyrer den generelle ::selection-regelen for akkurat den span-en.

Vurder et annet eksempel:

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

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

            

              
                Copy
              
            
          

            <p>This is some text.</p>

            

              
                Copy
              
            
          

Her, hvis brukeren markerer tekst inne i <p>-taggen, vil den ha en grønn bakgrunn og svart tekst. p::selection-selektoren er mer spesifikk enn den globale ::selection-selektoren.

Strategier for å håndtere markeringskaskaden

For å effektivt håndtere markeringskaskaden og sikre at dine egendefinerte markeringsstiler blir brukt som tiltenkt, bør du vurdere følgende strategier:

1. Bruk spesifikke selektorer

Bruk spesifikke selektorer for å rette deg mot elementene du vil style. For eksempel, i stedet for å bruke en global ::selection-regel, rett deg mot spesifikke elementer eller seksjoner av nettstedet ditt ved hjelp av mer spesifikke selektorer som .my-section::selection eller #my-element::selection.

2. Utnytt highlight-name-egenskapen

Når det er mulig, bruk highlight-name-egenskapen med ::highlight for å definere navngitte markeringer. Dette lar deg rette deg mot spesifikke deler av teksten og bruke forskjellige stiler basert på deres semantiske betydning eller kontekst.

3. Unngå !important (generelt)

Selv om !important-nøkkelordet kan være fristende å bruke, bør det unngås når det er mulig. Bruk av !important kan gjøre CSS-en din vanskeligere å vedlikeholde og kan føre til uventede konflikter. Fokuser i stedet på å bruke spesifisitet for å kontrollere kaskaden.

4. Organiser CSS-en din

Organiser CSS-en din på en logisk og konsekvent måte. Bruk kommentarer for å dokumentere koden din og gruppere relaterte stiler sammen. Dette vil gjøre det enklere å forstå og vedlikeholde CSS-en din.

5. Test grundig

Test dine egendefinerte markeringsstiler grundig på tvers av forskjellige nettlesere og enheter. Ulike nettlesere kan ha litt forskjellige implementeringer av CSS-kaskaden, så det er viktig å sikre at stilene dine blir brukt konsekvent på alle plattformer.

6. Vurder tilgjengelighet

Vurder alltid tilgjengelighet når du designer egendefinerte markeringsstiler. Sørg for at fargene du velger gir tilstrekkelig kontrast mellom teksten og bakgrunnen. Unngå også å bruke stiler som kan være distraherende eller forvirrende for brukere med kognitive funksjonsnedsettelser.

Tilgjengelighetshensyn

Å tilpasse tekstmarkeringer kan forbedre brukeropplevelsen betydelig, men det er avgjørende å prioritere tilgjengelighet. Dårlig utformede markeringer kan gjøre det vanskelig for brukere med synshemninger eller kognitive funksjonsnedsettelser å lese og forstå innholdet.

Fargekontrast

Sørg for at fargekontrasten mellom teksten og bakgrunnen er tilstrekkelig. Retningslinjene for tilgjengelig webinnhold (WCAG) anbefaler et kontrastforhold på minst 4.5:1 for normal tekst og 3:1 for stor tekst. Bruk nettbaserte verktøy for å sjekke kontrastforholdet til markeringsfargene dine.

Unngå blinking eller blinking

Unngå å bruke blinkende eller blinkende effekter i markeringsstilene dine. Disse effektene kan være distraherende og kan utløse anfall hos brukere med fotosensitiv epilepsi.

Gi klare visuelle hint

Sørg for at markeringsstilene gir klare visuelle hint for å indikere at teksten er markert. Unngå å bruke stiler som kan være tvetydige eller forvirrende. For eksempel, unngå å bruke bakgrunnsfarger som er for like standard bakgrunnsfarge.

Test med hjelpemiddelteknologi

Test dine egendefinerte markeringsstiler med hjelpemiddelteknologier, som skjermlesere. Sørg for at den markerte teksten blir korrekt kunngjort av skjermleseren og at markeringsstilene ikke forstyrrer brukerens evne til å navigere og forstå innholdet.

Hensyn til internasjonalisering og lokalisering

Når man utvikler nettsteder for et globalt publikum, er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n). Dette inkluderer å tilpasse nettstedets innhold og design til forskjellige språk, kulturer og regioner.

Tekstretning

Vær oppmerksom på forskjellige tekstretninger. Noen språk, som arabisk og hebraisk, skrives fra høyre til venstre (RTL). Sørg for at dine egendefinerte markeringsstiler fungerer korrekt med både venstre-til-høyre (LTR) og høyre-til-venstre (RTL) tekstretninger. Logiske CSS-egenskaper (f.eks. margin-inline-start, border-inline-end) kan være nyttige her.

Kulturelle forskjeller

Vær oppmerksom på kulturelle forskjeller når du velger markeringsfarger. Farger kan ha forskjellige betydninger i forskjellige kulturer. For eksempel kan fargen rød symbolisere lykke i én kultur og fare i en annen. Undersøk den kulturelle betydningen av farger i målmarkedene for nettstedet ditt.

Skriftstøtte

Sørg for at de valgte skriftene dine støtter tegnene og glyfene som brukes i forskjellige språk. Bruk Unicode-skrifter som støtter et bredt spekter av tegn. Vurder også å bruke reserve-skriftstrategier for å sikre at nettstedets tekst vises korrekt selv om brukerens enhet ikke har de nødvendige skriftene installert.

Praktiske eksempler og bruksområder

La oss utforske noen praktiske eksempler og bruksområder for CSS custom highlight-kaskaden:

1. Semantisk markering for kode

Du kan bruke egendefinerte markeringer for å fremheve forskjellige typer kodeelementer, som nøkkelord, variabler og kommentarer. Dette kan gjøre det lettere for brukere å lese og forstå kodesnutter.

            /* 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;">// Dette er en kommentar</span>
    console.log("Hello, " + <span style="--highlight: variable;">name</span> + "!");
  }
</code></pre>

            

              
                Copy
              
            
          

2. Markering av søkeord

Du kan bruke egendefinerte markeringer for å fremheve søkeord i søkeresultatene. Dette kan hjelpe brukere med å raskt identifisere de delene av teksten som er relevante for deres søk.

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

            

              
                Copy
              
            
          

            <p>This is a <span style="--highlight: search-term;">search</span> result that contains the <span style="--highlight: search-term;">search</span> term.</p>

            

              
                Copy
              
            
          

3. Indikere obligatoriske felt i skjemaer

Du kan bruke egendefinerte markeringer for å indikere obligatoriske felt i skjemaer. Dette kan hjelpe brukere med å raskt identifisere feltene de må fylle ut før de sender inn skjemaet.

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

            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

Konklusjon

CSS custom highlight-kaskaden gir kraftige verktøy for å tilpasse tekstmarkeringer og skape en visuelt tiltalende og brukervennlig opplevelse. Ved å forstå CSS-kaskaden, spesifisitetsregler og mulighetene til ::selection og ::highlight, kan du effektivt håndtere markeringsstiler og sikre at de blir brukt som tiltenkt. Husk å vurdere tilgjengelighet og internasjonalisering når du designer egendefinerte markeringsstiler for å skape et nettsted som er inkluderende og tilgjengelig for et globalt publikum. Ved å nøye planlegge bruken av `::selection` og `::highlight` sammen med semantisk HTML og egendefinerte CSS-egenskaper, kan du oppnå nøyaktig den markeringseffekten du ønsker, og forbedre både brukervennligheten og det visuelle uttrykket på nettsidene dine. Fleksibiliteten som tilbys av disse CSS-funksjonene lar deg skape en skreddersydd og intuitiv opplevelse for brukerne, noe som gjør innholdet ditt mer engasjerende og tilgjengelig.