Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

IE6 CSS fixer 0.9 - Output cleanup

DZone's Guide to

IE6 CSS fixer 0.9 - Output cleanup

· Web Dev Zone
Free Resource

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

It's been a while since we updated our ie6 css fixer tool, that's because we're running out of bugs to fix (at least, in an automated manner). There were a few other things up for improvement though, one of which we fixed in this latest version. The newest addition has everything to do with performance and output, so read on to find what you can expect in v0.9. Like always, if you have any suggestions for new features you can drop us a note.

output mess

Functionality has always been more important than the actual output our tool generates. In the past we've always focused on implementing new fixes rather than clean up the output code we produce. And while there is still room for improvement, this latest version optimizes the output to minimize file size and further code clean-up.

We didn't include an option to minimize the actual css code, there are plenty of tools out there already that are designed to do just that, but we tackled duplicate fixes and tried to remove them from the output. This makes the resulting file smaller and makes it easier to manually remove harmful fixes from the output code.

a peek underneath the hood

Our tool is built to fix issues in a sequential manner. First the given css is analyzed and structured, then we run through the resulting list on the look-out for statements that require a fix. This is done separately for each fix checked in the gui. Each result is then appended to the previous one to form one single fix-list.

 .example {float:left; margin-left:-1px; overflow:hidden;}  ie6 css fixer output  .example {display:inline;}  .example {position:relative; zoom:1;}  .example {zoom:1;}  

Consider the first line of css above. When thrown at our fixer it returns three separate fixes. The zoom:1 and display:inline might conflict when put together though, so in a fair few cases the zoom:1 needs to be removed manually after the tool is finished. In this particular case, both the overflow and negative margin result in a zoom:1 fix. To get it out of the resulting output we have to delete two separate lines in two separate locations. This is not good.

And so we improved the script a little to avoid these duplicate lines. First the more complex fixes are executed, after that we run the easier fixes and we leave out any duplicate statements. This way, if a fix proves harmful you can simply remove the selector from the output file and rest assured that the newly introduced problem will be gone. Mind though that several different selectors can still target one single html element and like most of the improvements we make it's not entirely fail-proof (and it never will be as we lack the html to verify the final css implementation).

Try out v0.9 now if you want to see what it can do for you.

conclusion?

So what does all this mean? In short, smaller output files and less trouble fixing the output when it introduces issues of its own. It's a small improvement but it might save you some grunting and it puts a little less strain on ie6, which is already slow and unstable. If there are any more ideas or suggestions for new fixes and improvements, do let us now, version 1.0 is nearing. Enjoy!

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Niels Matthijs, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}