CSS: prefers-reduced-motion

Media značke niso le “screen” in “print”, na voljo imamo tudi druge. Ena takšnih je CSS media značka “prefers-reduced-motion”, ki se uporablja za zaznavanje, če je uporabnik zahteval, da sistem zmanjša količino animacij ali gibanja, ki se uporablja na strani.

CSS media značka “prefers-reduced-motion” nam tako omogoča enostaven izklop animacij na strani, če uporabnik to zahteva.

Vrednosti “prefers-reduced-motion”:

  • no-preference – Označuje, da uporabnik ni dal nobenih preferenc.
  • reduce – Uporabnik je izrazil željo za zmanjšanje animacije ali gibanja do maksimalne možnosti.

Primer kode:

.animacija {
animation: vibrate 0.5s;
}

@media (prefers-reduced-motion: reduce) {
.animacija {
animation: none;
}
}

CSS media značka “prefers-reduced-motion” je podprta v brskalnikih Edge, Firefox, Chrome in Safari. Natančno stanje lahko preverite na “Can I use”.

Če uporabljate na strani veliko animacij lahko uporabite ločeno datoteko za animacije. Uporaba CSS media značke “prefers-reduced-motion” prepreči prenos datoteke, če ta ni nujno potrebna. Primer uporabe: <link rel=”stylesheet” href=”animacije.css” media=”(prefers-reduced-motion: no-preference)”>.

Komentiraj


*