Conditionals

Today’s goal was to create a page layout where an image would display tilted and nudged off the page in browsers that render rotate transformation CSS, but would also display nicely in those that don’t (IE). This was accomplished by using conditional statements.

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.

Update

• Aaron Gustafson points out this example is more progressive enhancement than graceful degradation