Forget IE

IE6 is the biggest headache. And IE7 isn't much better. I'm not holding my breath for IE8 especially with its dismal performance in the Acid 3 test. I love the humorous pie chart that reports that over half of a web developer's time is spent catering to IE, swearing at Bill Gates and swearing in general. It is so true.

I'd like to move on past IE's limitations. I'd like to be able to do more CSS2, stop worrying about the broken box model, and throw away my CSS hacks cheatsheet. That is the vision of Dean Edwards in his IE7.js and IE8.js libraries. Dean Edwards is a pioneer of JavaScript techniques and a true authority in the JavaScript world. His perspectives are sometimes controversial, but no one disputes that Dean Edwards writes some elegant and speedy code.

His popular open-source contributions include Packer, a JavaScript compressor/obfuscator, cssQuery, a fast css selector engine, and base2, an object oriented JavaScript framework.

But I'd like to talk about my experience with his lesser-know library IE7. From what I understand, it was named IE7 with the assumption that IE7 would correct all the problems the script fixed. After all, he had made the fixes in JavaScript in a matter of months so surely the IE development team could make the fixes given 5 years and access to the source code. Unfortunatly Microsoft blew it and Dean recently released IE8. He considered other names like "IENext" but decided to follow convention.

Anyway, the following is a list of advanced selectors and features that I find so nice to use--and with IE8.js, I CAN!

1. Apply styles by attribute:
   input[type=text], input[type=submit], input[type=password], etc.
2. Add a focus effect:
   input[type=text]:focus, textarea:focus, etc.
3. Add a hover to any element:
   input[type=button]:hover, li:hover, tr:hover, etc.
4. Apply styles to disabled elements:
   input[type=submit][disabled], input[type=text][disabled], etc.
5. Styling by sibling selectors:
   h1 + *, p + table, p + ul, etc.
6. Immediate descendents:
   #content > *, #nav ul > li, etc.
7. Specifying opacity in one line:
   opacity: 0.66
8. Define minimum and maximum widths and heights:
   min-height: 50px; max-height: 100px; min-width: 200px; max-width: 500px; etc.
9. Before and after pseudo-selectors:
   q:before, blockquote:before { content: "“" }, etc.
10. Transparent PNG backgrounds:
    .print_icon { background: transparent url(../images/printer.icon.png) no-repeat 0 0; }
11. Ignore the broken box model: (use width + padding or height + padding)
    #content { padding: 10px; width: 400px; height: 400px; }

Limitations include the fact that selects are still stupid, inputs still cannot be transparent, and PNG background images cannot be positioned or tiled.

Although IE8.js isn't perfect, download it and see what you are missing!