Reducing motion with the picture element

Heres a bonafide CSS/HTML trick from Brad Frost and Dave Rupert where they use the <picture> element to switch out a GIF file with an image if the user has reduced motion enabled. This is how Brad goes about implementing that:

<picture>  <!-- This image will be loaded if the media query is true  -->  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source>  <!--  Otherwise, load this gif -->  <img srcset="animated.gif alt="brick wall"/></picture>

How nifty is this? It makes me wonder if … Read article

The post Reducing motion with the picture element appeared first on CSS-Tricks.