Conditionals

Nov 2011

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):

Screenshot of final page display

Not the most graceful form of degradation, I'm sure. But it got the job done.

👋 Hi, I'm Chase
profile picture

I work at Verilogue, a medical marketing research company, as part of a rock star development team.

I enjoy writing about web design, and throughout this site share my experience as a front end developer working at the intersection of Big Data and Big Pharma.

In my spare time I like to compose music, which I link to from the playground along with all of my other side projects. I also spend a lot of time reading, mostly about web design and user experience with the occasional book on string theory or building time machines. Beyond that, I enjoy traveling, cooking, and playing World of Warcraft, where I main a Fire Mage named Wildford.

I grew up in Harrisburg, PA and graduated from Temple University in 2007 with a bachelor’s degree in Advertising and a minor in Sociology.

To learn more about me, check out my resume or let's talk on X.