CSS @supports -valitsin: Globaalin ominaisuuksien tunnistuksen mahdollistaminen

Web-suunnittelun ja -kehityksen jatkuvasti kehittyvässä maisemassa on ensiarvoisen tärkeää pysyä kehityksen kärjessä ja samalla varmistaa saumaton käyttökokemus jokaiselle käyttäjälle heidän selaimestaan tai laitteestaan riippumatta. Moderni CSS tarjoaa tehokkaita työkaluja tämän saavuttamiseksi, ja tämän kyvykkyyden eturintamassa on CSS @supports -valitsin. Tämän valitsimen avulla kehittäjät voivat suorittaa ominaisuuksien tunnistuksen suoraan tyylitiedostoissaan, mikä mahdollistaa tyylien soveltamisen vain, kun käyttäjän selain tukee tiettyä CSS-ominaisuutta. Tämä lähestymistapa on ratkaisevan tärkeä rakennettaessa vankkoja, mukautuvia ja tulevaisuudenkestäviä verkkosivustoja, jotka palvelevat monipuolista globaalia yleisöä.

Ominaisuuksien tunnistuksen ymmärtäminen web-kehityksessä

Ominaisuuksien tunnistus on käytäntö, jossa tunnistetaan, tukeeko tietty selain tai laite tiettyä web-teknologiaa, kuten CSS-ominaisuutta, JavaScript-API:a tai HTML-elementtiä. Historiallisesti ominaisuuksien tunnistus oli pääasiassa JavaScript-vetoinen prosessi. Kehittäjät kirjoittivat JavaScript-koodia testatakseen selainominaisuuksia ja latasivat tai sovelsivat sitten dynaamisesti erilaisia tyylejä ja toimintoja. Vaikka tämä oli tehokasta, siihen liittyi usein asiakaspuolen suorituskykykuormitus, ja se saattoi joskus johtaa tyylittömän sisällön välähdykseen (FOUC) tai havaittaviin asettelun muutoksiin JavaScriptin suorittamisen aikana.

CSS-ominaisuuksien tunnistuksen tulo, jota @supports-sääntö johti, merkitsee merkittävää paradigman muutosta. Sen avulla voimme siirtää nämä tarkistukset CSS-moottorille itselleen, mikä johtaa puhtaampaan koodiin, parempaan suorituskykyyn ja tyylikkäämpiin ratkaisuihin progressiivista parantamista ja asteittaista heikkenemistä varten. Globaalille yleisölle tämä on erityisen tärkeää, koska selain- ja laitefragmentaatio on korostuneempaa eri alueilla ja teknologian käyttöönottonopeuksissa. Sen varmistaminen, että verkkosivusto toimii optimaalisesti vanhemmissa selaimissa ja hyödyntää samalla uusien CSS-ominaisuuksien tehoa moderneissa selaimissa, on avain inklusiiviseen web-suunnitteluun.

Mikä on CSS @supports -valitsin?

CSS:n @supports-sääntö on ehdollinen ryhmäsääntö. Sen avulla voit määrittää ehdon, ja jos ehto toteutuu, säännön lohkon sisällä olevat deklaratiot otetaan käyttöön. Perussyntaksi on seuraava:

            
@supports <declaration-condition> {
  /* CSS-deklaratiot, jotka otetaan käyttöön, jos ehto täyttyy */
}

            

              
                Copy
              
            
          

<declaration-condition> koostuu CSS-deklaratiosta (ominaisuus-arvo-parista) sulkeissa. Esimerkiksi, jos haluat tarkistaa, tukeeko selain display: grid -ominaisuutta, kirjoittaisit:

            
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Jos selain tukee display: grid -ominaisuutta, .container-luokan tyylejä sovelletaan. Jos ei, nämä tyylit ohitetaan, ja selain palaa mihin tahansa aiemmin määritettyihin tyyleihin .container-luokalle (tai pysyy tyylittömänä tässä suhteessa, jos muita sääntöjä ei sovelleta).

@supports-säännön avainkomponentit:

