Making Sure Your Site Works In Internet Explorer

With Chrome usage on the rise and Firefox holding steady, more and more sites are utilizing CSS3 while neglecting to consider behavior in Internet Explorer. IE usage has been in decline now for some time, however, at almost 1/4 market share according to W3, this ugly monster cannot be ignored. When coding your site to here are 3 tips to consider:

1) :hover,:focus,:active pseudo-classes lack support for most elements in IE

Thanks to poor browser standards support in IE, many pseudo-classes like hover and focus work for anchor tags only. To address this IE pseudo-class flaw an easy all-in-one solution is to use jquery to add/remove hover/focus/active css classes for elements that should change on these events. For example, if you want the background color of a div to change on hover, your non-IE solution may look like the following:

//Warning: This won't work for Internet Explorer 8 and earlier

div{background:red;}
div:hover{background:blue;}

Instead use jquery to update your css class as follows:

$('div').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');});

Because we are using a css class rather than the pseudo-class, your css will change only slightly:

div{background:red;}
div.hover{background:blue;}

What I find convenient about this solution is you can handle additional elements hover effects by simply updating your jquery selector. Say in addition to the div background change we want to add border to all our 'li' elements on hover. The selector from above becomes:

$('div,li')

And you can add your border in css:

li.hover{border:1px solid green;}

2) Graceful Degradation for IE

In some cases you many find that a CSS3 feature does not degrade in an acceptable way for IE. If you decide to use text-shadows, for example, it's important to consider what the text will look like without them since they are not going to show up in IE. But maybe you just really love the white text on light background with a dark text-shadow. In this case you will have to come up with a workaround for IE so that the text is visible. If you are not using strict doctype then an easy solution is to define in CSS the rule you would like to use for IE, then below define your rule for 'all other browsers' using a child selector:

//Rule used by all browsers

div .innerdiv{color:black;}

//Override color for all browsers except IE

div>.innerdiv{color:white;text-shadow:1px 1px 5px black;}

In the above example the resulting text of an element with class name 'innerdiv' will be white with black text-shadow in non-IE browsers. Internet Explorer will render the text black without text-shadow, but keep in mind this trick only works when using a non-strict doctype. If, on the other hand, you are using strict doctype, then conditional statements can be used as follows:

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

Inside of the ie.css file you can include all your ie specific css

3) Using Borders To Address Lack Of Box-Shadow

Box-shadow is a great feature of CSS3 that can really help to achieve an updated look and feel you may be hoping for, however, for versions of IE prior to 9 and Firefox prior to 3.5 using box-shadow or -moz-box-shadow in your CSS file would do nothing. As a result, it is necessary to consider what your site looks like without the shadows. If you need an elements boundaries to be identifiable it's best to use a border (in most cases the same color as the box-shadow color you have chosen).