CSS Custom Highlight Range: Avansert styling for tekstmarkering

Tekstmarkering er en fundamental interaksjon på nettet. Når en bruker markerer tekst på en nettside, bruker nettleseren en standard markeringsstil, typisk en blå bakgrunn med hvit tekst. Selv om dette er funksjonelt, kan denne standard stilen ofte krasje med nettstedets designestetikk. CSS Custom Highlight Range gir en kraftig måte å overstyre disse standardstilene og skape en mer visuelt konsistent og engasjerende brukeropplevelse.

Forstå det grunnleggende om tekstmarkering

Før vi dykker ned i tilpassede markeringsområder, er det viktig å forstå hvordan tekstmarkering fungerer i nettlesere. Når en bruker drar musen (eller bruker andre inndatametoder) for å markere tekst, identifiserer nettleseren tekstområdet som er valgt og anvender standard markeringsstil. Dette håndteres av nettleserens interne gjengivelsesmotor og er som standard ikke direkte kontrollerbart med CSS.

Standard styling for markering

Standard styling for tekstmarkering styres av nettleserens "user agent stylesheet". Dette stilarket gir den grunnleggende stylingen for alle HTML-elementer og inkluderer standard markeringsstil. De spesifikke fargene og stilene som brukes kan variere noe mellom nettlesere og operativsystemer.

Introduksjon til ::selection-pseudo-elementet

CSS tilbyr ::selection-pseudo-elementet for å målrette mot markert tekst. Dette lar deg endre background-color- og color-egenskapene til den markerte teksten. Denne tilnærmingen har imidlertid begrensninger. Den lar deg bare endre bakgrunns- og tekstfarge og gir ikke mer finkornet kontroll over markeringsområdet.

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

            

              
                Copy
              
            
          

Dette enkle CSS-utdraget vil endre bakgrunnsfargen på den markerte teksten til gul og tekstfargen til svart. Selv om det er nyttig, er dette bare toppen av isfjellet.

CSS Custom Highlight Range API

CSS Custom Highlight Range API gir en mer avansert og fleksibel måte å style tekstmarkeringer på. Dette API-et lar deg definere spesifikke markeringsområder og anvende tilpassede stiler på dem. Dette er spesielt nyttig for å skape mer visuelt tiltalende og brukervennlige grensesnitt.

Nøkkelkonsepter

• Highlight API: Den underliggende teknologien som muliggjør den tilpassede stylingen.
• Highlight Regions: De spesifikke tekstområdene som målrettes for tilpasset styling.
• Custom Styles: CSS-egenskapene (utover bare farge og bakgrunnsfarge) som anvendes på markeringsområdene.

Fordeler med å bruke CSS Custom Highlight Range

• Forbedret tilpasning: Anvend et bredere spekter av CSS-egenskaper, inkludert gradienter, kanter, skygger og mer.
• Bedre brukeropplevelse: Skap mer visuelt tiltalende og konsistente stiler for tekstmarkering som samsvarer med nettstedets design.
• Tilgjengelighet: Sørg for at dine tilpassede markeringsstiler er tilgjengelige for brukere med synshemninger ved å gi tilstrekkelig kontrast og tydelige visuelle hint.
• Finkornet kontroll: Målrett spesifikke tekstområder for tilpasset styling, noe som gir mer presis og kontekstbevisst markering.

Implementering av CSS Custom Highlight Range

Implementering av CSS Custom Highlight Range innebærer bruk av JavaScript for å identifisere tekstområdene du vil style, og deretter anvende de ønskede CSS-egenskapene på disse områdene.

Steg 1: Velge tekstområdet

Det første steget er å identifisere tekstområdet du ønsker å style. Dette kan gjøres ved hjelp av ulike JavaScript-teknikker, for eksempel:

• document.getSelection(): Denne metoden returnerer et Selection-objekt som representerer tekstområdet valgt av brukeren.
• Range API: Dette API-et lar deg opprette og manipulere tekstområder programmatisk.

Eksempel med bruk av document.getSelection():

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Nå har du range-objektet å jobbe med
}

            

              
                Copy
              
            
          

Eksempel med bruk av Range API:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Nå har du et område som velger alt innholdet i elementet

            

              
                Copy
              
            
          

Steg 2: Opprette et Highlight-objekt

Når du har et Range-objekt, må du opprette et highlight-objekt. Dette objektet vil representere den tilpassede markeringen og vil bli brukt til å anvende de ønskede stilene.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

Steg 3: Registrere markeringen

For å gjøre markeringen synlig, må du registrere den med CSS.highlights-objektet. Dette er et globalt objekt som administrerer alle tilpassede markeringer på siden.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API støttes ikke i denne nettleseren.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

Her er 'my-custom-highlight' et vilkårlig navn du velger for å identifisere markeringen din.

Steg 4: Anvende tilpassede stiler med CSS

Til slutt kan du anvende tilpassede stiler på markeringen ved hjelp av ::highlight()-pseudo-elementet i din CSS.

            
::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
              
            
          

Dette CSS-utdraget vil anvende en halvtransparent gul bakgrunn, mørkegrå tekst, fet skriftvekt og en subtil tekstskygge på teksten innenfor 'my-custom-highlight'-området.

Komplett eksempel

Her er et komplett eksempel som demonstrerer hvordan du bruker CSS Custom Highlight Range:

HTML:

            
Dette er litt tekst som kan markeres. Vi vil tilpasse markeringsstilen ved hjelp av CSS Custom Highlight Range.

            

              
                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 støttes ikke i denne nettleseren.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

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

            

              
                Copy
              
            
          

