CSS Custom Highlight Range: Edistynyt tekstin valinnan muotoilu

Tekstin valinta on perustavanlaatuinen vuorovaikutus verkossa. Kun käyttäjä valitsee tekstiä verkkosivulla, selain soveltaa oletusarvoista korostustyyliä, tyypillisesti sinistä taustaa valkoisella tekstillä. Vaikka tämä oletusmuotoilu on toimiva, se voi usein olla ristiriidassa verkkosivuston suunnittelun estetiikan kanssa. CSS Custom Highlight Range tarjoaa tehokkaan tavan ohittaa nämä oletustyylit ja luoda visuaalisesti yhtenäisempi ja mukaansatempaavampi käyttökokemus.

Tekstin valinnan perusteiden ymmärtäminen

Ennen kuin syvennymme mukautettuihin korostusalueisiin, on tärkeää ymmärtää, miten tekstin valinta toimii selaimissa. Kun käyttäjä vetää hiirellään (tai käyttää muita syöttötapoja) valitakseen tekstiä, selain tunnistaa valitun tekstialueen ja soveltaa oletuskorostustyyliä. Tämän hoitaa selaimen sisäinen renderöintimoottori, eikä sitä oletusarvoisesti voi suoraan ohjata CSS:llä.

Oletusarvoinen valinnan muotoilu

Oletusarvoista tekstin valinnan muotoilua ohjaa selaimen user agent -tyylitiedosto. Tämä tyylitiedosto tarjoaa perusmuotoilun kaikille HTML-elementeille ja sisältää oletuskorostusmuotoilun. Käytetyt värit ja tyylit voivat vaihdella hieman selainten ja käyttöjärjestelmien välillä.

Esittelyssä ::selection-pseudo-elementti

CSS tarjoaa ::selection-pseudo-elementin valitun tekstin kohdentamiseen. Tämän avulla voit muokata valitun tekstin background-color- ja color-ominaisuuksia. Tällä lähestymistavalla on kuitenkin rajoituksensa. Se sallii ainoastaan taustan ja tekstin värin muuttamisen, eikä se tarjoa hienojakoisempaa hallintaa korostusalueeseen.

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

            

              
                Copy
              
            
          

Tämä yksinkertainen CSS-pätkä muuttaa valitun tekstin taustavärin keltaiseksi ja tekstin värin mustaksi. Vaikka tämä on hyödyllistä, se on vasta jäävuoren huippu.

CSS Custom Highlight Range -API

CSS Custom Highlight Range -API tarjoaa edistyneemmän ja joustavamman tavan muotoilla tekstin valintoja. Tämän API:n avulla voit määritellä tiettyjä korostusalueita ja soveltaa niihin mukautettuja tyylejä. Tämä on erityisen hyödyllistä visuaalisesti miellyttävämpien ja käyttäjäystävällisempien käyttöliittymien luomisessa.

Avainkäsitteet

• Highlight API: Taustalla oleva teknologia, joka mahdollistaa mukautetun muotoilun.
• Highlight Regions: Tietyt tekstialueet, joihin mukautettua muotoilua kohdistetaan.
• Custom Styles: CSS-ominaisuudet (muutkin kuin vain väri ja taustaväri), joita sovelletaan korostusalueisiin.

CSS Custom Highlight Rangen käytön edut

• Laajennettu mukauttaminen: Sovella laajempaa valikoimaa CSS-ominaisuuksia, kuten liukuvärejä, reunoja, varjoja ja paljon muuta.
• Parempi käyttökokemus: Luo visuaalisesti miellyttävämpiä ja yhtenäisempiä tekstin valintatyylejä, jotka sopivat yhteen verkkosivustosi suunnittelun kanssa.
• Saavutettavuus: Varmista, että mukautetut korostustyylisi ovat saavutettavia näkövammaisille käyttäjille tarjoamalla riittävän kontrastin ja selkeät visuaaliset vihjeet.
• Hienojakoinen hallinta: Kohdista mukautettu muotoilu tietyille tekstialueille, mikä mahdollistaa tarkemman ja asiayhteyteen sidotun korostuksen.

CSS Custom Highlight Rangen toteuttaminen

CSS Custom Highlight Rangen toteuttaminen edellyttää JavaScriptin käyttöä haluttujen tekstialueiden tunnistamiseen ja sen jälkeen haluttujen CSS-ominaisuuksien soveltamista näihin alueisiin.

