Search code examples
csshtmlgraceful-degradation

Correct way to degrade gracefully?

I have a HTML 5 drag and drop game that doesn't work in IE so I want to basically just show the answers in the form of an image. At the moment I'm using CSS to hide the game div in IE and display a div with using display: block; to show the image and hide it using display: none on browsers like Chrome.

Is this an ok way of switching content based on browser or is there another method I should be looking at? What is the correct way to do this?

Solution

  • The only draggable elements in IE are the <a> and <img> elements.

    Some people just wrap their (text) content with <a> tags that go nowhere, as is seen in Remy Sharp's demo: http://html5demos.com/drag. This works just fine in IE9, and probably older versions of IE.

    So the "correct" way to handle IE is to use those elements.