I dette eksempelet, når brukeren slipper museknappen etter å ha markert tekst i avsnittet, oppretter JavaScript-koden en markering og registrerer den. CSS-en anvender deretter en lysegrønn bakgrunn, mørkegrønn tekstfarge og kursiv skriftstil på den markerte teksten.

Avanserte tilpasningsteknikker

CSS Custom Highlight Range muliggjør enda mer avanserte tilpasningsteknikker, inkludert:

Bruk av gradienter

Du kan bruke CSS-gradienter for å skape visuelt imponerende markeringseffekter.

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

            

              
                Copy
              
            
          

Legge til kanter og skygger

Du kan legge til kanter og skygger på markeringen for å få den til å skille seg enda mer ut.

            
::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
              
            
          

Betinget markering

Du kan bruke JavaScript til å dynamisk endre markeringsstilene basert på visse betingelser. For eksempel kan du markere ulike typer tekst med forskjellige farger.

            
// Eksempel: Markere nøkkelord med en annen farge
const keywords = ['nøkkelord1', 'nøkkelord2', 'nøkkelord3'];

// (Implementering for å finne nøkkelord og opprette områder ville kommet her)

// Deretter, i CSS:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

Hensyn til tilgjengelighet

Når du implementerer tilpassede markeringsstiler, er det avgjørende å ta hensyn til tilgjengelighet. Sørg for at markeringsstilene dine gir tilstrekkelig kontrast og tydelige visuelle hint for brukere med synshemninger.

Kontrastforhold

Sørg for at kontrastforholdet mellom bakgrunnsfargen og tekstfargen i markeringsstilene dine oppfyller WCAG-kravene (Web Content Accessibility Guidelines). Et kontrastforhold på minst 4.5:1 anbefales for normal tekst og 3:1 for stor tekst.

Visuelle hint

Gi tydelige visuelle hint for å indikere at tekst er blitt markert. Dette kan gjøres ved å bruke distinkte farger, kanter eller skygger.

Testing med hjelpemiddelteknologi

Test dine tilpassede markeringsstiler med hjelpemiddelteknologi, som skjermlesere, for å sikre at de er tilgjengelige for alle brukere.

Nettleserkompatibilitet

CSS Custom Highlight Range API er en relativt ny teknologi, og nettleserstøtten kan variere. Mot slutten av 2023 støttes den i Chromium-baserte nettlesere (Chrome, Edge, Brave) og Safari (Technology Preview). Firefox har uttrykt interesse, men støtte er ennå ikke implementert.

Det er viktig å sjekke den nyeste informasjonen om nettleserkompatibilitet før du bruker dette API-et i produksjon. Du kan bruke nettsteder som "Can I use..." for å spore nettleserstøtte for CSS Custom Highlight Range.

For nettlesere som ikke støtter API-et, kan du bruke ::selection-pseudo-elementet som en reserveløsning.

Bruksområder og eksempler

Her er noen praktiske bruksområder og eksempler på hvordan CSS Custom Highlight Range kan brukes:

Kodeeditorer

Tilpass markeringsstilene for valgt kode i en kodeeditor for å forbedre lesbarheten og det visuelle uttrykket. Ulike programmeringsspråk kan til og med ha forskjellige markeringsskjemaer.

Dokumentvisere

Forbedre brukeropplevelsen i dokumentvisere ved å tilby tilpassede markeringsstiler som matcher dokumentets design.

E-læringsplattformer

Skap interaktive læringsopplevelser ved å markere nøkkelbegreper eller viktig informasjon med en tilpasset stil.

Markering av søkeresultater

Forbedre synligheten av søkeresultater ved å markere de samsvarende termene med en distinkt tilpasset stil. Tenk på hvordan dette kan se ut i et flerspråklig søk, der markeringsfarger subtilt kan indikere språket til det matchede begrepet.

Annoteringsverktøy

La brukere annotere tekst med tilpassede markeringsstiler for å merke viktige passasjer eller legge til notater. Ulike brukere kan tildeles forskjellige markeringsfarger for samarbeidsannotering.

Beste praksis

• Bruk semantisk HTML: Bruk semantiske HTML-elementer for å strukturere innholdet ditt. Dette vil gjøre det lettere å identifisere tekstområdene du vil style.
• Hold det enkelt: Unngå å bruke altfor komplekse eller distraherende markeringsstiler. Målet er å forbedre brukeropplevelsen, ikke å overvelde brukeren.
• Test grundig: Test dine tilpassede markeringsstiler på forskjellige nettlesere og enheter for å sikre at de fungerer som forventet.
• Vurder ytelse: Unngå å opprette for mange markeringsområder, da dette kan påvirke ytelsen. Optimaliser JavaScript-koden din for å effektivt identifisere og style tekstområdene.

Konklusjon

CSS Custom Highlight Range tilbyr en kraftig og fleksibel måte å style tekstmarkeringer på nettet. Ved å bruke dette API-et kan du skape mer visuelt tiltalende og brukervennlige grensesnitt som forbedrer brukeropplevelsen og samsvarer med nettstedets design. Mens nettleserstøtten fortsatt er under utvikling, gjør de potensielle fordelene med denne teknologien den til et verdifullt verktøy for webutviklere og designere. Husk å prioritere tilgjengelighet og ytelse når du implementerer tilpassede markeringsstiler. Etter hvert som nettet fortsetter å utvikle seg, vil funksjoner som CSS Custom Highlight Range spille en stadig viktigere rolle i å forme brukeropplevelsen.