CSS Custom Highlight-kryssing: Mestring av overlappende markeringer

::highlight-pseudo-elementet i CSS gir kraftig kontroll over stylingen av tekstmarkeringer. Mens grunnleggende tekstmarkering er enkelt, krever håndtering av kryssende flervalg og tilpasning av deres overlappende områder en dypere forståelse. Denne artikkelen dykker ned i avanserte teknikker for å mestre CSS custom highlight-kryssing, med praktiske eksempler og innsikt for å skape polerte og tilgjengelige brukergrensesnitt.

Forstå det grunnleggende: ::highlight-pseudo-elementet

::highlight-pseudo-elementet lar deg style tekst som har blitt markert av brukeren. Denne muligheten strekker seg utover enkle bakgrunnsfarger og tekstfarger; den gjør det mulig for utviklere å bruke et bredt spekter av CSS-egenskaper på markert tekst, inkludert rammer, skygger og til og med animasjoner. Dette er et betydelig fremskritt sammenlignet med å kun stole på nettleserens standardmarkering, som ofte er inkonsekvent og ikke alltid samsvarer med et nettsteds design.

Grunnleggende syntaks

Den grunnleggende syntaksen for å bruke ::highlight innebærer å målrette spesifikke Selection-objekter via CSS-selektorer eller gjennom CSS Custom Highlight API.

Her er et enkelt eksempel:

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

            

              
                Copy
              
            
          

Denne kodesnutten vil endre bakgrunnsfargen på all markert tekst til gul og tekstfargen til svart. Dette er en global stil som gjelder for alle markeringer på siden. For å målrette spesifikke markeringer, må du bruke CSS Custom Highlight API.

CSS Custom Highlight API: Finskalert kontroll

CSS Custom Highlight API gir en mer detaljert måte å håndtere og style tekstmarkeringer på. Det lar deg opprette navngitte markeringer og bruke spesifikke stiler på dem. Dette er spesielt nyttig når du trenger å skille mellom ulike typer markeringer eller når du håndterer overlappende markeringer.

Opprette og anvende navngitte markeringer

For å bruke CSS Custom Highlight API, må du bruke JavaScript til å opprette og anvende navngitte markeringer. Her er en trinn-for-trinn-guide:

1. Registrer en navngitt markering: Bruk CSS.registerProperty() for å registrere en egendefinert egenskap som vil bli brukt til å style markeringen din. Dette gjøres vanligvis én gang i begynnelsen av skriptet ditt.
2. Opprett et område (Range): Definer start- og sluttpunktene for teksten du vil markere ved hjelp av Range-objekter.
3. Hent Selection-objektet: Få tak i den nåværende markeringen ved hjelp av window.getSelection().
4. Legg til området i markeringen: Bruk addRange()-metoden for å legge til området i markeringen. Dette kombineres ofte med å først fjerne alle eksisterende områder ved hjelp av removeAllRanges().
5. Anvend stiler: Definer stilen for markeringen. Dette kan innebære å sette CSS-variabler.

Her er et eksempel som demonstrerer denne prosessen:

            // Registrer markerings-egenskapen (kjøres én gang)
CSS.registerProperty({
  name: '--my-highlight-color',
  syntax: '',
  inherits: false,
  initialValue: 'rgba(255, 165, 0, 0.5)' // Halvgjennomsiktig oransje
});

// Funksjon for å anvende markeringen
function applyHighlight(startNode, startOffset, endNode, endOffset, highlightName) {
  // 1. Opprett et Range-objekt
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);

  // 2. Hent Selection-objektet
  const selection = window.getSelection();

  // 3. Fjern eksisterende markeringer og legg til det nye området
  selection.removeAllRanges();
  selection.addRange(range);

  // 4. Anvend markeringen ved hjelp av ::highlight(highlightName) i CSS
  //   Ingen JavaScript er nødvendig for direkte styling, CSS håndterer utseendet
}

// Eksempel på bruk:
const myElement = document.getElementById('my-text-element');
// Antar at myElement inneholder teksten du vil markere
applyHighlight(myElement.firstChild, 5, myElement.firstChild, 15, 'my-highlight');

            

              
                Copy
              
            
          

Og den tilsvarende CSS-en:

            ::highlight(my-highlight) {
  background-color: var(--my-highlight-color);
}

            

              
                Copy
              
            
          