• @supports: Avainsana, joka aloittaa ehdollisen säännön.
• Sulkeet (): Ympäröivät deklaratioehdon (ominaisuus: arvo).
• Deklaratioehto: Ominaisuus-arvo-pari, esim. (display: flex), (color: oklch(50% 0.2 120)), (gap: 20px).
• Deklaratiolohko {}: Sisältää CSS-deklaratiot, jotka otetaan käyttöön, jos ehto on tosi.

Ehtojen kumoaminen avainsanalla `not`

@supports-sääntö tukee myös negaatiota käyttämällä not-avainsanaa. Tämä on hyödyllistä tyylien soveltamisessa, kun ominaisuutta ei tueta, mikä mahdollistaa asteittaisen heikkenemisen.

            
@supports not (display: grid) {
  .container {
    /* Varatyylit selaimille, jotka eivät tue CSS Grid -ominaisuutta */
    float: left;
    width: 33.33%;
    padding: 1em;
  }
  .container:after {
    content: "";
    display: table;
    clear: both;
  }
}

            

              
                Copy
              
            
          

Tämä esimerkki havainnollistaa, miten tarjota varasettelun vanhemmille selaimille, jotka eivät tue CSS Grid -ominaisuutta, varmistaen, että sisältö pysyy saatavilla ja kohtuullisesti esitettynä maailmanlaajuisesti.

Ehtojen yhdistäminen avainsanoilla `and` ja `or`

Monimutkaisempia skenaarioita varten voit yhdistää useita ehtoja käyttämällä and- ja or-avainsanoja. Tämä mahdollistaa erittäin tarkan ominaisuuksien kohdistuksen.

Avainsanan and käyttö:

and-avainsana edellyttää, että kaikkien ehtojen on oltava tosia, jotta sääntöä voidaan soveltaa.

            
@supports (display: flex) and (gap: 1em) {
  /* Sovella näitä tyylejä vain, jos sekä flexbox että gap ovat tuettuja */
  .card-list {
    display: flex;
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Avainsanan or käyttö:

or-avainsanan avulla sääntöä voidaan soveltaa, jos vähintään yksi ehdoista on tosi. Huomaa, että or-avainsanaa käytetään harvemmin suoraan @supports-säännössä selainimplementoinnin nyanssien vuoksi, mutta siitä on hyvä olla tietoinen.

Käytännöllisempi tapa saavuttaa 'or'-tyyppinen käyttäytyminen sisältää usein useita @supports-sääntöjä tai tukeutumisen kaskadiin. Jos esimerkiksi haluat käyttää uutta väritoimintoa, kuten lch() tai oklch(), voit jäsentää sen seuraavasti:

            
/* Priorisoi uudemmat väriavaruudet */
@supports (color: lch(50% 0.2 120)) {
  body {
    color: lch(50% 0.2 120);
  }
}

/* Varaa vanhemmille väriavaruuksille, jos lch() ei ole tuettu */
@supports (color: hsl(120, 100%, 50%)) {
  body {
    color: hsl(120, 100%, 50%); /* Varaväri */
  }
}

            

              
                Copy
              
            
          

Tässä tapauksessa selain yrittää soveltaa ensimmäistä sääntöä. Jos sitä ei tueta, se siirtyy seuraavaan @supports-sääntöön. Tämä saavuttaa tehokkaasti 'or'-tuloksen, jossa käytetään edistyneintä tuettua ominaisuutta.

Käytännön sovellukset ja globaalit käyttötapaukset

@supports-valitsin on tehokas työkalu progressiivisen parantamisen toteuttamiseen ja yhteensopivuuden varmistamiseen maailmanlaajuisen käyttäjäkunnan keskuudessa, jolla on erilaisia laitteita ja verkkoyhteyksiä. Tässä on joitain käytännön sovelluksia:

1. Modernien asettelutekniikoiden hyödyntäminen (CSS Grid & Flexbox)

Monet alueet ja kehittyvät markkinat saattavat edelleen luottaa vanhempiin laitteisiin tai selaimiin, joilla on rajallinen CSS Grid- tai Flexbox-tuki. @supports-ominaisuuden avulla voit toteuttaa nämä edistyneet asettelut tarjoten samalla vankat varajärjestelmät.

Esimerkki: Kansainvälinen verkkokaupan tuoteruudukko

Kuvittele kansainvälinen verkkokauppa-alusta, joka näyttää tuotteita. Nykyaikaisissa selaimissa haluat responsiivisen ruudukon, jonka voimanlähteenä on CSS Grid. Vanhemmissa selaimissa yksinkertaisempi, pinottu asettelu saattaa olla sopivampi.

            
.product-grid {
  /* Oletustyylit (voisi olla yksinkertainen flex- tai lohkoasettelu) */
  margin: 0 auto;
  padding: 1rem;
}

/* Tyylit selaimille, jotka tukevat CSS Grid -ominaisuutta */
@supports (display: grid) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
  }

  .product-item {
    border: 1px solid #eee;
    padding: 1rem;
    text-align: center;
    background-color: #fff;
  }
}

