`prefers-reduced-motion`und `media`/`@media` (war: animierte GIFs)
bearbeitet von
@@Gunnar Bittersmann
> Dass sich Google einen Scheißdreck um Nutzer schert, kommt für mich indes nicht unerwartet. Wenn ich in meinen Systemeinstellungen „Bewegung reduzieren“ anhake, hüpft der Vogel auf google.com immer noch wild umher.
Und das soll er natürlich nicht. Also hatte ich gedacht, `picture` zu verwenden: `source` mit `prefers-reduced-motion` im `media`-Attribut. Aber Pustekuchen! Unabhängig von der Systemeinstellung wird das `img` angezeigt.
☞ Codepen [`prefers-reduced-motion` doesn’t work in HTML attribute `media`](https://codepen.io/gunnarbittersmann/pen/oNrGMZQ?editors=1000){:@en}
Man kann im `media`-Attribut nicht alles verwenden, was man in CSS in `@media` verwenden kann.
Durch die Specs gehangelt: [`source` element](https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element){:@en}
→ [`media` attribute](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-source-media){:@en}
→ [valid media query list](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-media-query-list){:@en}
→ [Media Queries [MQ]](https://html.spec.whatwg.org/multipage/references.html#refsMQ){:@en}
→ [Media Queries Level 4](https://drafts.csswg.org/mediaqueries/){:@en}
Und darin ist `prefers-` nicht zu finden. 🤷♂️
Dann muss man wohl zwei `img`-Elemente verwenden und eins mit CSS ausblenden.
☞ Codepen [`prefers-reduced-motion` in CSS `@media`](https://codepen.io/gunnarbittersmann/pen/jOjGQdL){:@en}
Kwakoni Yiquan
{:@art-x-kwejian}
--
*Ad astra per aspera*{:@la}