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

Differences between Photoshop web design and HTML. Part 1: line height

Wouter Bos — Sat, 26 Dec 2009 00:41:15 +0000

Photoshop is *the* tool for designing websites. To illustrate its popularity: In my 10 years in web development I hardly encountered anything else. Attempts to design websites in line drawings always failed. In those few cases a design firm did sent their webdesign in Illustrator or PDF, it would have a fair chance of being converted to Photoshop by hand before any HTML was written.

But like anything Photoshop has its weak points. And since we humans tend to focus on those tiny grains of imperfections I decided to sum up the troubles you can encounter when converting a Photoshop document into to a real website.

Line height between paragraphs

One thing that definitely can be confusing is the line height of text. When increasing the line height in Photoshop by setting the ‘leading’, the extra space is added above the text. In HTML That extra space is distributed above and below the text. Below you can see the differences next to each other.

A large line-height in Photoshop adds space above the text

A large line-height in HTML/CSS adds space above and below the text

Character" src="/article-data/images/Photoshop-3.png" alt="Activate this window in the menu throught Window > Character" width="213" height="214" />

Activate this window in the menu throught Window > Character

Many designers use line-height to create paragraphs. So if you want to know how much margin you have to set on paragraphs, you have to look at line-height of the first line in a paragraph. In short: Line-height of the first line – default line-height = the margin between paragraphs. That’s why I never look at the line height of the first line of text in a paragraph in Photoshop.

Line height of the first line in a text box

Another thing to be aware of is that the line-height has absolutely no effect in the first line of a text box. So it doesn’t matter if you set the line-height to 20px or 40px. No extra white space is added on top of the text. HTML does not follow Photoshop’s behaviour.

Because of that you have to be aware that different styles with different line heights in a website can push the whole text box up or down. That’s especially important when the first line of a text box should align with some box or image on the left or right as you can see in the examples below.

The solid box and the text box are aligned (line-height: 20px).

...but when a heading is added with 40px line-height it does not align anymore.

You could fix the problem above with this CSS:

.textBox h1:first-child {
    margin-top: -10px; /* only half of the extra line-height has to be compensated */
    font-size: 20px;
    line-height: 40px;
}

The first-child selector ensures us that the negative margin is only used on something that’s on the very top of the text-box. As already said, the line-height is distributed above and below the text. So we only have to compensate for the extra space on the upper part of the line. So:

40px (line-height) - 20px (font-size) = 10px (the value for our negative top margin).

The Bright Lines » first-child

Hack: how to enable :first-child in IE6

The speed

Code crafting

Conclusion

Putting it in perspective

Differences between Photoshop web design and HTML. Part 1: line height

Line height between paragraphs

Line height of the first line in a text box