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.cssan

Solution 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

<htmlclass="jsno-flexboxflexboxlegacycanvascanvastextwebglno-touchgeolocationpostmessageno-websqldatabaseindexeddbhashchangehistorydraganddropwebsocketsrgbahslamultiplebgsbackgroundsizeborderimageborderradiusboxshadowtextshadowopacitycssanimationscsscolumnscssgradientsno-cssreflectionscsstransformscsstransforms3dcsstransitionsfontfacegeneratedcontentvideoaudiolocalstoragesessionstoragewebworkersapplicationcachesvginlinesvgsmilsvgclippaths">

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

<divid="container"><divid="flash">Here is the Flash animation</div><!-- <object .../> --><divid="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.