Did you see that neat technique for utilizing the <image> factor with <supply media=""> to serve an animated picture (or not) based mostly on a prefers-reduced-motion media query?

After we shared that in our newsletter, we obtained an fascinating reply from Michael Gale:

What about people who love their animated GIFs, however simply didn’t need the UI to be zooming everywhere? Are they now compelled to select between content material and UI?

I assumed that was a fairly fascinating query.

Additionally, at any time when I see <img src="http://css-tricks.com/gif.gif"> lately, my mind is triggered into WELL WHAT ABOUT MP4?! territory, as I have been correctly satisfied that movies are better-in-all-ways on the net than GIFs. Seems, some browsers help movies proper throughout the <img> factor and, imagine it or not, you can write fallbacks for that, with — drumroll, please — for the <image> factor as nicely!

Let’s take a crack at combining all these items.

Including an MP4 supply

The straightforward one is including a further <supply> with the video. Which means we’ll want three supply media information:

  1. A fallback non-animated graphic when prefers-reduced-motion is scale back.
  2. An animated GIF because the default.
  3. An MP4 video to switch the GIF, if the fallback is supported.

For instance:

<image>
   <supply  media="(prefers-reduced-motion: scale back)"></supply>
   <supply  kind="video/mp4">
   <img  alt="animated picture" />
 </image>

Below default circumstances in Chrome, solely the GIF is downloaded and proven:

Below default circumstances in Safari, solely the MP4 is downloaded and proven:

Safari DevTools showing only mp4 downloaded

For those who’ve activated prefers-reduced-motion: scale back in both Chrome or Safari (on my Mac, I am going to System PreferencesAccessibilityShowScale back Movement), each browsers solely obtain the static PNG file.

Chrome DevTools showing png downloaded

I examined Firefox and it does not appear to work, as an alternative persevering with to obtain the GIF model. Firefox seems to support prefers-reduced-motion, however maybe it is simply not supported on <supply> parts but? I am unsure what’s up there.

Would not it’s kinda cool to supply a single animated supply and have a device generate the others from it? I guess you would wire that up with one thing like Cloudinary.

Including a toggle to indicate the animated model

Like Michael Gale talked about, it appears a pity that you just’re totally locked out from seeing the animated model simply since you’ve flipped on a diminished movement toggle.

It needs to be simple sufficient to have a <button> that may use JavaScript to yank out the media question and power the browser to indicate the animated model.

I am pretty certain there isn’t a sensible approach to do that declaratively in HTML. We can also’t put this button throughout the <image> tag. Regardless that <image> is not a changed factor, the browser nonetheless will get confused and does not prefer it. As an alternative, it does not render it in any respect. No massive deal, we are able to use a wrapper.

<div class="picture-wrap">
   
   <image>
      <!-- sources  -->
   </image>
 
   <button class="animate-button">Animate</button>
 
 </div>

We will place the button on prime of the picture someplace. That is simply an arbitrary alternative — you would put it wherever you need, and even have all the picture be tappable so long as you suppose you would clarify that to customers. Keep in mind to solely present the button when the identical media question matches:

.picture-wrap .animate-button {
   show: none;
 }
 
 @media (prefers-reduced-motion: scale back) {
   .picture-wrap .animate-button {
      show: block;
   }
 }

When the button is clicked (or tapped), we have to take away the media question to begin the animation by downloading an animated supply.

let button = doc.querySelector(".animate-button");
 
 button.addEventListener("click on", () => {
   const guardian = button.closest(".picture-wrap");
   const image = guardian.querySelector("image");
   image.querySelector("supply[media]").take away();
 });

Here is that in motion:

See the Pen
Prefers Reduction Motion Technique PLUS!
by Chris Coyier (@chriscoyier)
on CodePen.

Possibly it is a good part?

We might routinely embrace the button, the button styling, and the button performance with a web component. Hey, why not?

See the Pen
Prefers Reduction Motion Technique as Web Component
by Chris Coyier (@chriscoyier)
on CodePen.