Nosta käyttöliittymäsi uudelle tasolle: Hallitse CSS Custom Highlight API:n käyttö tekstinvalinnan muotoilussa

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.

1. Käytä JavaScriptiä hakutermien tunnistamiseen: Etsi JavaScriptillä kaikki hakutermin esiintymät dokumentista.
2. Luo korostusalueita (Ranges): Käytä JavaScriptin Range-API:a luodaksesi alueita jokaiselle hakutermin esiintymälle.
3. 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");

            

              
                Copy
              
            
          

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 */
}

            

              
                Copy
              
            
          

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-highlight nimen highlight-1 sijaan.
• 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.

Resurssit

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Contrast Checker