Sukella CSS Custom Highlight API:n maailmaan ja opi, miten mullistat tekstinvalinnan muotoilun verkkoprojekteissasi. Luo ainutlaatuisia ja mukaansatempaavia käyttäjäkokemuksia.
Nosta käyttöliittymäsi uudelle tasolle: Hallitse CSS Custom Highlight API:n käyttö tekstinvalinnan muotoilussa
Vuosien ajan tekstivalintojen muotoilu verkossa on ollut jokseenkin rajoitettua. Olemme olleet pitkälti selaimen oletusmuotoilun tai parhaimmillaan yksinkertaisen taustan ja tekstin värin muutoksen varassa. CSS Custom Highlight API kuitenkin muuttaa kaiken. Se tarjoaa tehokkaan ja joustavan tavan täysin mukauttaa valitun tekstin ulkoasua, avaten kokonaan uuden mahdollisuuksien maailman käyttöliittymäsuunnittelulle ja käyttäjien sitouttamiselle.
Mikä on CSS Custom Highlight API?
CSS Custom Highlight API on joukko CSS-ominaisuuksia, jotka antavat kehittäjille mahdollisuuden muotoilla tekstivalintoja mukautetuilla tyyleillä perinteisen taustan ja tekstin värin lisäksi. Se esittelee ::highlight-pseudo-elementin ja siihen liittyvät ominaisuudet, joiden avulla voit kohdistaa tietyntyyppisiä tekstivalintoja ja soveltaa niihin ainutlaatuisia muotoiluja. Tämä API parantaa merkittävästi käyttäjäkokemusta mahdollistamalla visuaalisesti miellyttävämmät ja informatiivisemmat valinnat.
CSS Custom Highlight API:n keskeiset ominaisuudet:
::highlight-pseudo-elementti: API:n kulmakivi, jonka avulla voit kohdistaa valittua tekstiä.- Nimetyt korostukset: Luo mukautettuja korostusnimiä ja sovella niitä tiettyihin elementteihin.
selection-korostus: Oletuskorostus, joka edustaa käyttäjän perustekstivalintaa.- Parempi saavutettavuus: Luo visuaalisesti erottuvampia ja hyödyllisempiä valintoja käyttäjille, joilla on näkörajoitteita.
Selainyhteensopivuus
Vuoden 2023 lopun / 2024 alun tilanteen mukaan CSS Custom Highlight API:n selaintuki on kasvussa, mutta se ei ole vielä universaali. Suurilla selaimilla, kuten Chromella ja Edgellä, on hyvä tuki. Safarin tuki on olemassa, mutta voi olla rajoitettu versiosta riippuen. Tarkista aina ajantasaiset selainyhteensopivuustiedot osoitteesta caniuse.com ennen API:n käyttöönottoa tuotantoympäristössä. Harkitse progressiivisen parantamisen käyttöä varmistaaksesi, että sivustosi pysyy toimivana vanhempia selaimia käyttäville.
Peruskäyttö: Oletusarvoisen tekstivalinnan muotoilu
Aloitetaan yksinkertaisella esimerkillä oletusarvoisen tekstivalinnan muotoilusta käyttämällä ::highlight-pseudo-elementtiä.
Esimerkki: Taustavärin ja tekstin värin muuttaminen
Tämä esimerkki näyttää, kuinka valitun tekstin taustaväri ja tekstin väri muutetaan.
::highlight {
background-color: #FFFF00; /* Keltainen */
color: #000000; /* Musta */
}
Tässä CSS-koodissa kohdistamme oletusarvoiseen tekstivalintaan ::highlight-elementillä ja asetamme sen taustaväriksi keltaisen (#FFFF00) ja tekstin väriksi mustan (#000000). Tämä tarjoaa yksinkertaisen mutta tehokkaan tavan mukauttaa valitun tekstin ulkoasua.
Mukautettujen korostusnimien luominen
CSS Custom Highlight API:n todellinen voima piilee sen kyvyssä määritellä mukautettuja korostusnimiä. Tämä antaa sinun kohdistaa tiettyihin elementteihin tai sivustosi osiin ja soveltaa ainutlaatuisia muotoiluja niiden tekstivalintoihin.
Esimerkki: Koodinpätkien korostaminen
Oletetaan, että haluat korostaa koodinpätkiä eri tavalla kuin tavallista tekstiä sivustollasi. Voit saavuttaa tämän luomalla mukautetun korostusnimen.
- Määritä mukautettu korostusnimi: Käytä
highlight()-funktiota mukautetun korostusnimen määrittämiseen CSS:ssäsi. - Sovella korostusnimeä elementteihin: Käytä
::highlight(oma-korostus-nimi)-pseudo-elementtiä kohdistaaksesi tiettyihin elementteihin ja soveltaaksesi mukautettua muotoilua.
/* Määritä mukautettu korostusnimi koodinpätkille */
::highlight(code-highlight) {
background-color: #ADD8E6; /* Vaaleansininen */
color: #00008B; /* Tummansininen */
font-weight: bold;
}
/* Sovella korostusnimeä code-elementteihin */
code::highlight(code-highlight) {
/* Tyyliä sovelletaan vain, kun teksti on valittuna *sisällä* -tagin */
}
/* Sovella korostusta span-elementteihin, joilla on tietty luokka */
.highlighted-code::highlight(code-highlight) {
}
Tässä esimerkissä olemme määrittäneet mukautetun korostusnimen nimeltä code-highlight. Olemme sitten soveltaneet tätä korostusta code-elementteihin. Taustaväri on asetettu vaaleansiniseksi (#ADD8E6), tekstin väri tummansiniseksi (#00008B) ja fontin paksuus lihavoiduksi. Nyt, aina kun tekstiä valitaan code-elementin sisällä, se muotoillaan näillä mukautetuilla tyyleillä.
Edistynyt käyttö: Tiettyjen tekstialueiden kohdistaminen
CSS Custom Highlight API:ta voidaan käyttää myös tiettyjen tekstialueiden kohdistamiseen elementin sisällä. Tämä mahdollistaa vieläkin hienojakoisemman hallinnan tekstinvalinnan muotoilussa.
Esimerkki: Hakutermien korostaminen
Kuvittele, että haluat korostaa hakutermejä dokumentissa. Tämä vaatii usein JavaScriptin käyttöä yhdessä CSS Highlight API:n kanssa.
- Käytä JavaScriptiä hakutermien tunnistamiseen: Etsi JavaScriptillä kaikki hakutermin esiintymät dokumentista.
- Luo korostusalueita (Ranges): Käytä JavaScriptin
Range-API:a luodaksesi alueita jokaiselle hakutermin esiintymälle. - Sovella korostus: Käytä
CSS.highlights.set()-metodia soveltaaksesi korostuksen luotuihin alueisiin.
// JavaScript-koodi hakutermien korostamiseen
function highlightSearchTerms(searchTerm) {
// Määritä ensin mukautettu korostus CSS:ssä
const highlightName = 'search-highlight';
const ranges = [];
// Etsi kaikki tekstisolmut
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);
}
});
// Sovella korostukset käyttämällä CSS.highlights.set()-metodia
if (CSS.highlights && CSS.highlights.set) {
CSS.highlights.set(highlightName, ranges);
} else {
console.warn('CSS Custom Highlight API is not fully supported in this browser. Providing fallback');
// Tarjoa vararatkaisu selaimille, joilla on rajoitettu tuki (esim. vanhempi Safari)
ranges.forEach(range => {
const span = document.createElement('span');
span.style.backgroundColor = '#FFA07A'; // Vaalea lohenpunainen
span.style.color = '#000000'; // Musta
span.className = 'search-highlight-fallback'; // Lisää luokka varamuotoilua varten
range.surroundContents(span);
});
}
}
// CSS-koodi hakukorostuksen muotoiluun
::highlight(search-highlight) {
background-color: #FFA07A; /* Vaalea lohenpunainen */
color: #000000; /* Musta */
}
/* Varamuotoilu selaimille, jotka eivät täysin tue API:a */
.search-highlight-fallback {
background-color: #FFA07A;
color: #000000;
}
// Esimerkkikäyttö: korosta termi "example"
highlightSearchTerms("example");
Tämä koodinpätkä näyttää, kuinka hakutermejä korostetaan dokumentissa JavaScriptin ja CSS Custom Highlight API:n avulla. JavaScript-koodi tunnistaa hakutermit, luo alueet jokaiselle esiintymälle ja soveltaa search-highlight-korostuksen näihin alueisiin. CSS-koodi sitten muotoilee korostetun tekstin vaalealla lohenpunaisella taustalla ja mustalla tekstillä.
Tärkeä huomautus: Tämä lähestymistapa vaatii JavaScriptiä ja perustuu CSS.highlights-API:in. Koska tuki ei ole universaali, on esitetty varamekanismi (kuten tekstin ympäröiminen span-elementillä ja sen muotoilu).
Saavutettavuusnäkökohdat
Kun käytät CSS Custom Highlight API:a, on erittäin tärkeää ottaa huomioon saavutettavuus varmistaaksesi, että verkkosivustosi on kaikkien käytettävissä, mukaan lukien vammaiset käyttäjät.
Vinkkejä saavutettavaan tekstinvalinnan muotoiluun:
- Varmista riittävä kontrasti: Säilytä riittävä kontrasti valitun tekstin taustan ja tekstin värin välillä, jotta se on luettavissa näkörajoitteisille käyttäjille. WCAG-ohjeet suosittelevat vähintään 4.5:1 kontrastisuhdetta normaalille tekstille.
- Vältä luottamasta pelkästään väriin: Älä luota pelkästään väriin osoittaaksesi tekstin valintaa. Käytä lisäviitteitä, kuten alleviivausta tai lihavointia, tehdäkseen valinnasta selkeämmän.
- Tarjoa vaihtoehtoinen muotoilu suurkontrastitilaa varten: Käyttäjät, jotka ottavat käyttöön suurkontrastitilan käyttöjärjestelmässään, saattavat ohittaa mukautetut tyylisi. Tarjoa vaihtoehtoinen muotoilu, joka toimii hyvin suurkontrastitilassa luettavuuden varmistamiseksi. Voit käyttää mediakyselyitä, kuten
@media (forced-colors: active), havaitaksesi, milloin suurkontrastitila on käytössä. - Testaa avustavilla teknologioilla: Testaa verkkosivustoasi avustavilla teknologioilla, kuten ruudunlukijoilla, varmistaaksesi, että valittu teksti ilmoitetaan ja ymmärretään oikein.
Esimerkki: Riittävän kontrastin varmistaminen
::highlight {
background-color: #000080; /* Tummansininen (Navy) */
color: #FFFFFF; /* Valkoinen */
}
Tässä esimerkissä olemme valinneet tummansinisen taustavärin ja valkoisen tekstin värin, mikä tarjoaa riittävän kontrastin näkörajoitteisille käyttäjille. Käytä aina värikontrastin tarkistustyökalua varmistaaksesi, että värivalintasi täyttävät saavutettavuusstandardit. Työkalut, kuten WebAIM's Contrast Checker, voivat olla hyödyllisiä.
Käytännön esimerkkejä ja käyttötapauksia
CSS Custom Highlight API tarjoaa laajan valikoiman mahdollisuuksia käyttäjäkokemuksen parantamiseen. Tässä on joitakin käytännön esimerkkejä ja käyttötapauksia:
- Koodin korostus: Kuten aiemmin esitettiin, voit käyttää API:a koodinpätkien korostamiseen mukautetuilla tyyleillä, mikä tekee niistä visuaalisesti miellyttävämpiä ja helpommin luettavia.
- Hakutermien korostus: Korosta hakutermejä dokumentissa auttaaksesi käyttäjiä löytämään nopeasti etsimänsä tiedon.
- Virheiden korostus: Korosta virheitä tai varoituksia lomakkeissa tai muissa käyttöliittymissä kiinnittääksesi käyttäjän huomion niihin.
- Lainausten korostus: Korosta lainattua tekstiä akateemisissa julkaisuissa tai artikkeleissa erottaaksesi sen visuaalisesti pääsisällöstä.
- Keskustelun korostus: Chat-sovelluksissa korosta käyttäjän omia viestejä tai tiettyjen käyttäjien viestejä helpottaaksesi niiden seuraamista.
- Pelistämine: Korosta tiettyjä sanoja tai lauseita pelissä antaaksesi pelaajalle vihjeitä.
- Tekstin tiivistäminen: Korosta avainlauseita tai -virkkeitä dokumentissa tarjotaksesi nopean yhteenvedon sisällöstä. Tämä vaatii usein monimutkaisia algoritmeja tärkeyden määrittämiseksi.
Parhaat käytännöt ja vinkit
Saadaksesi kaiken irti CSS Custom Highlight API:sta, noudata näitä parhaita käytäntöjä ja vinkkejä:
- Käytä kuvaavia korostusnimiä: Valitse kuvaavia korostusnimiä, jotka selkeästi ilmaisevat korostuksen tarkoituksen. Tämä tekee koodistasi luettavampaa ja ylläpidettävämpää. Käytä esimerkiksi
code-highlightnimenhighlight-1sijaan. - Pidä tyylit johdonmukaisina: Ylläpidä johdonmukaista tyyliä kaikissa korostuksissasi luodaksesi yhtenäisen käyttäjäkokemuksen. Käytä suunnittelujärjestelmää tai tyyliopasta varmistaaksesi johdonmukaisuuden.
- Vältä korostusten liikakäyttöä: Älä käytä korostuksia liikaa, sillä se voi olla häiritsevää ja ylivoimaista käyttäjille. Käytä niitä säästeliäästi ja strategisesti kiinnittääksesi huomion tärkeimpään tietoon.
- Testaa eri laitteilla ja selaimilla: Testaa verkkosivustoasi eri laitteilla ja selaimilla varmistaaksesi, että mukautetut korostuksesi näkyvät oikein. Kiinnitä erityistä huomiota mobiililaitteisiin ja vanhempiin selaimiin.
- Harkitse suorituskykyä: Vaikka CSS Custom Highlight API on yleensä suorituskykyinen, ole tietoinen käyttämiesi korostusten määrästä, erityisesti suurissa dokumenteissa. Liian monet korostukset voivat vaikuttaa suorituskykyyn. Jos käytät JavaScriptiä korostusten hallintaan, optimoi koodisi minimoimaan DOM-manipulaatioiden määrä.
- Käytä progressiivista parantamista: Koska selaintuki ei ole universaali, käytä progressiivisen parantamisen tekniikoita. Toteuta varamekanismi käyttämällä standardeja CSS-muotoiluja varmistaaksesi, että kokemus pysyy käyttökelpoisena vanhempien selainten käyttäjille. Harkitse ominaisuuksien tunnistamista (esim. tarkistamalla
CSS.highlights:n olemassaolo) päättääksesi, käytetäänkö API:a vai vararatkaisua.
Yhteenveto
CSS Custom Highlight API on tehokas työkalu käyttäjäkokemuksen parantamiseen ja visuaalisesti miellyttävämpien ja informatiivisempien tekstivalintojen luomiseen. Hallitsemalla tämän API:n voit viedä käyttöliittymäsuunnittelusi seuraavalle tasolle ja tarjota käyttäjille sitouttavamman ja saavutettavamman selauskokemuksen. Vaikka selaintuki vielä kehittyy, tämän API:n ymmärtäminen ja kokeileminen nyt auttaa sinua luomaan huippuluokan verkkokokemuksia tuen kasvaessa. Muista priorisoida saavutettavuus ja tarjota vararatkaisuja vanhemmille selaimille varmistaaksesi positiivisen kokemuksen kaikille käyttäjille.