/* Varajärjestelmä selaimille, jotka eivät tue Grid-ominaisuutta */
@supports not (display: grid) {
  .product-item {
    margin-bottom: 1.5rem;
    border: 1px solid #eee;
    padding: 1rem;
    text-align: center;
    background-color: #fff;
  }
  /* Muu varatyyli tarvittaessa */
}

            

              
                Copy
              
            
          

Tämä lähestymistapa varmistaa, että nykyaikaisten laitteiden suurta käyttöönottoa käyttävien maiden käyttäjät hyötyvät parannetusta asettelusta, kun taas vanhempia laitteita käyttävät käyttäjät saavat edelleen käyttökelpoisen tuoteluettelon.

2. Edistyneiden väritoimintojen hyödyntäminen

Uudemmat CSS-väriavaruudet ja -toiminnot, kuten lch(), oklch(), lab() ja color-mix(), tarjoavat parannettua värinhallintaa ja saavutettavuusetuja. Näiden ominaisuuksien tuki voi kuitenkin vaihdella merkittävästi eri alueilla selainversioiden käyttöönoton vuoksi.

Esimerkki: Saavutettavat väripaletit globaalille tuotemerkille

Globaali tuotemerkki saattaa haluta käyttää visuaalisesti yhtenäistä Oklch-väriavaruutta tuotemerkkinsä väreille, mikä tarjoaa paremman yhdenmukaisuuden eri näytöissä. Heidän on kuitenkin tarjottava varajärjestelmiä selaimille, jotka eivät tue sitä.

            
/* Tuotemerkin pääväri Oklch-väriavaruuden avulla */
@supports (color: oklch(60% 0.25 200)) {
  .brand-primary-button {
    background-color: oklch(60% 0.25 200);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
  }
}

/* Varajärjestelmä selaimille, jotka eivät tue Oklch-väriavaruutta */
@supports (color: hsl(200, 70%, 40%)) {
  .brand-primary-button {
    background-color: hsl(200, 70%, 40%); /* Täydentävä HSL-väri */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
  }
}

            

              
                Copy
              
            
          

Tämä varmistaa, että vanhempia selainversioita käyttävät alueiden käyttäjät näkevät edelleen tuotemerkin tarkoitetut värit, vaikkakin mahdollisesti hieman vähemmän visuaalisella tarkkuudella, säilyttäen tuotemerkin johdonmukaisuuden maailmanlaajuisesti.

3. Modernin typografian ja välistyksen toteuttaminen

Ominaisuudet, kuten clamp() juoksevaan typografiaan, loogiset ominaisuudet (esim. margin-inline-start margin-left -ominaisuuden sijaan) ja edistyneet fonttien käsittelyominaisuudet voivat parantaa merkittävästi luettavuutta ja suunnittelun mukautuvuutta. Niiden tuki ei kuitenkaan välttämättä ole yleismaailmallista.

Esimerkki: Responsiiviset otsikot kansainvälisille uutissivustoille

Maailmanlaajuiselle yleisölle suunnattu uutissivusto tarvitsee otsikkonsa luettaviksi monenlaisilla näytön kokoilla ja laitteilla. clamp()-ominaisuuden käyttö voi luoda juoksevaa typografiaa, mutta varajärjestelmä on tarpeen.

            
h1 {
  font-size: 2rem; /* Perusfonttikoko */
  line-height: 1.2;
}

