jquery - 如果浏览器不支持 css3，如何提供不同的样式表？

Question

我用 css3 添加了很多关键帧动画到我的网站。假设我正在从左到右设置 div 的动画。最初这个 div 的位置是 -50px，我将动画设置为 0px，但是如果浏览器不支持 css3，用户将在 -50px 处看到 div，这是不好的。

我怎样才能做这样的事情:

如果支持 css3 { CSS1.CSS别的 { CSS2.CSS}}

谢谢!

Answer 1

不需要 2 个不同的 css 文件。您可以使用modernizr使用 css 检查浏览器是否支持 css3 动画并决定测试。

如果不支持动画，您只需重新定位 div 即可。

将modernizr添加到页面

将 class="no-js"添加到 html 标签

如果浏览器不支持 CSS 动画，则“no-cssanimations”将添加到该类中

然后您可以为不支持的浏览器添加自定义规则

.no-cssanimations #yourDiv
{
   top:0px;
}

检查这个discussion使用相同的技术