Dykk ned i CSS Custom Highlight API og lær hvordan du kan revolusjonere stylingen av tekstmarkering i dine webprosjekter. Skap unike og engasjerende brukeropplevelser.
Hev nivået på ditt brukergrensesnitt: Mestre CSS Custom Highlight API for styling av tekstmarkering
I årevis har styling av tekstmarkeringer på nettet vært en noe begrenset affære. Vi har i stor grad vært begrenset til nettleserens standardstyling, eller i beste fall en enkel endring av bakgrunns- og tekstfarge. CSS Custom Highlight API endrer imidlertid alt. Det gir en kraftig og fleksibel måte å fullstendig tilpasse utseendet på markert tekst, og åpner en helt ny verden av muligheter for UI-design og brukerengasjement.
Hva er CSS Custom Highlight API?
CSS Custom Highlight API er et sett med CSS-funksjoner som lar utviklere style tekstmarkeringer med tilpassede stiler utover den grunnleggende bakgrunns- og tekstfargen. Det introduserer ::highlight pseudo-elementet og relaterte egenskaper, som gjør at du kan målrette mot spesifikke typer tekstmarkeringer og bruke unik styling på dem. Dette API-et forbedrer brukeropplevelsen betydelig ved å tillate mer visuelt tiltalende og informative markeringer.
Nøkkelfunksjoner i CSS Custom Highlight API:
::highlightpseudo-elementet: Hjørnesteinen i API-et, som lar deg målrette mot markert tekst.- Navngitte markeringer: Lag egne markeringsnavn og bruk dem på spesifikke elementer.
selection-markeringen: En standardmarkering som representerer brukerens grunnleggende tekstvalg.- Forbedret tilgjengelighet: Lag mer visuelt distinkte og nyttige markeringer for brukere med nedsatt syn.
Nettleserkompatibilitet
Per sent 2023/tidlig 2024 er nettleserstøtten for CSS Custom Highlight API voksende, men den er ennå ikke universell. Store nettlesere som Chrome og Edge har god støtte. Safari-støtte er til stede, men kan være begrenset avhengig av versjonen. Sjekk alltid caniuse.com for den nyeste informasjonen om nettleserkompatibilitet før du implementerer API-et i et produksjonsmiljø. Vurder å bruke progressiv forbedring for å sikre at nettstedet ditt forblir funksjonelt for brukere med eldre nettlesere.
Grunnleggende bruk: Style standard tekstmarkering
La oss starte med et enkelt eksempel på styling av standard tekstmarkering ved hjelp av ::highlight pseudo-elementet.
Eksempel: Endre bakgrunns- og tekstfarge
Dette eksempelet demonstrerer hvordan du endrer bakgrunns- og tekstfargen på den markerte teksten.
::highlight {
background-color: #FFFF00; /* Gul */
color: #000000; /* Svart */
}
I denne CSS-koden målretter vi mot standard tekstmarkering med ::highlight og setter bakgrunnsfargen til gul (#FFFF00) og tekstfargen til svart (#000000). Dette gir en grunnleggende, men effektiv måte å tilpasse utseendet på markert tekst.
Opprette egne markeringsnavn
Den virkelige kraften i CSS Custom Highlight API ligger i muligheten til å definere egne markeringsnavn. Dette lar deg målrette mot spesifikke elementer eller seksjoner på nettstedet ditt og bruke unik styling på deres tekstmarkeringer.
Eksempel: Utheving av kodebiter
La oss si at du vil utheve kodebiter annerledes enn vanlig tekst på nettstedet ditt. Du kan oppnå dette ved å opprette et eget markeringsnavn.
- Definer et eget markeringsnavn: Bruk
highlight()-funksjonen for å definere et eget markeringsnavn i CSS-en din. - Bruk markeringsnavnet på elementer: Bruk
::highlight(ditt-markeringsnavn)pseudo-elementet for å målrette mot spesifikke elementer og bruke den tilpassede stylingen.
/* Definer et eget markeringsnavn for kodebiter */
::highlight(code-highlight) {
background-color: #ADD8E6; /* Lyseblå */
color: #00008B; /* Mørkeblå */
font-weight: bold;
}
/* Bruk markeringsnavnet på kodeelementer */
code::highlight(code-highlight) {
/* Stilen vil kun gjelde når tekst markeres *inni* en -tag */
}
/* Bruk markeringen på span-elementer med en spesifikk klasse */
.highlighted-code::highlight(code-highlight) {
}
I dette eksempelet har vi definert et eget markeringsnavn kalt code-highlight. Vi har deretter brukt denne markeringen på code-elementer. Bakgrunnsfargen er satt til lyseblå (#ADD8E6), tekstfargen er satt til mørkeblå (#00008B), og skriftvekten er satt til fet. Nå, når tekst markeres inne i et code-element, vil den bli stylet med disse tilpassede stilene.
Avansert bruk: Målretting mot spesifikke tekstområder
CSS Custom Highlight API kan også brukes til å målrette mot spesifikke tekstområder innenfor et element. Dette gir enda mer detaljert kontroll over stylingen av tekstmarkeringer.
Eksempel: Utheving av søkeord
Forestill deg at du vil utheve søkeord i et dokument. Dette krever ofte JavaScript i kombinasjon med CSS Highlight API.
- Bruk JavaScript for å identifisere søkeord: Bruk JavaScript for å finne alle forekomster av søkeordet i dokumentet.
- Opprett markeringsområder: Bruk
RangeAPI-et i JavaScript for å opprette områder for hver forekomst av søkeordet. - Bruk markeringen: Bruk
CSS.highlights.set()-metoden for å bruke markeringen på de opprettede områdene.
// JavaScript-kode for å utheve søkeord
function highlightSearchTerms(searchTerm) {
// Først, definer den egendefinerte markeringen i CSS
const highlightName = 'search-highlight';
const ranges = [];
// Finn alle tekstnoder
function findTextNodes(el) {
let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
while(n=walk.nextNode()) a.push(n);
return a;
}
const textNodes = findTextNodes(document.body);
textNodes.forEach(node => {
let nodeValue = node.nodeValue;
let index = nodeValue.indexOf(searchTerm);
while (index !== -1) {
const range = document.createRange();
range.setStart(node, index);
range.setEnd(node, index + searchTerm.length);
ranges.push(range);
index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
}
});
// Bruk markeringene med CSS.highlights.set()
if (CSS.highlights && CSS.highlights.set) {
CSS.highlights.set(highlightName, ranges);
} else {
console.warn('CSS Custom Highlight API støttes ikke fullt ut i denne nettleseren. Tilbyr reserveløsning');
// Tilby en reserveløsning for nettlesere med begrenset støtte (f.eks. eldre Safari)
ranges.forEach(range => {
const span = document.createElement('span');
span.style.backgroundColor = '#FFA07A'; // Lys lakserosa
span.style.color = '#000000'; // Svart
span.className = 'search-highlight-fallback'; // Legg til en klasse for reservestyling
range.surroundContents(span);
});
}
}
// CSS-kode for å style søkemarkeringen
::highlight(search-highlight) {
background-color: #FFA07A; /* Lys lakserosa */
color: #000000; /* Svart */
}
/* Reservestyling for nettlesere som ikke støtter API-et fullt ut */
.search-highlight-fallback {
background-color: #FFA07A;
color: #000000;
}
// Eksempel på bruk: uthev termen "example"
highlightSearchTerms("example");
Dette kodeutdraget demonstrerer hvordan man kan utheve søkeord i et dokument ved hjelp av JavaScript og CSS Custom Highlight API. JavaScript-koden identifiserer søkeordene, oppretter områder for hver forekomst, og bruker search-highlight på disse områdene. CSS-koden styler deretter den uthevede teksten med en lys lakserosa bakgrunn og svart tekst.
Viktig merknad: Denne tilnærmingen krever JavaScript og er avhengig av CSS.highlights API-et. Siden støtten ikke er universell, demonstreres en reserveløsning (som å omgi teksten med en `span` og style den `span`-en).
Hensyn til tilgjengelighet
Når du bruker CSS Custom Highlight API, er det avgjørende å ta hensyn til tilgjengelighet for å sikre at nettstedet ditt er brukbart for alle, inkludert brukere med nedsatt funksjonsevne.
Tips for tilgjengelig styling av tekstmarkering:
- Sørg for tilstrekkelig kontrast: Oppretthold tilstrekkelig kontrast mellom bakgrunnen og tekstfargen på den markerte teksten for å gjøre den lesbar for brukere med nedsatt syn. WCAG-retningslinjene anbefaler et kontrastforhold på minst 4,5:1 for normal tekst.
- Unngå å stole utelukkende på farge: Ikke stol utelukkende på farge for å indikere en tekstmarkering. Bruk ekstra visuelle signaler, som understreking eller fet skrift, for å gjøre markeringen tydeligere.
- Tilby alternativ styling for høykontrastmodus: Brukere som aktiverer høykontrastmodus i operativsystemet sitt, kan overstyre dine tilpassede stiler. Tilby alternativ styling som fungerer godt i høykontrastmodus for å sikre lesbarhet. Du kan bruke medieforespørsler som
@media (forced-colors: active)for å oppdage når høykontrastmodus er aktivert. - Test med hjelpeteknologi: Test nettstedet ditt med hjelpeteknologier, som skjermlesere, for å sikre at den markerte teksten blir korrekt annonsert og forstått.
Eksempel: Sikre tilstrekkelig kontrast
::highlight {
background-color: #000080; /* Marineblå */
color: #FFFFFF; /* Hvit */
}
I dette eksempelet har vi valgt en marineblå bakgrunnsfarge og hvit tekstfarge, noe som gir tilstrekkelig kontrast for brukere med nedsatt syn. Bruk alltid en fargekontrastsjekker for å verifisere at fargevalgene dine oppfyller tilgjengelighetsstandarder. Verktøy som WebAIMs Contrast Checker kan være nyttige.
Praktiske eksempler og bruksområder
CSS Custom Highlight API tilbyr et bredt spekter av muligheter for å forbedre brukeropplevelsen. Her er noen praktiske eksempler og bruksområder:
- Kodeutheving: Som demonstrert tidligere, kan du bruke API-et til å utheve kodebiter med tilpassede stiler, noe som gjør dem mer visuelt tiltalende og lettere å lese.
- Utheving av søkeord: Uthev søkeord i et dokument for å hjelpe brukere med å raskt finne informasjonen de leter etter.
- Utheving av feil: Uthev feil eller advarsler i skjemaer eller andre brukergrensesnitt for å rette brukerens oppmerksomhet mot dem.
- Utheving av sitater: Uthev sitert tekst i akademiske artikler eller avhandlinger for å visuelt skille den fra hovedinnholdet.
- Utheving av samtaler: I chat-applikasjoner, uthev brukerens egne meldinger eller meldinger fra spesifikke brukere for å gjøre dem lettere å følge.
- Spillifisering: Uthev spesifikke ord eller setninger i et spill for å gi ledetråder eller hint til spilleren.
- Tekstsammendrag: Uthev nøkkelsetninger eller -fraser i et dokument for å gi et raskt sammendrag av innholdet. Dette involverer ofte komplekse algoritmer for å bestemme viktighet.
Beste praksis og tips
For å få mest mulig ut av CSS Custom Highlight API, følg disse beste praksisene og tipsene:
- Bruk beskrivende markeringsnavn: Velg beskrivende markeringsnavn som tydelig indikerer formålet med markeringen. Dette vil gjøre koden din mer lesbar og vedlikeholdbar. For eksempel, bruk
code-highlighti stedet forhighlight-1. - Hold stiler konsistente: Oppretthold en konsistent stil på tvers av alle markeringene dine for å skape en sammenhengende brukeropplevelse. Bruk et designsystem eller en stilguide for å sikre konsistens.
- Unngå overforbruk av markeringer: Ikke overdriv bruken av markeringer, da dette kan være distraherende og overveldende for brukerne. Bruk dem sparsomt og strategisk for å rette oppmerksomheten mot den viktigste informasjonen.
- Test på forskjellige enheter og nettlesere: Test nettstedet ditt på forskjellige enheter og nettlesere for å sikre at dine tilpassede markeringer vises korrekt. Vær spesielt oppmerksom på mobile enheter og eldre nettlesere.
- Vurder ytelse: Selv om CSS Custom Highlight API generelt har god ytelse, vær oppmerksom på antall markeringer du bruker, spesielt på store dokumenter. For mange markeringer kan påvirke ytelsen. Hvis du bruker JavaScript til å administrere markeringer, optimaliser koden din for å minimere antall DOM-manipulasjoner.
- Bruk progressiv forbedring: Fordi nettleserstøtten ikke er universell, bruk teknikker for progressiv forbedring. Implementer en reserveløsning ved hjelp av standard CSS-styling for å sikre at opplevelsen forblir brukbar for de med eldre nettlesere. Vurder å bruke funksjonsgjenkjenning (f.eks. ved å sjekke eksistensen av
CSS.highlights) for å avgjøre om du skal bruke API-et eller reserveløsningen.
Konklusjon
CSS Custom Highlight API er et kraftig verktøy for å forbedre brukeropplevelsen og skape mer visuelt tiltalende og informative tekstmarkeringer. Ved å mestre dette API-et kan du ta ditt UI-design til neste nivå og gi brukerne en mer engasjerende og tilgjengelig nettopplevelse. Selv om nettleserstøtten fortsatt er under utvikling, vil det å forstå og eksperimentere med dette API-et nå posisjonere deg for å skape banebrytende nettopplevelser etter hvert som utbredelsen øker. Husk å prioritere tilgjengelighet og tilby reserveløsninger for eldre nettlesere for å sikre en positiv opplevelse for alle brukere.