/* Juokseva typografia clamp()-ominaisuuden avulla */
@supports (font-size: clamp(1.5rem, 5vw, 3rem)) {
  h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
  }
}

/* Varajärjestelmä vanhemmille selaimille */
@supports not (font-size: clamp(1.5rem, 5vw, 3rem)) {
  /* Määritä responsiiviset fonttikoot mediaqueryjen avulla laajempaa yhteensopivuutta varten */
  @media (max-width: 600px) {
    h1 {
      font-size: 2rem;
    }
  }
  @media (min-width: 601px) and (max-width: 1024px) {
    h1 {
      font-size: 2.5rem;
    }
  }
  @media (min-width: 1025px) {
    h1 {
      font-size: 3rem;
    }
  }
}

            

              
                Copy
              
            
          

Tämä osoittaa, miten otsikoille tarjotaan sujuvaa skaalausta nykyaikaisissa selaimissa ja varmistetaan samalla täysin toimiva, vaikkakin vähemmän juokseva, typografinen kokemus vanhemmissa selaimissa.

4. Suorituskyvyn parantaminen fonttien näytön avulla

font-display-deskriptori on tehokas työkalu fonttien renderöinnin hallintaan, näkymättömän tekstin (FOIT) estämiseen ja koetun suorituskyvyn parantamiseen. Jotkin edistyneet arvot tai tietyt toteutukset saattavat vaatia ominaisuuksien tunnistusta.

Esimerkki: Optimoidut fonttien lataus alhaisen kaistanleveyden alueille