Vaihe 1: Tekstialueen valitseminen

Ensimmäinen vaihe on tunnistaa tekstialue, jonka haluat muotoilla. Tämä voidaan tehdä käyttämällä erilaisia JavaScript-tekniikoita, kuten:

• document.getSelection(): Tämä metodi palauttaa Selection-olion, joka edustaa käyttäjän valitsemaa tekstialuetta.
• Range API: Tämän API:n avulla voit luoda ja käsitellä tekstialueita ohjelmallisesti.

Esimerkki document.getSelection()-metodin käytöstä:

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Nyt sinulla on range-olio, jota voit käsitellä
}

            

              
                Copy
              
            
          

Esimerkki Range API:n käytöstä:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Nyt sinulla on alue, joka valitsee kaiken sisällön elementin sisältä

            

              
                Copy
              
            
          

Vaihe 2: Highlight-olion luominen

Kun sinulla on Range-olio, sinun on luotava highlight-olio. Tämä olio edustaa mukautettua korostusta, ja sitä käytetään haluttujen tyylien soveltamiseen.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

Vaihe 3: Korostuksen rekisteröinti

Jotta korostus tulisi näkyviin, sinun on rekisteröitävä se CSS.highlights-olioon. Tämä on globaali olio, joka hallinnoi kaikkia sivun mukautettuja korostuksia.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API ei ole tuettu tässä selaimessa.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

Tässä 'my-custom-highlight' on mielivaltainen nimi, jonka valitset korostuksesi tunnistamiseksi.

Vaihe 4: Mukautettujen tyylien soveltaminen CSS:llä

Lopuksi voit soveltaa mukautettuja tyylejä korostukseen käyttämällä ::highlight()-pseudo-elementtiä CSS:ssäsi.

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

Tämä CSS-pätkä soveltaa puoliläpinäkyvää keltaista taustaa, tummanharmaata tekstiä, lihavoitua fontin painoa ja hienovaraista tekstivarjoa tekstille 'my-custom-highlight'-alueen sisällä.

Kokonainen esimerkki

Tässä on kokonainen esimerkki, joka näyttää, miten CSS Custom Highlight Rangea käytetään:

HTML:

            
Tämä on tekstiä, jota voidaan valita. Mukautamme korostuksen muotoilua käyttämällä CSS Custom Highlight Rangea.

            

              
                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 ei ole tuettu tässä selaimessa.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

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

            

              
                Copy
              
            
          

Tässä esimerkissä, kun käyttäjä vapauttaa hiiren painikkeen valittuaan tekstiä kappaleen sisältä, JavaScript-koodi luo korostuksen ja rekisteröi sen. CSS soveltaa sitten vaaleanvihreän taustan, tummanvihreän tekstin värin ja kursiivin fonttityylin valittuun tekstiin.

Edistyneet mukauttamistekniikat

CSS Custom Highlight Range mahdollistaa vieläkin edistyneempiä mukauttamistekniikoita, mukaan lukien:

Liukuvärien käyttäminen

Voit käyttää CSS-liukuvärejä luodaksesi visuaalisesti upeita korostusefektejä.

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

            

              
                Copy
              
            
          

Reunojen ja varjojen lisääminen

Voit lisätä korostukseen reunoja ja varjoja, jotta se erottuu vieläkin paremmin.

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

Ehdollinen korostus

Voit käyttää JavaScriptiä muuttaaksesi korostustyylejä dynaamisesti tiettyjen ehtojen perusteella. Voisit esimerkiksi korostaa erityyppisiä tekstejä eri väreillä.

            
// Esimerkki: Korosta avainsanat eri värillä
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Toteutus avainsanojen löytämiseksi ja alueiden luomiseksi tulisi tähän)

// Sitten, CSS:ssä:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

Saavutettavuusnäkökohdat

Kun toteutat mukautettuja korostustyylejä, on ratkaisevan tärkeää ottaa huomioon saavutettavuus. Varmista, että korostustyylisi tarjoavat riittävän kontrastin ja selkeät visuaaliset vihjeet näkövammaisille käyttäjille.

Kontrastisuhde

Varmista, että korostustyyliesi taustavärin ja tekstin värin välinen kontrastisuhde täyttää WCAG-vaatimukset (Web Content Accessibility Guidelines). Suositeltu kontrastisuhde on vähintään 4.5:1 normaalille tekstille ja 3:1 suurelle tekstille.

Visuaaliset vihjeet