I dette eksempelet registrerer vi den egendefinerte egenskapen --my-highlight-color, og markerer deretter teksten fra tegn 5 til 15 i `my-text-element`. CSS-en bruker deretter den registrerte egenskapen for å sette bakgrunnsfargen.

Internasjonale hensyn for tekstområder

Når man jobber med tekstområder på forskjellige språk, er det avgjørende å ta hensyn til Unicode og tegnkoding. Verdiene for startOffset og endOffset representerer tegnindekser, noe som kan være problematisk med språk som bruker flerbånds-tegn eller grafem-klynger. For eksempel, i noen østasiatiske språk kan ett enkelt tegn være representert av flere bytes. Du kan trenge å bruke biblioteker som håndterer Unicode korrekt for å sikre at markeringene dine blir brukt nøyaktig på tvers av forskjellige språk.

I tillegg kan tekstretning (venstre-til-høyre vs. høyre-til-venstre) også påvirke hvordan områder beregnes og anvendes. Sørg for å teste markeringsimplementasjonen din med ulike språk og skrifttyper for å sikre riktig funksjonalitet og gjengivelse.

Håndtering av overlappende flervalg

Den virkelige utfordringen oppstår når man håndterer flere markeringer som overlapper. Standard nettleseratferd for overlappende markeringer kan være uforutsigbar, og gir ofte ikke den ønskede visuelle effekten. CSS Custom Highlight API gir verktøy for å håndtere denne overlappingen, slik at du kan kontrollere hvordan forskjellige markeringer samhandler med hverandre.

Forstå problemet

Når flere markeringer overlapper, bruker nettleseren vanligvis stilene fra den siste markeringen som ble gjort. Dette kan føre til visuelle inkonsekvenser og en forvirrende brukeropplevelse. For eksempel, hvis du har to overlappende markeringer, en grønn og en blå, kan det overlappende området bare vise den blå markeringen, og skjule den grønne helt. For å løse dette må du implementere en strategi for å håndtere overlappingen.

Strategier for å løse overlapping

Det er flere strategier du kan bruke for å løse overlappende markeringer:

• Prioritering: Tildel forskjellige prioriteter til forskjellige typer markeringer. Markeringen med høyest prioritet vil ha forrang i det overlappende området.
• Blanding (Blending): Bland fargene på de overlappende markeringene for å skape en ny farge. Dette kan gi en visuelt tiltalende måte å indikere tilstedeværelsen av flere markeringer.
• Lagdeling (Layering): Bruk CSS-egenskaper som z-index for å kontrollere stable-rekkefølgen til markeringene. Dette lar deg skape en lagdelt effekt, der en markering vises oppå en annen.
• Egendefinert gjengivelse (Custom Rendering): For komplekse scenarier kan du bruke JavaScript til å analysere de overlappende områdene og gjengi egendefinerte visuelle elementer, som kanter eller ikoner, for å indikere tilstedeværelsen av flere markeringer.

Implementering av prioritering

Prioritering innebærer å tildele et prioritetsnivå til hver markering og sikre at markeringen med høyest prioritet vises i det overlappende området. Dette kan oppnås ved å nøye håndtere rekkefølgen markeringer anvendes i, og bruke CSS for å kontrollere utseendet deres.

Her er et eksempel på hvordan du kan implementere prioritering ved hjelp av CSS-variabler og JavaScript:

            // Definer markeringsprioriteter
const highlightPriorities = {
  'important-highlight': 2,
  'secondary-highlight': 1,
  'default-highlight': 0
};

// Funksjon for å anvende en markering med en spesifikk prioritet
function applyHighlightWithPriority(startNode, startOffset, endNode, endOffset, highlightName) {
  // (Samme logikk for å opprette område og markering som før)
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // Anvend markeringsnavnet på en egendefinert egenskap på markeringen.
  // Ingen direkte CSS-manipulering her; avhenger av CSS-en nedenfor.
  //  Dette krever polyfilling for nettlesere som mangler CSS.supports.
  //  Vær også forsiktig med sikkerhetsimplikasjonene ved å sette
  //  vilkårlige stiler via JavaScript og sørg for at bare klarert kode kan gjøre dette.
  let priority = highlightPriorities[highlightName] || 0;

  if (CSS.supports('selector(::highlight(' + highlightName + ''))')) {
      // Ikke nødvendig å direkte manipulere stilobjektet hvis CSS.supports er tilgjengelig
      // CSS-en vil håndtere resten basert på markeringen.
  }
  else {
      // Fallback-atferd, anvend stiler direkte. Dette er IKKE anbefalt
      //  for produksjonskode, da det er vanskelig å administrere og vedlikeholde.
      //   Det er bedre å bruke CSS Custom Highlight API med en polyfill, eller rett og slett
      //   elegant degradere markeringsfunksjonen hvis nettleseren ikke støtter den.
      console.warn("CSS.supports støttes ikke, direkte stilmanipulering kan være nødvendig");
  }

}

            

              
                Copy
              
            
          

