The Bright Lines » IE6

Hack: how to enable :first-child in IE6

Wouter Bos — Sun, 31 Jan 2010 00:43:14 +0000

UPDATE: The pure Javascript routine is updated. It is now as fast as jQuery.

One of the things I most dearly miss in IE6 is the lack of support for the CSS selector :first-child. Some shortcomings in browsers can be patched with Javascript. And :first-child is one of them for sure. If you use a Javascript library like jQuery or Prototype it’s just one line of Javascript:

If you don’t like Javascript libraries you can use this pure js-code:

var tags = document.getElementsByTagName("*"); var nTags = tags.length;
for (var i=0;i
Now every first child has the class firstChild that can be used in CSS selectors. You'll get something like this:
ul li:first-child,
ul li.firstChild {
    font-weight: bold;
}

The speed
Throwing around classes through the whole HTML tree is not without a price. Certainly not if you keep in mind that Javascript in IE6 is much slower than in Firefox or Safari. So I tested what would happen if the Javascript would run in the homepage of amazon.com, a page with almost a 1000 tags. Here are the results:

Adding firstChild with jQuery:

Amazon.com homepage (1000 tags): +- 215milliseconds
Five times the Amazon.com homepage (5000 tags): +- 742 milliseconds


Adding firstChild with plain Javascript:

Amazon.com homepage (1000 tags): +- 129 milliseconds
Five times the Amazon.com homepage (5000 tags): +- 798 milliseconds



As you can see there is not much performance difference. Especially when you keep in mind that every time I ran my test page I got different results. With a page of 5000 tags it could run as fast as 481 milliseconds or as slow as 931.
Code crafting
The first test I did with the pure Javascript code gave different results because of a inefficient routine. It ran about 1/3 slower in the 1000-tag page and 4 times slower in a 5000-tag page. After consulting a colleague I was able to find a more efficient routine that could match with jQuery.
Conclusion
I think a lag of about 200 milliseconds during a page load with a 1000 tags can be acceptable. Especially since a web page of 1000 tags is already a large website to my standards. Most websites I develop have about 300 tags a page at best. If you want to use this hack, I guess it's best to test the script in the largest pages of the website. The gain isn't that spectacular: just support for :first-child. But on the other side it could really make your life as a web developer just a bit easier.
You might be tempted to patch other shortcomings of IE6 with Javascript. Don't start coding, but consider the IE7.js-script. But I must say up front that I don't have good experiences with it. The script works good in small pages with small CSS files, but you'll experience serious performance issues with medium or large websites.
Putting it in perspective
Chrome 4, by the way needed just 37 milliseconds to run the Javascript in the 5000-tag page. That's 20 times faster then IE6.


Related posts:
Alternative for :nth-of-type() and :nth-child()
For the sloppy clickers
Too advanced CSS selectors
How to overcome the limits of CSS in Internet Explorer 6

How to overcome the limits of CSS in Internet Explorer 6

Wouter Bos — Sat, 07 Nov 2009 23:36:17 +0000

Although the support of CSS selectors hasn’t improved dramatically since IE6, we can use some selectors in IE7 and IE8 that really help to style web pages without creating a class for everything that needs styling. Those selectors are:

Child selector: .parent > .child
First child selector: .parent .child:first-child
Adjacent selector: .sibling + .sibling

Where IE6 falls short

Some situations just scream for one of those three selectors that aren’t supported in IE6. Take a list like the one below for example:


Lorem

Ipsum
Dolor
Sit

Amet




Dolor

If you want to style the list items you can do so with a simple selector:

ul li {
	font: bold normal 14px/1.5em Arial
}

But what if you want to style only the li’s in the first level? Well, you either have to give all first level list items a class so you can target specifically those elements, or you have to add some more reset code to remove unwanted styling like this:

ul li { /* set styling for all list items */
	font: bold normal 14px/1.5em Arial
}

ul li li { /* reset styling for all list items except for the first level */
	font-size: 12px;
	font-weight: normal
}

Both solutions have their drawbacks:

It’s not always possible to add classes to the HTML when, for example, the HTML is generated with serverside code. This is especially true when you’re not a programmer or the serverside code cannot be accessed.
If you have lots of styles and levels it’s hard to keep track of what styling you have to reset

So let’s style it another way that’s possible in all major browsers except IE6:

ul > li { /* set styling list items in first level */
	font: bold normal 14px/1.5em Arial
}

Fix it with jQuery

Now what to do with IE6? In case I have to use incompatible selectors I call in the help of Javascript by using the popular jQuery library. That’s because with jQuery I can use advanced selectors. You’ll get something like the two snippets below

ul > li,
li.level1 { /* set styling list items in first level */
	font: bold normal 14px/1.5em Arial
}

jQuery("ul > li").addClass("level1"); /* adds class to spcific elements for IE6 */

Fix it with IE7.js

Some of you may say there’s a better solution than patching your website manually with jQuery. For years there’s a script called IE7.js which patches many shortcomings of IE6 and “upgrades” your website to IE7. I tried it but it wasn’t a succes, if not a failure for 2 reasons:

It fixes a lot of bugs but introduces a few at the same time. Eventually I still had to use jQuery to patch bugs that came out of IE7.js.
It slows your website.. IE7.js does a lot for you, but it costs CPU power. At first the time IE7.js needs to do its work is minute and you will only see a short glitch. But when your CSS file grows larger than say 1000 lines, the page will freeze for a second or more. Bad user experience.

So although IE7.js is a good initiative it doesn’t scale well for medium or large websites. You will be better off fixing little incompatibilities with jQuery or any other library that gives the freedom to use CSS selectors in Javascript. Or in some cases: don’t fix it at all.

Banning IE6 is banning visitors

Wouter Bos — Sat, 24 Oct 2009 19:19:33 +0000

This year the hunt was opened for IE6. Web developers are fed up with the browser that had been around since 2001. If you want that your website supports IE6, you limit your possibilities. So some decided to do start a campaign against IE6.

This situation is not new. Before IE6 everyone had to deal with the ancient Netscape 4.7 that just not seem to be willing to die. I decided not to support IE6 for The Bright Lines. But that was an easy decision to make: this website focuses on web developers. And those people do care about new browsers with new features. Since I could not imagine a web developer that feels comfortable with IE6 as his main browser I dropped the whole idea of supporting IE6.

But what if I would target a more general public? Than I would support IE6 without (much) hesitation. IE6 might be the most crappiest browser at the moment, it is still one of the major browsers with a market share of more than 10%. That’s still more than Chrome, Safari or Opera.

And why did you start a website in the first place? To publish content. If that’s your goal I wouldn’t risk scaring away one out of every 10 visitors. IE6 didn’t scare us from making websites in 2003, so why would it now?

By the way, if you want to have a laugh: visit this funny answer to all the “Ban IE6″-websites.

No related posts.