Maison >interface Web >tutoriel CSS >CSS Scroll-Timeline avec une préférence de mouvement
Parcourez rapidement les points clés:
@scroll-timeline
a été marqué en Chrome. Bramus nous montre également l'utilisation puissante de cette fonctionnalité sur CSS-Tricks, en particulier lorsqu'elle est utilisée en conjonction avec WAAPI.prefers-reduced-motion
La seule chose que je veux ajouter, c'est que prefers-reduced-motion
doit être prise en compte, car cette animation de défilement peut affecter les personnes sujettes au mal des transports. Pour ce faire, vous pouvez combiner les tests avec des tests pris en charge en JavaScript sur la même ligne:
si ( ! CSS.Supports ("Animation-Timeline: FOO") && ! window.matchMedia ('(préfère la mouvement réduit: réduire)'). Matches ) { // Exécuter des effets sympas}
Je ne suis pas sûr qu'il est préférable de tester la non-référence ou l'inverse de reduce
. Quoi qu'il en soit, l'astuce dans CSS est d'envelopper tout ce que vous voulez faire avec @scroll-timeline
et animation-timeline
dans le test @supports
(si vous voulez faire autre chose), puis enveloppez ce test dans le test des préférences:
@Media (préfert-réduction du mouvement: sans préférence) { @Supports (Animation-Timeline: Works) { / * Exécuter des effets frais * / } }
C'est une manifestation, et tout le mérite est pour Bramus, qui l'a fait.
Oh, tu sais? Si @when
devient une fonctionnalité, CSS sera plus concis:
@when supports (animation-timeline: works) et media (préfère le mouvement réduit: sans préférence) { } @autre { }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!