Using IE Conditionals For Cross Browser Compatibility

May
27

2 Comments - LEAVE A COMMENT

What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.

IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)

For example, say you have some margin adjustments to make that effect only IE6, in the head of your HMTL document you could put this:

<!--[if IE 6]>	
<style type="text/css">
#content #left .social {
	margin-right:27px;
	}
</style>
<![endif]-->

Or, say you need it to affect IE6 and all previous versions:


<!--[if lte IE 6]>	
<style type="text/css">
#content #left .social {
	margin-right:27px;
	}
</style>
<![endif]-->

The above code tells the browser to apply these styles to IE6 and any version LESS THAN it.

You can also use the and/or syntax (& / |) if you need the styles just applied to certain versions:


<!--[if (IE 6)|(IE 7)]>	 
<style type="text/css">
#content #left .social {
	margin-right:27px;
	}
</style>
<![endif]-->

You can also use the & symbol to combine styles for one browser ex: [if (IE 6) & (IE 5)].

If you have a substantial amount of styles (or aren’t using a templating system where the header is isolated) I recommend using the conditional to link to a seperate IE stylesheet:

<!--[if IE 6]>	
<link rel="stylesheet" type="text/css" href="styles/ie6.css" />
<![endif]-->

<!--[if IE 7]>	
<link rel="stylesheet" type="text/css" href="styles/ie7.css" />
<![endif]-->

See more examples and the complete variable list over at Microsoft’s Developer Network.

Jump to Comments

2 Responses to Using IE Conditionals For Cross Browser Compatibility

  1. […] many more ways to configure this that’ll make life easier, so I’ll pass on these links to you. Enjoy, and happy bug-squashing! This entry was written by Kevin Cupp, posted on October 10, […]

  2. […] selector hacks are a decent way to target specific browsers, it is a much better practice to use browser conditionals. Rather than including individual styles, this method can be used to include an entire stylesheet […]

Leave a Reply

Your email address will not be published. Required fields are marked *