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)”>.