Alueilla, joilla on hitaammat Internet-yhteydet, fonttien latauksen optimointi on kriittistä. Vaikka font-display: swap; on laajalti tuettu, tarkempaa hallintaa saatetaan haluta.

            
@font-face {
  font-family: 'GlobalSans';
  src: url('globalsans-regular.woff2') format('woff2'),
       url('globalsans-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Oletusvarajärjestelmä */
}

/* Mahdollisesti edistyneempien font-display-strategioiden käyttö, jos tuettu */
@supports (font-display: optional) {
  @font-face {
    font-family: 'GlobalSans';
    src: url('globalsans-regular.woff2') format('woff2'),
         url('globalsans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: optional; /* Käytä valinnaista, jos tuettu paremman suorituskyvyn saavuttamiseksi */
  }
}

            

              
                Copy
              
            
          

Vaikka font-display on yleisesti hyvin tuettu, tämä havainnollistaa periaatetta tietyille deskriptoriarvoille tuen havaitsemisesta tarvittaessa.

5. Ehdollinen tyylittely tietyille ominaisuuksille

Joskus saatat haluta ottaa käyttöön tiettyjä käyttöliittymäelementtejä tai toimintoja vain, kun tietty CSS-ominaisuus on käytettävissä. Esimerkiksi CSS-animaatioiden tai -siirtymien käyttö, jotka saattavat olla resurssi-intensiivisiä vanhemmissa tai vähemmän tehokkaissa laitteissa.

Esimerkki: Hienovaraiset animaatiot interaktiivisille elementeille

Kun viet hiiren interaktiivisen elementin päälle, saatat haluta hienovaraisen animaation. Jos selain tukee laitteistokiihdytettyjä ominaisuuksia, voit ottaa sen käyttöön.

            
.interactive-card {
  transition: transform 0.3s ease;
}

@supports (transform: perspective(1000px))
       and (animation: slidein 1s ease-out) {
  /* Monimutkaisemmat 3D-muunnokset tai -animaatiot */
  .interactive-card:hover {
    transform: rotateY(10deg) scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }
}

/* Varajärjestelmä yksinkertaisemmille siirtymille */
@supports not (transform: perspective(1000px)) {
  .interactive-card:hover {
    transform: scale(1.03);
    background-color: #f0f0f0;
  }
}

            

              
                Copy
              
            
          

Tämä mahdollistaa tehokkaampia laitteita käyttävien käyttäjien kokevan rikkaampia vuorovaikutuksia, kun taas toiset saavat yksinkertaisemman, mutta toimivan, vuorovaikutuksen.

Selaimen tuki ja huomioitavat asiat

@supports-säännöllä on erinomainen tuki moderneissa selaimissa. On kuitenkin tärkeää olla tietoinen tietyistä toteutuksista ja selainversioista.

• Chrome: Tuettu versiosta 28 lähtien.
• Firefox: Tuettu versiosta 24 lähtien.
• Safari: Tuettu versiosta 7 lähtien.
• Edge: Tuettu versiosta 12 lähtien.
• Internet Explorer: Ei tue @supports-ominaisuutta.

Tämä tarkoittaa, että täyden globaalin kattavuuden saavuttamiseksi, mukaan lukien Internet Explorerin vanhan tuen (jota käytetään edelleen joissakin yritysympäristöissä tai vanhemmissa väestöryhmissä tietyillä alueilla), tarvitset edelleen JavaScript-pohjaista ominaisuuksien tunnistusta tai hyvin määriteltyä progressiivista parannusstrategiaa, joka ei luota @supports-ominaisuuteen kriittisen toiminnallisuuden osalta.

Testaus ja virheenkorjaus

@supports-sääntöjesi testaaminen on olennaista. Selaimen kehittäjätyökalut tarjoavat tapoja tarkastaa ja korjata CSS:ää, mukaan lukien tarkistus, mitkä @supports-ehdot täyttyvät. Useimmat nykyaikaiset kehittäjätyökalut korostavat tai osoittavat, milloin sääntölohko on aktiivinen tai ei-aktiivinen ominaisuuksien tuen perusteella.

Valinta CSS- ja JavaScript-ominaisuuksien tunnistuksen välillä

Vaikka @supports on tehokas CSS-ominaisuuksille, JavaScript on edelleen paras valinta monimutkaisempien selainominaisuuksien, DOM-rajapintojen tunnistamiseen tai kun sinun on ehdollisesti ladattava kokonaisia komentosarjoja tai CSS-tiedostoja.

Milloin käyttää CSS @supports:

• CSS-ominaisuuksien tai -arvojen soveltaminen, joilla on vaihteleva tuki.
• CSS-asettelutekniikoiden toteuttaminen (Grid, Flexbox).
• Modernien väritoimintojen tai typografiaominaisuuksien hyödyntäminen.
• Yksinkertaisten varatyylien tarjoaminen suoraan CSS:ssä.

Milloin käyttää JavaScript-ominaisuuksien tunnistusta (esim. Modernizr tai mukautetut tarkistukset):

• JavaScript-rajapintojen (esim. WebGL, Service Workers) tuen havaitseminen.
• Ulkoisten resurssien (JS-tiedostot, CSS-tiedostot) ehdollinen lataaminen.
• Monimutkaisen ehdollisen logiikan toteuttaminen, joka ylittää CSS-ominaisuudet.
• Hyvin vanhojen selainten, kuten Internet Explorerin, käsitteleminen, joissa CSS @supports ei ole käytettävissä.

Yleinen strategia on käyttää @supports-ominaisuutta CSS-tason parannuksiin ja varajärjestelmiin sekä JavaScriptiä laajempaan ominaisuuksien tunnistamiseen ja sovellustason parannuksiin, mikä varmistaa vankan kokemuksen kaikille maailmanlaajuisille käyttäjille.

Parhaat käytännöt globaaliin web-suunnitteluun @supports-ominaisuuden avulla

@supports-valitsimen tehokkuuden maksimoimiseksi maailmanlaajuiselle yleisölle, harkitse näitä parhaita käytäntöjä:

1. Aloita vankalla pohjalla: Varmista, että verkkosivustosi on toimiva ja saavutettavissa perus-HTML:n ja CSS:n avulla. Progressiivinen parantaminen tarkoittaa edistyneiden ominaisuuksien lisäämistä ydinkokemuksen päälle, ei luottamista niihin alusta alkaen.
2. Priorisoi ydintoiminnot: Kriittisen sisällön ja navigoinnin tulisi toimia kaikkialla. Käytä @supports-ominaisuutta parannuksiin, ei ydintoimintoihin, joiden on oltava yleisesti saatavilla.
3. Tarjoa vankat varajärjestelmät: Määritä aina tyylit, joita sovelletaan, kun ominaisuutta ei tueta. Näiden varajärjestelmien tulisi olla järkevä vaihtoehto, ei vain tyhjiä ilmoituksia.
4. Testaa laajasti: Käytä selaimen kehittäjätyökaluja, online-testauspalveluita ja todellisia laitteita eri alueilta testataksesi verkkosivustosi toimintaa eri selaimissa, käyttöjärjestelmissä ja verkkoyhteyksissä.
5. Pidä se yksinkertaisena: Vältä liian monimutkaisia sisäkkäisiä @supports-sääntöjä tai lukuisia toisistaan riippuvaisia ehtoja. Yksinkertaisempi logiikka on helpompi ylläpitää ja korjata.
6. Dokumentoi strategiasi: Dokumentoi selkeästi ominaisuuksien tunnistusstrategiasi, erityisesti jos yhdistät CSS @supports -ominaisuuden JavaScript-menetelmiin. Tämä on elintärkeää tiimityölle ja pitkäaikaiselle ylläpidolle.
7. Harkitse saavutettavuutta ja suorituskykyä: Varmista aina, että sivustosi parannetut ja varajärjestelmäversiot ovat saavutettavissa ja suorituskykyisiä. Ominaisuuksien tunnistus ei saa koskaan vaarantaa käytettävyyttä.
8. Hyödynnä loogisia ominaisuuksia: Kansainvälistämistä varten käytä CSS:n loogisia ominaisuuksia (esim. margin-inline-start, padding-block-end) tarvittaessa. Vaikka ne eivät liity suoraan @supports-ominaisuuteen, ne täydentävät maailmanlaajuista CSS-strategiaa.

Ominaisuuksien tunnistuksen tulevaisuus

Verkkostandardien kehittyessä edelleen ja selainten tuen uusille CSS-ominaisuuksille leviämisen myötä JavaScriptin käyttö CSS-ominaisuuksien tunnistuksessa vähenee. CSS @supports on merkittävä askel kohti deklaratiivisempaa ja tehokkaampaa CSS:ää. CSS:n tulevat iteraatiot saattavat esitellä entistä kehittyneempiä ehdollisia sääntöjä, joiden avulla kehittäjät voivat hallita paremmin, miten heidän tyylitiedostonsa mukautuvat maailmanlaajuisesti erilaisten käyttäjäagenttien maisemaan.

Kyky kysellä suoraan selaimen ominaisuuksia CSS:ssä antaa kehittäjille mahdollisuuden rakentaa joustavampia ja mukautuvampia verkkokokemuksia. Globaalille yleisölle tämä tarkoittaa verkkosivustoja, jotka eivät ole vain visuaalisesti houkuttelevia ja monipuolisia uusimmissa laitteissa, vaan myös toimivia ja saavutettavissa monenlaisissa vanhemmissa teknologioissa. @supports-valitsimen omaksuminen on investointi inklusiivisuuteen ja sitoutuminen laadukkaan verkkokokemuksen toimittamiseen jokaiselle käyttäjälle kaikkialla.

Johtopäätös

CSS @supports -valitsin on korvaamaton työkalu modernin web-kehittäjän arsenaalissa. Se tarjoaa deklaratiivisen ja tehokkaan tavan toteuttaa ominaisuuksien tunnistus suoraan CSS:ssä, mahdollistaen asteittaisen heikkenemisen ja progressiivisen parantamisen. Ymmärtämällä sen syntaksin, ominaisuudet ja parhaat käytännöt kehittäjät voivat luoda verkkosivustoja, jotka ovat vankkoja, mukautuvia ja saavutettavissa todella globaalille yleisölle. Olitpa toteuttamassa edistyneitä asetteluja, hyödyntämässä uusia väriavaruuksia tai hienosäätämässä typografiaa, @supports antaa sinulle mahdollisuuden tarjota parhaan mahdollisen kokemuksen käyttäjän selainympäristöstä riippumatta. Verkon jatkaessa innovointia ominaisuuksien tunnistuksen hallitseminen @supports:n kaltaisilla työkaluilla on edelleen ratkaisevan tärkeää inklusiivisten ja tulevaisuudenkestävien digitaalisten kokemusten rakentamisessa.