The Bright Lines » jQuery

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

jQuery 1.4 performance charts

Wouter Bos — Fri, 15 Jan 2010 11:04:47 +0000

Yesterday jQuery 1.4 was released. They celebrate it with a special website: jquery14.com. There are a lot new features, but what I definitely like is the fact that performance improves with every release. Here below are a few performance charts from that website. Since the performance is broken down by browser you can see clearly that IE is lagging behind when it comes to Javascript performance.

No related posts.

Alternative for :nth-of-type() and :nth-child()

Wouter Bos — Mon, 04 Jan 2010 21:17:14 +0000

View demo

One thing I really like about jQuery is the ease by which you can select the nth item of a list of items like this: jQuery("ul > li:eq(3)"). In CSS you would select an nth item like this: ul > li:nth-of-type(3). The problem is that :nth-of-type() is not supported at all in Internet Explorer. IE9 will support all CSS3 selectors, including :nth-of-type(), but by the time IE9 is a mature browser, Webkit and Gecko-based browsers are be able to do everything except your dishes.

So if you want to make an exception for, say, the third menu item, you have to either add a class to that menu item or select that item through Javascript. But if you don’t care for IE6, there’s a reasonable alternative:

ul > li:nth-of-type(3) equals ul > li:first-child + li + li.

Although both selectors are different, they do select the same element. But the first is not supported in IE and the second is. From IE7 and up! Sure, it’s not feasible to select the 100th item in a list, but not all lists are that long. And you can always use Javascript as a fallback.

This alternative selection method is by the way by no means equal to :nth-of-type(). With :nth-of-type() you can make a cool zebra striping without the use of Javascript.

And finally, as suggested in the title, there is also a way to handle :nth-child(3) in an almost similar fashion:

ul > li:nth-child(3) equals ul > *:first-child + * + *.

For the sloppy clickers

Wouter Bos — Wed, 28 Oct 2009 19:21:23 +0000

The best example I can think of is a series of blocks that each contain just a head, an intro and a link to an article, like the one you see here underneath.

A list of articles

The only linkable items here are the “Read more” texts at the bottom of the blocks. The source code looks like this:



Lorem ipsum dolor sit amet

		Suspendisse potenti. Pellentesque nibh ...
		Read more

Nothing wrong with the code, but why don’t we replace the li with an a-tag? That way the whole block is clickable. Much easier for the sloppy clicker. Especially when you use the :hover pseudo-class to add an effect like changing background to make the clickable area even more obvious to the user.


   
Lorem ipsum dolor sit amet

Suspendisse potenti. Pellentesque nibh ...
    Read more

ul.articles a {
	float: left;
	width: 100px;
	margin: 0 0 10px 10px;
	background: #ccc;
}
ul.articles a:hover {
	background: #eee;
}

If you like to have some control over what Google indexes you might not want that the whole text block will be indexed as important text, but just the heading. In that case you might take a different approach. You could put the link in the head of the article block and let Javascript take care of making the whole blocks linkable. Then you’ll have to use some code like this:



Lorem ipsum dolor sit amet

Suspendisse potenti. Pellentesque nibh ...
    Read more

jQuery("ul.articles a:odd").each( function() {
	var anchor = this
	jQuery(this).parent("li").click( function() {
		document.location.href = jQuery(anchor).attr("href")
	})
	jQuery(this).parent("li").mouseover( function() {
		jQuery(this).addClass("alternateBackgroundColor")
	})
	jQuery(this).parent("li").mouseout( function() {
		jQuery(this).removeClass("alternateBackgroundColor")
	})
	jQuery(this).parent("li").addClass("link")
})

This is just an example, but I hope that I could show you what alternatives you have when you add a link to a website.