css - 使用 modernizer,我怎样才能为 css3 动画提供回退,回退到 flash?

标签 css html modernizr

我是 modernizer 的新手,不明白如何在不支持 css 动画的情况下隐藏我的 css 动画并显示 flash 副本。我明白我用

if (Modernizer.cssanimation)

但是不明白if语句中需要什么样的代码结构。

非常感谢

最佳答案

您不需要在 JavaScript 中执行此操作。您可以使用您的 CSS 代码。 Modernizr 将 css 类添加到 <html/>标记以显示是否支持某个功能。对于动画,它是 cssanimations . modernizr 完成工作后,Firefox 20 中的 HTML 标记看起来像

<html class=" js no-flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

假设您有一个容器,里面有一个 flash 对象:

<div id="container">
    <div id="flash">Here is the Flash animation</div><!-- <object .../> -->
    <div id="css">Here is the CSS animation</div>
</div>

然后你可以使用默认样式来为不支持 css 动画的浏览器显示 flash 电影

#css {
    display: none;
}

并覆盖样式以显示 css 动画,而不是使用 cssanimations类:

.cssanimations #flash {
    display: none;
}
.cssanimations #css {
    display: initial;
}

See this demo并使用 IE8 或更低版本以及兼容的浏览器(如 Chrome)进行测试。 IE 显示“这是 Flash 动画”,而 Chrome 显示“这是 CSS 动画”。

当然,这只有在启用 JavaScript 时才有效。在禁用 JavaScript 的情况下,您甚至可以在现代浏览器中看到 Flash 动画。

关于css - 使用 modernizer,我怎样才能为 css3 动画提供回退,回退到 flash?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16138424/

相关文章:

html - IE 和 Firefox 中不存在滚动条自定义效果

CSS 'lookbehind' 使用 sass/less

html - :link not working in hover DIV

html - 为什么 flex 元素不包装?

javascript - 将 HTML 元素与 Leaflet 的 bindPopup 的 HTML 字符串连接起来

css - 使用 Modernizr 检测 -webkit-appearance

javascript - 现代化类作业

html - slider 在增加 Web 浏览器的缩放时脱离框架

html - 在 CSS Grid 中将绝对定位的元素居中

html - 为什么 body 背景颜色没有改变