I’m at the same time proud and a little ashamed of this hack.
Regardless, I’ll share my method: using a combination of the following conditionals I was able to create two versions of this page that displayed differently depending on which browser the user viewed the page with.
<!--[if !IE]><![IGNORE[--><![IGNORE]> /* HTML instructions for non-IE here */ <!--<![endif]--> <!--[if IE]> /* HTML instructions for IE here */ <![endif]-->
Basically, I gave the image a class of
.tiltedImage and styled it in the CSS, placed it where I wanted it and told IE to ignore it. Then, in a more IE-friendly spot on the page, I called the image again, this time without giving it the
.tiltedImage class and specifying the image to render only if the browser was IE. Final page looks like this (non-IE browser display on left, IE on right):
Not the most graceful form of degradation, I’m sure. But it got the job done.
- Aaron Gustafson points out this example is more progressive enhancement than graceful degradation
Leave a Reply