Tarjoa selkeät visuaaliset vihjeet osoittamaan, että teksti on valittu. Tämä voidaan tehdä käyttämällä erottuvia värejä, reunoja tai varjoja.

Testaaminen aputeknologioilla

Testaa mukautetut korostustyylisi aputeknologioilla, kuten ruudunlukijoilla, varmistaaksesi, että ne ovat kaikkien käyttäjien saavutettavissa.

Selainyhteensopivuus

CSS Custom Highlight Range -API on suhteellisen uusi teknologia, ja selaintuki voi vaihdella. Vuoden 2023 loppupuolella sitä tuetaan Chromium-pohjaisissa selaimissa (Chrome, Edge, Brave) ja Safarissa (Technology Preview). Firefox on ilmaissut kiinnostuksensa, mutta tukea ei ole vielä toteutettu.

On tärkeää tarkistaa uusimmat selainyhteensopivuustiedot ennen tämän API:n käyttöä tuotannossa. Voit käyttää sivustoja, kuten "Can I use...", seurataksesi CSS Custom Highlight Rangen selaintukea.

Selaimille, jotka eivät tue API:a, voit käyttää ::selection-pseudo-elementtiä vararatkaisuna.

Käyttötapauksia ja esimerkkejä

Tässä on joitakin käytännön käyttötapauksia ja esimerkkejä siitä, miten CSS Custom Highlight Rangea voidaan käyttää:

Koodieditorit

Mukauta valitun koodin korostustyylejä koodieditorissa parantaaksesi luettavuutta ja visuaalista ilmettä. Eri ohjelmointikielillä voisi jopa olla erilaiset korostusmallit.

Dokumenttien katseluohjelmat

Paranna dokumenttien katseluohjelmien käyttökokemusta tarjoamalla mukautettuja korostustyylejä, jotka sopivat dokumentin suunnitteluun.

Verkko-oppimisalustat

Luo interaktiivisia oppimiskokemuksia korostamalla avainkäsitteitä tai tärkeää tietoa mukautetulla tyylillä.

Hakutulosten korostus

Paranna hakutulosten näkyvyyttä korostamalla osumia erottuvalla mukautetulla tyylillä. Mieti, miltä tämä voisi näyttää monikielisessä haussa, jossa korostusvärit voisivat hienovaraisesti ilmaista osuman kielen.

Merkintätyökalut

Anna käyttäjien tehdä merkintöjä tekstiin mukautetuilla korostustyyleillä tärkeiden kohtien merkitsemiseksi tai muistiinpanojen lisäämiseksi. Eri käyttäjille voitaisiin antaa eri korostusvärit yhteiskäyttöistä merkintää varten.

Parhaat käytännöt

• Käytä semanttista HTML:ää: Käytä semanttisia HTML-elementtejä sisällön jäsentämiseen. Tämä helpottaa muotoiltavien tekstialueiden tunnistamista.
• Pidä se yksinkertaisena: Vältä liian monimutkaisten tai häiritsevien korostustyylien käyttöä. Tavoitteena on parantaa käyttökokemusta, ei ylikuormittaa käyttäjää.
• Testaa perusteellisesti: Testaa mukautetut korostustyylisi eri selaimilla ja laitteilla varmistaaksesi, että ne toimivat odotetusti.
• Ota suorituskyky huomioon: Vältä liian monien korostusalueiden luomista, sillä se voi vaikuttaa suorituskykyyn. Optimoi JavaScript-koodisi tunnistamaan ja muotoilemaan tekstialueet tehokkaasti.

Yhteenveto

CSS Custom Highlight Range tarjoaa tehokkaan ja joustavan tavan muotoilla tekstin valintoja verkossa. Käyttämällä tätä API:a voit luoda visuaalisesti miellyttävämpiä ja käyttäjäystävällisempiä käyttöliittymiä, jotka parantavat käyttökokemusta ja sopivat yhteen verkkosivustosi suunnittelun kanssa. Vaikka selaintuki on vielä kehittymässä, tämän teknologian mahdolliset hyödyt tekevät siitä arvokkaan työkalun web-kehittäjille ja suunnittelijoille. Muista priorisoida saavutettavuus ja suorituskyky toteuttaessasi mukautettuja korostustyylejä. Verkon jatkaessa kehittymistään CSS Custom Highlight Rangen kaltaiset ominaisuudet tulevat olemaan yhä tärkeämmässä roolissa käyttökokemuksen muovaamisessa.