0

I have checked the HTML5 Browser Support and I must say I'm not very happy BUT I still want to use HTML5 Animation in my website.

The thing is that I want to target all the browser versions that don't support HTML5 Animation and display only an image of the animation if an older version that the ones supported returns true.

I am aware of IE Conditional Comments, and by the chart below, only IE9 and higher support HTML5 so that will be fixed with a :

<!--[if lte IE8]>
  <style type=”text/css”>
    IE lower or equal to IE8 Replace animation coding with an image.
  </style>
<![endif]-->

HTML5 Browser Support chart enter image description here

But how do I target let's say Chrome versions lower than 25 or Opera versions lower than 12 ?

2 Answers2

0

I could do it with a detection pattern so every time your page detects on of those it could use either a different CSS or just another rule.

If you need help tell it here so i could give your more resources

Savior
  • 54
  • 9
0

If by "HTML5 Animation" you mean you're going to use a canvas, you can readily feature-detect that rather than browser-detecting. Feature detection, whenever possible, is a much better idea.

In this case, you can easily feature-detect canvas support (this particular function is from this answer):

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

Then in your JavaScript, if isCanvasSupported() is falsey, dynamically insert your fallback content instead.

More about feature-detecting:

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I guess if I dig into this I can make it happen! Thanks, I'll just have to figure out now how to insert my fallback content and create it ^^ –  May 03 '14 at 10:23
  • Thanks, Will look into it. I guess it will take me a while to get focused and get it all together but it's a start ^^ –  May 03 '14 at 10:28