This week the ie6 debugging series is coming to its conclusion, and if you've been reading between the lines you might already have an idea of what to expect. Last week's article contained a string of typical ie6 bugs and fixes. The common ground between them is that all these fixes are virtually harmless, and predictable. And thus, they can be automated. Presenting today, the IE6 CSS Fixer: starter kit!
If you don't really care about the dos and don'ts of this tool, you can find the IE6 CSS Fixer in the new tools section. But I advise you to read through this article first to get a good idea of what this tool is supposed to do.
how it came to exist
Some time ago a colleague of mine was doing some ie6 debugging work. He explained to me he'd started off by running through the main css file, filtering all the pos:rel statements and applying a zoom:1 to each one he encountered. So I told him there were several other ie6 fixes like that. The word "script" hit the table and exactly one day later the first prototype of the IE6 CSS Fixer was finished. To our surprise, it worked remarkably well, and we were holding a tool that had partly automated one of the biggest issues of css development for the last couple of years.
First of all, it is very important to realize the scope of the tool we've made. It's never been and never will be our goal to make a tool that fixes all ie6 css bugs with just one single click. Also, it's not a tool that outputs clean, lean css code and provides you with the minimum amount of fixes needed for your site to work in ie6. The IE6 CSS Fixer is a bulk tool, applying known fixes to each potentially harmful element it encounters, forcing ie6 to behave like other browsers do.
If you like a clean ie6 css fix file, this tool is probably not meant for you. If you like to run through templates to manually fix the bugs in ie6, you'll probably be irritated by the excessive code this tool generates. If you care about the file size of your ie6 css file, you'd better think twice before using this tool.
But, if you think ie6 is becoming less and less of a priority but still needs support, the IE6 CSS Fixer is a valuable asset in your ie6 debugging work. It gives you a base css that fixes a good deal of problems and tries to introduce as little new problems as possible (and if it does, it warns you). It's the ideal tool for beginning and professional cssers alike to get a good head-start when fixing up ie6 while trying to save time and money.
how tot use
The use of the tool is quite simple. The IE6 CSS Fixer works on a main css which ideally contains no browser-specific fixes. Before you submit the file you select the fixes you want applied, after that it starts to analyze every css rule it finds and applies a fix if needed. The output is a new css file that contains all the fixes, grouped by type and potential harm. You can choose to generate the fixes for inclusion is a separate ie6 fix file or prepend them with the * html hack for inclusion into your main css file.
The IE6 CSS Fixer is still in alpha phase. It's nothing more than a vamped up prototype right now, but even so it already does what it is supposed to do. Future updates will include the possibility to upload your main css and download the result css as separate files.
Additional intelligence will be built in to avoid the chance harmful side effects (zoom:1 on inline elements) and I am sure bugs will pop up once it's in full use. Also, we hope to add new bug fixes if they meet the criteria for our tool.
Of course, all outside help is appreciated. If you have any suggestions, ideas or remarks, be sure to let us know and we'll do our best to improve the IE6 CSS Fixer for you.
So that's about it. You should know by now what to expect of the IE6 CSS Fixer: starter kit. It's a handy tool that solves a great deal of ie6 issues with one single click, but a miracle solution to all your ie6 problems it ain't. As long as you can live with that (and with the less than optimal output), feel free to rejoice and to let the ie6 debugging burden slip a little.
Presenting once more, the IE6 CSS Fixer: starter kit!