Matt Snider JavaScript Resource

For a change of pace, below is a short article about CSS.

* (star) or Holly Hack

In most browsers the CSS root tag is ‘html’, so you might write:

html body {
	font-size: 12px;
}

In, IE (version 6 and lower) Holly (Bergevin, i think), found that the DOM actually starts with ‘*’, so you might write:

* html body {
	font-size: 12px;
}

Because only IE 6 and lower understands the ‘*’, all other browsers (including IE 7) ignore style declarations beginning with star. Because of this, many designers use this hack to apply styles needed only for IE6. Most commonly this is as a result of IE Box Model issue, however, if you build your DOM carefully and don’t apply heights or widths to elements with margins or paddings then you won’t have Box Model issues.

PNG Transparency

Lately, I have been using the holly hack, because IE 6 does not support PNG transparency. If you find yourself forced to use transparent PNGs, then you can use the holly hack to target the element and apply this Microsoft only filter:

* html a.png {
	background: #FFF;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’relative/path/to/my/png’, sizingMethod=’scale’);
}

The filter is a Microsoft only transformation that applies the alpha or index transparency filter for the image. I found with strict doctypes that the filter only works if you explicitly declare a background color, otherwise if you inherit a color, it seems to ignore the filter.

Today, I experimented with the YUI Animation widget and experienced difficulty getting the opacity style to apply correctly in IE 6. It was fine in IE 7, Firefox, and Opera, but IE 6 seemed to ignore the opacity style changes. A quick web search revealed that in IE 6 opaque elements need a height and width, otherwise the opacity style will be ignored.

IE6 Opacity Filter Caveat

On one of my projects, http://www.mint.com, I recently noticed severe performance degradation in IE6 the longer I kept the browser open. As it turns out a lot of the techniques used by JavaScript Frameworks, and even my own JavaScript architecture, causes memory leaks. This is especially prominent in IE6, because its memory manager has poor heuristics for detecting JavaScript leaks. It’s not as important in better browsers like, Firefox, but I do notice that Firefox slowly eats up memory as well (although this may be a documented browser memory leak). It was particularly noticeable on Mint because our JavaScript library has become bloated to well over 15,000 lines of code and IE6 just can’t handle so much leakage.

CORRECTION - Firefox memory leak, is actual a feature and not a bug. If you want to prevent Firefox from using too much memory, read this article:
http://forevergeek.com/open_source/debunking_another_myth_firefoxs_memory_leak_bug.php

Some things to improve performance are: avoid using closures, don’t do circular references, and when appending DOM elements always build from the document deep. That’s all I’m going to say, because this is a very complicated issue and I don’t have the time to do the proper analysis. However, these three articles cover everything you really need to know:

IE Leak Patterns
Closures and Circular References
Leak Patterns