prefers-reduced-motion

[Rolf B]

Hallo Matthias,

Bingo - der Hinweis auf "not" war die Lösung.

Mir scheint, als ginge unser Wiki auf boolsche Operatoren in Media Queries nicht ein. Ein and wird zwar benutzt, aber nicht genauer beschrieben. Das Komma, das eine Form des or darstellt, wird nicht erwähnt. Das not wird ebenfalls nicht erwähnt.

Der entscheidende Satz steht bei MDN:

If you use the not operator, you must also specify a media type.

@media not screen and (prefers-reduced-motion) {

}

funktioniert, auch wenn die @keyframes drin stehen. Das hier verwendete not ist Teil von CSS3 und negiert die ganze Media Query. Ein not ohne Media Type ist ein negiertes Feature, und das ist Teil von Media Queries Level 4:

/* Negierte Feature-Query, derzeit nur Firefox */
@media not (prefers-reduced-motion) {

}

Man sieht das auch in der Syntax für Media Queries. Es gibt ein not in der <media-query> Produktion, und ein anderes not in der <media-not> Produktion. Für Willi Normalwebdesigner ist das nicht erkennbar, es sind syntaktisch aber verschiedene NOTs. Chrome unterstützt nur erstes, FF unterstützt beide.

Ich werde das im Lauf des Tages ins Wiki einzubauen versuchen.

Rolf