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 tukemaan muotoon:
- >= 0.2% in FI
- Firefox ESR
- ios >= 14
- not ie 11
- not op_mini all
- not dead
- not chrome 52
- KDS-kirjaston mukana ei pääsääntöisesti 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.
- Katso poikkeus käyttöönotto-ohjeesta.
- 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 |
|---|---|
| Accordion | Komponentti käyttää hidden="until-found" ominaisuutta ja beforematch-tapahtumaa sisällön näyttämiseen selaimen hakutoimintoa käytettäessä.
Lue lisää:
hidden="until-found"(Avautuu uuteen välilehteen) |
| Alert | Komponentti käyttää hidden="until-found" ominaisuutta ja beforematch-tapahtumaa sisällön näyttämiseen selaimen hakutoimintoa käytettäessä.
Lue lisää:
hidden="until-found"(Avautuu uuteen välilehteen) |
| Clickable | Komponentti käyttää :has() CSS-selektoria kohdistusindikaattorin poistamiseen kortilta, jos elementin sisällä on muita klikattavia kohteita.
Lue lisää:
has()(Avautuu uuteen välilehteen) |
| Collapse | Komponentti käyttää hidden="until-found" ominaisuutta ja beforematch-tapahtumaa sisällön näyttämiseen selaimen hakutoimintoa käytettäessä.
Lue lisää:
hidden="until-found"(Avautuu uuteen välilehteen) |
| DatePickerV2 | Komponentti käyttää WeakRef-ominaisuutta kohdistuksen lukituksen yhteydessä, joka ei ole tuettu Safari <14.1 / iOS <14.5
Lue lisää:
WeakRef(Avautuu uuteen välilehteen) |
| DateRangePickerV2 | Komponentti käyttää WeakRef-ominaisuutta kohdistuksen lukituksen yhteydessä, joka ei ole tuettu Safari <14.1 / iOS <14.5
Lue lisää:
WeakRef(Avautuu uuteen välilehteen) |
| 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) |
| Modal | Komponentti käyttää WeakRef-ominaisuutta kohdistuksen lukituksen yhteydessä, joka ei ole tuettu Safari <14.1 / iOS <14.5
Lue lisää:
WeakRef(Avautuu uuteen välilehteen) |
| MultiselectV2 | Komponentti käyttää kohdistuksen hallintaan WeakRef-ominaisuutta, joka ei ole tuettu Safari <14.1 / iOS <14.5
Lue lisää:
WeakRef(Avautuu uuteen välilehteen) |
| OverlayNav | OverlayNav käyttää inert-attribuuttia selaimissa, jotka tukevat sitä. Muut käyttävät aria-hidden-attribuuttia.
Lue lisää:
inert(Avautuu uuteen välilehteen) |
| Panel | Komponentti käyttää hidden="until-found" ominaisuutta ja beforematch-tapahtumaa sisällön näyttämiseen selaimen hakutoimintoa käytettäessä.
Lue lisää:
hidden="until-found"(Avautuu uuteen välilehteen) |
| Sidebar | Komponentti käyttää WeakRef-ominaisuutta kohdistuksen lukituksen yhteydessä, joka ei ole tuettu Safari <14.1 / iOS <14.5
Lue lisää:
WeakRef(Avautuu uuteen välilehteen) |
| TableV2 | Komponentti käyttää hidden="until-found" ominaisuutta ja beforematch-tapahtumaa sisällön näyttämiseen selaimen hakutoimintoa käytettäessä.
Lue lisää:
hidden="until-found"(Avautuu uuteen välilehteen) |
| TimeInput | Komponentti käyttää natiivia time-tyyppistä input-kenttää.
Lue lisää:
<input type="time">(Avautuu uuteen välilehteen) iOS-käyttöjärjestelmä ei tue sekuntien näyttämistä.
Lue lisää:
step(Avautuu uuteen välilehteen) |
| Tooltip | Komponentti käyttää kohdistuksen hallintaan WeakRef-ominaisuutta, joka ei ole tuettu Safari <14.1 / iOS <14.5
Lue lisää:
WeakRef(Avautuu uuteen välilehteen) |
| useHiddenUntilFound | Hook käyttää hidden="until-found" ominaisuutta ja beforematch-tapahtumaa sisällön näyttämiseen.
Lue lisää:
hidden="until-found"(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) |
| useSelectionLasso | Muiden elementtien interaktiot estetään inert-attribuutilla, valintalasson ollessa näkyvissä.
Lue lisää:
inert(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.