Prefers-Color-Scheme ja Prefers-Reduced-Motion
Huomioikaa käyttäjän järjestelmäasetukset tummaa tilaa ja vähennettyä liikeanimaatiota varten.
Prefers-Color-Scheme ja Prefers-Reduced-Motion on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Käyttäjän asetusten mediaominaisuudet
CSS voi kysellä käyttäjän järjestelmäasetuksia näytön koon lisäksi. Näin voidaan ottaa käyttöön automaattinen tumma tila ja saavutettavuutta huomioivat animaatiot ilman käyttäjän toimia sivustolla.
prefers-color-scheme
Tunnistaa, onko käyttäjä määrittänyt käyttöjärjestelmäänsä vaalean vai tumman tilan:
<p>This page follows your OS color-scheme preference.</p>
Automaattisen tumman tilan toteuttaminen
Selkein toteutustapa käyttää CSS-muuttujia, joiden arvot vaihdetaan asetuksen perusteella:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Jotkut käyttäjät kokevat animaatiot pahoinvointia tai epämukavuutta aiheuttavina. prefers-reduced-motion: reduce -mediaominaisuus tunnistaa tämän saavutettavuusasetuksen.
<div class="box spun"></div>
Liikeasetusten huomioiminen
Sen sijaan että kaikki animaatiot poistetaan käytöstä, tarjotaan vaihtoehtoisia hienovaraisia animaatioita:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Tunnistaa, suosiiko käyttäjä suurempaa vai pienempää kontrastia saavutettavuussyistä. Värivalintoja säädetään sen mukaisesti:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Jotkut näkövammaiset käyttäjät suosivat vähäisempää läpinäkyvyyttä. Vähentäkää backdrop-filter- ja opacity-pohjaisia tehosteita:
<div class="glass-card">Glass card</div>
Asetusten käyttäminen JavaScriptillä
Näitä asetuksia kysellään JavaScriptistä käyttämällä window.matchMedia()-funktiota:
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
Järjestelmäasetus + manuaalinen ohitus
Järjestelmäasetusta kunnioitetaan oletuksena, ja käyttäjälle annetaan mahdollisuus ohittaa se vaihtokytkimellä. Ohitus tallennetaan localStorage-muistiin ja luokitus lisätään <html>-elementtiin:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Tunnistaa, onko käyttäjä ottanut datansäästötilan käyttöön. Tarjotaan pienempiä kuvia tai ohitetaan tarpeettomat resurssit:
<div class="hero">Hero banner</div>
Testaaminen DevToolsissa
Chrome DevToolsin Rendering-välilehdellä voidaan emuloida tummaa tilaa, vähennettyä liikettä ja muita asetusmediaominaisuuksia muuttamatta käyttöjärjestelmän asetuksia.
Pikatarkistus
Mikä on paras tapa toteuttaa automaattinen tumma tila, joka tukee myös käyttäjän manuaalista vaihtokytkintä?
Kertaus
prefers-color-scheme mahdollistaa automaattisen tumman tilan. prefers-reduced-motion-asetuksen pitäisi poistaa animaatiot käytöstä tai yksinkertaistaa niitä saavutettavuuden vuoksi. Molemmat kannattaa toteuttaa CSS-muuttujilla, jotta koodi pysyy selkeänä ja helposti ylläpidettävänä. Käyttäjälle on aina tarjottava manuaalinen ohitus, jotta hän voi hallita asetustaan käyttöjärjestelmästä riippumatta.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Prefers-Color-Scheme ja Prefers-Reduced-Motion” ilmainen?
Kyllä – oppitunnin ”Prefers-Color-Scheme ja Prefers-Reduced-Motion” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Prefers-Color-Scheme ja Prefers-Reduced-Motion”?
Huomioikaa käyttäjän järjestelmäasetukset tummaa tilaa ja vähennettyä liikeanimaatiota varten. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Prefers-Color-Scheme ja Prefers-Reduced-Motion”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Syntaksi ja yleiset katkokohdat
- Leveys-, korkeus- ja suuntakyselyt
- Prefers-Color-Scheme ja Prefers-Reduced-Motion
- Useiden media queryjen yhdistäminen