With the usage of IE6 finally declining the majority of us can now afford to be a bit more forgiving in our cross browser testing. Despite this in some circumstances the percentage of a site’s IE6 users is still far to high to do anything other than link a separate stylesheet and spend hours writing fixes. The following technique is aimed at those of us that have the luxury of dealing with a smaller audience of IE6 users. As a rule of thumb I aim to use technique when said IE6 audience is smaller than 10%.
So with that said what I am going to demonstrate here is a Javascript based work around for IE6 selector issues using jQuery’s powerful selector options.
First of all I should mention that a ‘do all’ script does already exist, authored by Dean Edwards the IE7 script includes a range of Javascript functions aiming to improve the experience of IE6 visitors viewing your site. The reason I tend to write a custom piece of Javascript rather than use Dean Edward’s script is simply down to control, I like to be in complete control rather than at the mercy of a third party script and the potential bugs that come along with third party scripts. I also find that the IE7 script contains I little bit more than I need and therefore adds excess weight to my pages.
What you’ll need to implement this technique are three files, two you may have already if your site is already established. Firstly a copy of the jQuery framework, a IE6 specific stylesheet and an IE6 specific Javascript file. Of course the IE6 stylesheet and Javascript file will only be executed if the visitor’s browser is IE6. We achieve this using Microsoft lifesaving conditional browser comments.
An example of how this would look in your page head
<script type="text/javascript" src="/path/to/js/jquery.js"></script> <!--[if IE 6]> <script type="text/javascript" src="/path/to/js/ie6.js"></script> <link rel="stylesheet" type="text/css" href="/path/to/js/ie6.css" /> <![endif]-->
Now what you’ll need is the selectors page of the jQuery documentation open and ready. It is almost identical to select an element in jQuery as it is in CSS but always check the documentation when in doubt.
Also take a look at some of the more advanced and 2.1 specification CSS selectors that are compatible with IE7. You’ll now able to use these and simply work around them in your ie6 Javascript/CSS technique.
An nice piece of CSS that needs fixing in IE6
p:first-child { font-weight:bold; }
p > img { border:1px solid #CCC;float:right; }
So the above CSS will work in IE7, Firefox and any other browser you may care to mention. It uses the first-child selector as well as the parent > child selector. The problem is it doesn’t work at all in IE6, this is where the technique comes into play.
To work around this in IE6 you can use jQuery to select the CSS elements for IE6 that the stylesheet can’t.
As I mentioned early on the method of selecting an element in jQuery is almost identical to that of CSS so lets have a look at selecting the elements from the CSS snippet above. Once the elements have been selected they will need to be styled but doing this via Javascript is fairly messy so this script simply adds a new class that can be styled via the IE6 stylesheet on one line.
The IE6 Javascript file
$(document).ready( function(){
$("p:first-child").addClass("paragraphfirst");
$("p > img").addClass("imginp");
});
The Javascript above calls the jQuery document ready function to start. After this the jQuery selectors get the elements from the CSS code snippet further above and adds a new class to each instance.
So now in IE6 the first instance of a paragraph is accessible as well as any images contained directly in a paragraph using the class names assigned.
The beauty of this is that this file is only loaded in IE6 so does not affect the performance of your site for anyone wise enough to be using a browser other than IE6. As mentioned it also allows easy styling of these elements using one line of CSS code.
Once the classes have been added they are styled via the IE6 only stylesheet.
The IE6 stylesheet corresponding to the Javascript above
.paragraphfirst { font-weight:bold; }
.imginp { border:1px solid #CCC;float:right; }
Hopefully given this very simple demonstration of a very powerful technique you can see the benefits of using this technique over struggling with just an IE6 stylesheet on its own. As well as saving you time in IE6 hell it also sets you free to write cleaner, more forward thinking CSS in your regular stylesheets.
You can even get a little more advanced and use jQuery wraps and appends to fix more tricky bugs and add more dividers where necessary.
The key as mentioned earlier is to keep the selector page of the jQuery documents a click away and also do some research into CSS 2.1 selectors and beyond if you are not already familiar with them.
