Every now and then I get the pleasure of noticing small display issues in IE7, it may be minor but some bugs can take a while to find and fix. With the lack of built into developer tools it can be really difficult to debug. (I highly recommend IE debug bar)
The most recent problem I discovered wasn’t display issues, but IE’s CSS limitations. It seems as though IE6-8 only supports 4096 rules per CSS file, it will ignore the rest. And it’ll only read the first 288kb of each CSS file.
Now the first thing you’re wondering is probably that high CSS rule number. It is high, for your typical app you should be way under that limit, but at Academia we combine all of our CSS files into one gzipped and cached CSS file. With the size of the app and the array of features one can see how it can add up quickly.
What infuriated me was the lack of CSS tools (or at least tools easily found) to give me an overview of a CSS file. Three big things: number of rules, any duplicates and the file size.
I decided to write a small javascript app called jass to do just that, it parses your CSS file and spits out the above information. It helped me debug CSS, remove a lot of duplicate styles and get IE7 in a working state.
