GIFS and prefers-reduced-motion

GIFS and prefers-reduced-motion

< img src="" class="> ff-og-image-inserted “> The< photo > aspect has a technique it can do where it reveals various image formats in various circumstances. If all you have an interest in is formats for the sake of

 < photo >< source srcset=" img/waterfall. avif "type =" image/avif ">< source srcset=" img/waterfall. webp" type=" image/webp" >

< img src=" img/waterfall.. However see those components there ... they can take a media Quality! Simply put, they can be utilized for responsive images in the sense that you can switch out the image for a various one, maybe even one with a various element ratio( e.g. a wide-crop rectangle shape on a big screen vs. close-crop square shape on a little screen).

The media characteristic does not need to be screen-size associated though. Brad Frost recorded this technique a while back:

<< pre rel> <=" HTML" class=" wp-block-csstricks-code-block language-markup" data-line >< image >< source srcset=" no-motion.
< img srcset=" animated.gif" alt=" brick wall" >.  That is utilizing a prefers-reduced-motion media inquiry When less motion is chosen (a system-level option), to switch a GIF for a fixed image. Smart! I saw Manuel's tweet about it get some like a few days ago:

< figure class=" wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter "> Remember our little rif on Steve Faulkner's concept from a bit back? Instead of completely stopping the GIF, you can put non-animated and animated images on top of each other (inside a << information > aspect) and permit them to be "played" as needed. We might modify that a smidge once again and have it appreciate this media question by utilizing a smidge of JavaScript:

Leave a Reply

Your email address will not be published. Required fields are marked *