使用图片元素减少运动

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 免费信用额度!

这是 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 之前写过关于 减少运动媒体查询 的文章,他在文章中深入探讨了它的历史和各种使用方式。

直接链接 →