prefers-reduced-motion

[Matthias Scharwies]

Servus!

Ich wollte eigentlich mal ne SELF-Pause machen, das von @Rolf B angesprochene Beispiel hat mich aber nicht in Ruhe gelassen.

Ich habe die @keyframes-Regel aus der Media Query entfernt und jetzt funzt's:

@media not (prefers-reduced-motion:reduce) {
  p {
     color: #FFF;
     background: no-repeat -5% / 10% 95% linear-gradient(91deg, #FF000020 0%, #FF0000E0 50%, #FF000020 100%), black;
      animation: 2s linear 0s infinite alternate wonky_cylon;
     
  }
  p { text-align: center; }
  p::after { content: " - the Imperious Leader will find you!"; }
 
}
 @keyframes wonky_cylon {
   from { background-position: -10% -100%; }
   to { background-position: 110% 200%; }
 }

• https://wiki.selfhtml.org/wiki/Beispiel:CCS-animation-reduced.html
• im Frickl

Ich habe im media queries-Artikel einen Eintrag zu prefers-reduced-motion hinzugefügt und arbeite an einem Beispiel im Bereich video.

Wo würdet ihr dieses Beispiel einer dekorativen Animation im CSS-Animations-Tutorial einfügen?

• Am Ende der zahlreichen Einzel-Eigenschaften in CSS/Tutorials/Animation/Animation
• in einem Praxis-Kapitel, das noch zu erstellen wäre?

Herzliche Grüße

Matthias Scharwies

BTW: Ich konnte Rolf nicht im OriginalThread antworten, da ihr imho (wieder einmal) vor lauter Diskutieren das Kernanliegen aus dem Auge verloren hattet:

1. Frage freundlich beantworten
2. Auf Beispiel oder Grundlagenartikel in SELF-Wiki oder MDN hinweisen. (Viele unserer Nutzer lesen ihnen angebotene englische Quellen wohl gar nicht.)

Schade.

[Jonathan Harker]

Hallo Matthias,

• im Frickl

Ihr schaut zu viel schlechte Filme! 😀

Wo würdet ihr dieses Beispiel einer dekorativen Animation im CSS-Animations-Tutorial einfügen?

• Am Ende der zahlreichen Einzel-Eigenschaften in CSS/Tutorials/Animation/Animation
• in einem Praxis-Kapitel, das noch zu erstellen wäre?

Zwischen die keyframes und die animation-Eigenschaft als Kapitel 2. Eine kurze Erklärung, daß man solche Animationen so anlegen sollte, damit der Nutzer die Kontrolle behält.

Bis bald! Jonathan

[Jonathan Harker]

Hallo Jonathan,

klickibunti wie 1999: peppasauce.love

Nicht nachmachen!

Bis bald! Jonathan

[Rolf B]

Hallo Matthias,

Ich habe die @keyframes-Regel aus der Media Query entfernt und jetzt funzt's

Hast Du es Dir in Chrome angeschaut? Mein Fiddle tut es bei mir nur im Fuchs, nicht in Chromia (für's Frickl gilt das Gleiche).

Ihr schaut zu viel schlechte Filme! 😀

Jonathan, ich kann doch nichts dafür, dass MDN mit der Tour zum Krampfstern Beknacktica angefangen hat (der übrigens eine passable Serie war, die man zu schlechten Filmen zusammengeschnitten hat und mit einer noch schlechteren Serie fortsetzte) und mir dieses Animationsbeispiel vor die Finger kübelte:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation#examples

Mich störte nur, dass die Animation HTML Markup brauchte, und das wollte ich verbessern. Ergebnis ist ganz okay, finde ich - im 🔥🦊.

Aber der Chrom-Zylone wollte nicht, wie er sollte. Da hab ich ihn 🤾🤛. Seitdem ist das Lauflicht schief 🥴. Und mir tun die Finger weh!

Rolf

[Matthias Scharwies]

Servus!

FF tut es. Chrome nicht. Edge nicht. Opera auch nicht. Also - alle Chromia nicht. Wasn das?

Ich habe die @keyframes-Regel aus der Media Query entfernt und jetzt funzt's:

Hast Du es Dir in Chrome angeschaut? Mein Fiddle tut es bei mir nur im Fuchs, nicht in Chromia (für's Frickl gilt das Gleiche).

Oh, Mann! wie peinlich! Sorry! Ich nutze fast nur den Firefox und den Text vor 2 Tagen hatt' ich nicht mehr auf dem Schirm!

@media (prefers-reduced-motion: no-preference) {
	p {
		color: #FFF;
		background: no-repeat -5% / 10% 95% linear-gradient(91deg, #FF000020 0%, #FF0000E0 50%, #FF000020 100%), black;
		animation: 2s linear 0s infinite alternate wonky_cylon;
	}
	p {
		text-align: center;
	}
	p::after {
		content: " - the Imperious Leader will find you!";
	}
}

Ich habe jetzt das @media not (prefers-reduced-motion:reduce) {}durch @media (prefers-reduced-motion: no-preference) {}ersetzt und jetzt geht's im Edge und im Chrome.

Herzliche Grüße

Matthias Scharwies

[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