文章标签

当谈到媒体查询 prefers-reduced-motion 时，我经常看到一段代码片段。以下是它

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  

网络上的动画往往是一个有争议的话题。我认为，部分原因是糟糕的动画非常明显，而执行良好的动画则无缝地融入背景。如果处理得当，动画可以真正提升网站，无论它只是…

在本周的综述中，我们重点介绍了关于一个新的 <popup> 元素的提案，检查了获奖网站对 prefers-reduced-motion 的使用情况，了解了如何选择加入跨域隔离，查看了 WhiteHouse.gov 如何处理无障碍问题，并警告了 100vh 的危害…

在 Polypane 博客上（没有署名，但可能是 Kilian Valkhof (确实是))，有一篇很棒的文章，使用 prefers-reduced-data 创建网站，关于 prefers-reduced-data 媒体查询。目前没有浏览器支持，但最终你可以…

<picture> 元素有一个技巧，它可以在不同的情况下显示不同的图像格式。如果你只对为了性能而使用的格式感兴趣，也许你会这样做

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

没错，Web 动画可以是无障碍的！有时只需要多花点心思才能确保它确实如此。我们可以采取一些策略，确保我们的动画对无障碍有积极的影响，比如…

在过去几年中，我们见证了 Web 技术方面的诸多变化和分流。在 2020 年，我预见我们将作为 Web 社区朝着两个主要趋势/目标迈进：**可扩展性**和**互操作性**。让我们来分解一下…

这是 Brad Frost 和 Dave Rupert 提供的一个正宗的 CSS/HTML 技巧，他们使用 <picture></picture> 元素在 用户启用减少运动 时用图片替换 GIF 文件。以下是 Brad 的做法…

两年前，我写过关于 prefers-reduced-motion 的文章，这是一个在 Safari 10.1 中引入的媒体查询，旨在帮助患有 前庭 和癫痫疾病的人使用网络。这篇文章提供了一些关于媒体查询的背景信息，以及为什么要需要它，以及…