这是 Brad Frost 和 Dave Rupert 的一个真正的 CSS/HTML 技巧,他们使用 <picture>
元素在用户 启用了减少运动 时将 GIF 文件替换为图像。 以下是 Brad 实现该功能的方法
<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>
这太棒了! 它让我想知道除了无障碍性和响应式图像之外,这种图像切换技术还能以其他方式使用吗?
此外,值得注意的是,Eric Bailey 之前写过关于 减少运动媒体查询 的文章,他在文章中深入探讨了它的历史和各种使用方式。