Og den tilsvarende CSS-en:

            ::highlight(default-highlight) {
  background-color: lightgray;
  z-index: 0; // Lavest prioritet
}

::highlight(secondary-highlight) {
  background-color: lightblue;
  z-index: 1;
}

::highlight(important-highlight) {
  background-color: orange;
  z-index: 2; // Høyest prioritet
}

/* Brukes for å løse z-index-problemer i noen nettlesere */
::highlight {
  position: relative;
}

            

              
                Copy
              
            
          

I dette eksempelet får hver markeringstype en z-index-verdi, der høyere verdier indikerer høyere prioritet. position: relative-deklarasjonen på ::highlight-pseudo-elementet kan være nødvendig for å sikre at z-index fungerer korrekt i noen nettlesere.

Implementering av blanding (Blending)

Blanding innebærer å kombinere fargene på overlappende markeringer for å skape en ny farge. Dette kan oppnås ved hjelp av CSS-blandingsmoduser eller ved å manipulere bakgrunnsfargene på markeringene med JavaScript.

Her er et eksempel på hvordan du kan implementere blanding ved hjelp av CSS-blandingsmoduser:

            ::highlight(highlight-1) {
  background-color: rgba(255, 0, 0, 0.5); /* Rød med 50% opasitet */
  mix-blend-mode: multiply;
}

::highlight(highlight-2) {
  background-color: rgba(0, 0, 255, 0.5); /* Blå med 50% opasitet */
  mix-blend-mode: multiply;
}

            

              
                Copy
              
            
          

I dette eksempelet brukes mix-blend-mode: multiply-egenskapen til å blande fargene på de overlappende markeringene. Når en rød markering overlapper en blå markering, vil den resulterende fargen i det overlappende området være lilla.

Implementering av lagdeling (Layering)

Lagdeling innebærer å bruke CSS-egenskaper som z-index for å kontrollere stable-rekkefølgen til markeringene. Dette lar deg skape en lagdelt effekt, der en markering vises oppå en annen. Denne tilnærmingen ligner på prioritering, men gir mer fleksibilitet når det gjelder visuell styling.

Eksemplet som ble gitt i Prioritering-seksjonen demonstrerer allerede hvordan man implementerer lagdeling ved hjelp av z-index.

Implementering av egendefinert gjengivelse (Custom Rendering)

For komplekse scenarier kan du bruke JavaScript til å analysere de overlappende områdene og gjengi egendefinerte visuelle elementer, som kanter eller ikoner, for å indikere tilstedeværelsen av flere markeringer. Denne tilnærmingen gir mest fleksibilitet, men krever også mest innsats å implementere.

Her er en overordnet oversikt over hvordan du kan implementere egendefinert gjengivelse:

1. Analyser overlappende områder: Bruk JavaScript til å iterere gjennom markeringene og identifisere eventuelle overlappende områder.
2. Opprett egendefinerte elementer: Opprett HTML-elementer, som <span> eller <div>, for å representere de egendefinerte visuelle elementene.
3. Posisjoner elementer: Posisjoner de egendefinerte elementene nøyaktig over de overlappende områdene ved hjelp av JavaScript og CSS.
4. Style elementer: Anvend egendefinerte stiler på elementene for å skape den ønskede visuelle effekten.
5. Sett inn elementer: Sett inn de egendefinerte elementene i DOM-en, og sørg for at de er posisjonert korrekt i forhold til teksten.

