HTML 5>条件注释和自适应动画

Question

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

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

Answer 1

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

Answer 2

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:

• http://diveintohtml5.info/detect.html
• http://www.modernizr.com