Tuetut selaimet
Tietoa Kela Design Systemin selaintuesta.
Selaintuki
Kirjaston selaintuki kattaa Suomessa yleisimmin käytetyt selainversiot. Tuki ei koske selaimia, joiden osuus Suomessa käytössä olevista selaimista on alle 0,2 %.
Yleisimmät selaimet ja niiden versiot löytyvät Statcounterin tilastosta(Avautuu uuteen välilehteen).
Periaatteet
- React-komponentit ja CSS käännetään seuraavilla browserslist-asetuksilla(Avautuu uuteen välilehteen) vanhempien selaimien ymmärtämään muotoon:
- >= 0.2% in FI
- Firefox ESR
- ios >= 13
- not ie 11
- not op_mini all
- not dead
- KDS-kirjaston mukana ei tule polyfillejä, joten mahdolliset puutteet selaintuessa paikataan sovelluksissa, mm. seuraavista syistä:
- Sovellukset voivat vapaasti määrittää haluamansa selaintuen tason, eikä ylimääräisiä polyfillejä ladata.
- Sovelluksiin ei tule päällekkäisiä polyfillejä KDS:stä ja sovelluksesta.
- Vältetään versiokonflikteja polyfill-kirjastojen kanssa.
- Pääsääntöisesti käytetään ominaisuuksia, jotka ovat laajalti tuettuja tai joihin Babel tarjoaa polyfillin.
- Toiminnallisuus tai ulkoasu ei välttämättä ole täysin sama vanhemmissa selaimissa, vaan uudemmille selaimille tarjotaan parempi kokemus ja toimiva minimitoteutus vanhemmille.
Komponentit, joissa on huomioitavaa selaintuessa
| Komponentti | Ominaisuus |
|---|---|
| LinkBox | Neliön muotoiset linkit käyttävät aspect-ratio-määritystä. Selaintukea voi parantaa lisäämällä linkkiä ympäröivälle elementille kds-ratio-luokan.
Lue lisää:
aspect-ratio(Avautuu uuteen välilehteen) LinkBoxGroup käyttää Container queries -ominaisuutta, jonka selaintukea varmistavat normaalit media-queryt. Asettelussa kannattaa huomioida, että uudemmat selaimet skaalaavat sisältöä container-elementin leveyden mukaan ja vanhemmat selaimet taas selainikkunan leveyden mukaan.
Lue lisää:
Container queries(Avautuu uuteen välilehteen) |
| TabNav | TabNavListScrollable käyttää IntersectionObserveria.
Lue lisää:
IntersectionObserver(Avautuu uuteen välilehteen) |
| Tabs | Tabien nuolet näytetään ja piilotetaan IntersectionObserverin avulla, jos ne eivät enää mahdu ruudulle.
Lue lisää:
IntersectionObserver(Avautuu uuteen välilehteen) |
| useNonInteractiveFocus | useNonInteractiveFocus käyttää oletuksena focus-visible CSS-pseudoluokkaa. Vaihda tarvittaessa focukseen, jonka selaintuki on kattavampi.
Lue lisää:
focus-visible(Avautuu uuteen välilehteen) |
Lisätietoa
- @babel/preset-env(Avautuu uuteen välilehteen) -kirjastolla voidaan asentaa automaattisesti tarvittavat polyfillit sovellukseen.
- useBuiltIns: entry: lisää automaattisesti browserslistin perusteella vaadittavat polyfillit.
- useBuiltIns: usage: lisää automaattisesti browserslistin ja koodissa käytettyjen ominaisuuksien perusteella vaadittavat polyfillit (huomioi, että node_modules ei välttämättä ole oletuksena mukana).
- babel-loader(Avautuu uuteen välilehteen) -kirjasto Webpackilla käännettäviin sovelluksiin.
- @vitejs/plugin-legacy(Avautuu uuteen välilehteen) -kirjasto Vitellä käännettäviin sovelluksiin.
- @rollup/plugin-babel(Avautuu uuteen välilehteen) -kirjasto Rollupilla käännettäviin sovelluksiin.