Using modernizer, how can I go about providing a fallback for css3 animation, falling back to flash?

问题

I am new to modernizer and dont understand how I can hide my css animation if css animation is not supported and display a flash duplicate. I understand i use

if (Modernizer.cssanimation)

but dont understand what code structure is need in the if statement.

Many thanks

回答1:

You do not need to do this in JavaScript. You can use your CSS code. Modernizr adds css classes to the <html/> tag to show if a feature is supported. In the case of animations it's cssanimations. After modernizr did his job, the HTML tag in Firefox 20 looks like

<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">

Let's say you have a container with a flash object in it:

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

Then you can have default styles to display the flash movie for browsers not capable of css animations

#css {
    display: none;
}

and overwrite the styles to show the css animations instead with the use of the cssanimations class:

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

See this demo and test it with IE8 or below and a compatible browser like Chrome. IE displays "Here is the Flash animation" while Chrome displays "Here is the CSS animation".

Of course this only works if JavaScript is enabled. With disabled JavaScript you'll see the Flash animation even in modern browsers.

来源：https://stackoverflow.com/questions/16138424/using-modernizer-how-can-i-go-about-providing-a-fallback-for-css3-animation-fa

标签

css

html5

modernizr