Css IE Fixes

Today I am going to give you two simple ways of creating IE Conditional Comments in WordPress. I don’t know about you but I can’t wait for IE8 and below to die! It makes a developer’s job way more difficult than it needs to be. The reality though is that we have to support these later versions until then. There are tons of solutions out on the web but I want to give you guys what I have found to be the easiest for me. If you would like to learn a little bit more about Conditional Comments before you start just head on over to the WordPress Codex and read what they have to say about them.

Option One

In the code below we are writing a conditional statement much like we write a comment in HTML we don’t want the browser to read. We start with an open bracket, exclamation mark, and two dashes. Then in the statement itself, we say “IF” something “DO” something. In this case we are saying “IF” viewing in IE8 “USE” the following style. You can enter your style between the style tags and move on. WHY I DON’T RECOMMEND THIS: It is bad practice to write style in the head of your document. It is much better to include it into a separate stylesheet. I show you how in Option Two.

<!--[if IE 8]>
<style type="text/css">
	/* css for IE 8 */
</style>
<![endif]-->

In the second example, I give you a conditional statement that is similar to the one above but instead of listing style we will simply tell the HTML tag to have a class of whatever version the viewer is using. You will notice the lt and gt after the if statement which means later than and greater than. The best part about this way of adding IE Conditional Comments in WordPress is that you can use all the same IDs and Classes that you use throughout your coding process, then simply add the class of ie6, ie7, ie8, or ie9 before your current classes and restyle them. There is an example of this below:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

<style type="text/css">
	.main-content {
             background-color: white;
        }
	.ie9 .main-content {
             background-color: blue;
        }
	.ie8 .main-content {
             background-color: red;
        }
</style>

Option Two – Preferred

Here is the problem with the above example. The first one added css directly into the html head which is a big NO NO. Current web standards tell us to keep HTML and CSS separated which is why we don’t add inline css anymore. The second one isn’t too bad except that all of your IE code would go in the same stylesheet with all your current browser styles. This means that the size of your css file will be that much larger and take a little more time to download. Plus current browsers wouldn’t need any of that extra style but it still has to download it all. This is still not a good practice.

SO WHAT IS THE ANSWER ALREADY?!?! Well the below example shows the same syntax but instead of listing out the style you want to use it calls a link to an external stylesheet. In these stylesheets you can add in the changes you need made in the older browsers and they will only download and override to your main style if the person accessing the website is using that version of IE. Now your current browsers like Chrome, Safari, Firefox, and the versions of IE above 9 will only download the main stylesheet and ultimately keep your site lightweight and mobile friendly.

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

Don’t forget that you shouldn’t just add this into the head of your document and call it a day. If you read my recent article on the proper way to add stylesheets and scripts you know that there is a proper way to add your IE Conditional Comments in WordPress. Actually WordPress has a built in way of enqueuing IE Conditional Comments and a Super WordPress Ninja Micah Wood wrote a very comprehensive article about the entire process. I figured instead of “borrowing” his information and adding it into my article I would have you guys go check it out and spread the developer love.

It may seem like extra work but this is a tried and true way to easily get your website to work in legacy browsers. As I said before, I will be elated the day we don’t have to worry about old versions of browsers but until then we have to stay on top of our game. Play around with the examples above and see which one works best for your project. Until next time…give’em hell.