Denne tilnærmingen kan være kompleks og krever nøye oppmerksomhet på detaljer, men den gir den ultimate kontrollen over utseendet på overlappende markeringer. Det er viktig å håndtere grensetilfeller, som tekstbryting og endringer i skriftstørrelse, for å sikre at de egendefinerte elementene forblir korrekt posisjonert.

Tilgjengelighetshensyn

Når du tilpasser tekstmarkeringer, er det avgjørende å ta hensyn til tilgjengelighet for å sikre at nettstedet ditt er brukbart for personer med nedsatt funksjonsevne. Her er noen viktige hensyn:

• Fargekontrast: Sørg for at fargekontrasten mellom markeringsfargen og tekstfargen er tilstrekkelig for personer med nedsatt syn. Bruk en fargekontrastkontroll for å verifisere at kontrastforholdet oppfyller retningslinjene for tilgjengelighet. WebAIMs kontrastkontroll er en flott ressurs.
• Tastaturnavigasjon: Sørg for at brukere kan navigere og samhandle med markert tekst ved hjelp av tastaturet. Dette kan innebære å legge til ARIA-attributter til de markerte elementene for å gi semantisk informasjon til hjelpemiddelteknologier.
• Skjermleserkompatibilitet: Test markeringsimplementasjonen din med skjermlesere for å sikre at den markerte teksten blir kunngjort korrekt. Gi beskrivende tekst for markeringene for å hjelpe brukere å forstå deres formål og betydning.
• Unngå å stole kun på farge: Ikke stol utelukkende på farge for å formidle mening. Gi alternative visuelle hint, som kanter eller ikoner, for å sikre at markeringene er tilgjengelige for personer som er fargeblinde.

Eksempler fra den virkelige verden og bruksområder

Tilpasset highlight-kryssing kan brukes i en rekke virkelige scenarier for å forbedre brukeropplevelsen. Her er noen eksempler:

• Kodeditorer: Kodeditorer kan bruke tilpassede markeringer for å indikere syntaksfeil, advarsler og annen viktig informasjon. Overlappende markeringer kan brukes til å vise flere problemer i samme kodeområde.
• Dokumenteditorer: Dokumenteditorer kan bruke tilpassede markeringer for å indikere sporede endringer, kommentarer og merknader. Overlappende markeringer kan brukes til å vise flere revisjoner i samme tekstdel.
• Søkeresultater: Søkeresultatsider kan bruke tilpassede markeringer for å vise søkeordene i søkeresultatene. Overlappende markeringer kan brukes til å vise flere søkeord som vises i samme tekstområde.
• Annoteringsverktøy: Annoteringsverktøy kan bruke tilpassede markeringer for å la brukere markere og kommentere tekst. Overlappende markeringer kan brukes til å vise forskjellige typer merknader i samme tekstområde.

Beste praksis

Her er noen beste praksiser å følge når du implementerer CSS custom highlight-kryssing:

• Bruk CSS Custom Highlight API: CSS Custom Highlight API gir den mest fleksible og effektive måten å håndtere og style tekstmarkeringer på.
• Vurder tilgjengelighet: Vurder alltid tilgjengelighet når du tilpasser tekstmarkeringer. Sørg for at markeringene er brukbare for personer med nedsatt funksjonsevne.
• Test grundig: Test markeringsimplementasjonen din grundig på tvers av forskjellige nettlesere, enheter og språk for å sikre at den fungerer korrekt.
• Bruk en konsekvent visuell stil: Bruk en konsekvent visuell stil for markeringene dine for å gi en klar og intuitiv brukeropplevelse.
• Dokumenter koden din: Dokumenter koden din tydelig og konsist for å gjøre den enklere å vedlikeholde og oppdatere.

Konklusjon

CSS custom highlight-kryssing er en kraftig teknikk som lar deg skape visuelt tiltalende og informative brukergrensesnitt. Ved å mestre ::highlight-pseudo-elementet og CSS Custom Highlight API, kan du kontrollere utseendet på tekstmarkeringer og håndtere kryssingen av flere markeringer for å gi en sømløs og tilgjengelig brukeropplevelse. Husk å prioritere tilgjengelighet, teste grundig og bruke en konsekvent visuell stil for å sikre at markeringsimplementasjonen din er effektiv og brukervennlig.

Videre ressurser

• MDN Web Docs: ::highlight
• MDN Web Docs: CSS Custom Highlight API
• WebAIM Fargekontrastkontroll