How to avoid AjaxMin removal for IE9 and below CSS hack

Question

I'm using the following css :

.GridDraggedRow tr td.firstCol{
padding: 2px 10px 0 0;
text-align: right;
vertical-align: top;
width: 1px;
width: 1%\9; /* IE9 and below */
white-space: nowrap;
}

As you can see, I'm using a pretty ugly css hack. My problem is that this hack is removed from the minified css file I'm generating with AjaxMin. It is a post-build step in our delivery system so we're gonna stick with AjaxMin. The ajaxmin documentation explains that several comment-based hacks are allowed with the use of the 'hacks' flag, ex:

ajaxmin -css -comments:hacks GridLayout.css

Unfortunately the \9 hack is not allowed. What can I do ? Parsing the generated file isn't a good idea in my opinion.

I guess my best choice is to insert this hack in another non-minified file or directly in the html page between tags... Do you guys have a better idea ? It would be great that ajaxmin provide an exclusion section...

Yes, I agree that ugly hacks should not be used. However, sometimes it's the quickest and easiest way, and your development tools shouldn't trip you up if you need to do it. This particular example is just a small bug in AjaxMin -- it will be fixed in the next release, version **4.42**. By the way: **AjaxMin** is a separate project from ASP.NET; ASP.NET just happens to ship with a version of our tool. We are quite responsive to bug reports. Please be sure to pick up the latest version of AjaxMin from http://ajaxmin.codeplex.com, and report any issues you may find at that CodePlex project in th — Ron Logan, Jan 04 '12 at 18:16

score 0 · Accepted Answer · answered Sep 02 '11 at 13:23

You shouldn't be using any of those ugly hacks!!

Use Paul Irish's conditional comments method instead.

Use this at the opening of your HTML tag:

<!--[if lt IE 10 ]>    <html class="lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

Then, in your CSS, use this:

.GridDraggedRow tr td.firstCol{
    padding: 2px 10px 0 0;
    text-align: right;
    vertical-align: top;
    width: 1px;
    white-space: nowrap;
}
.lt-ie9 .GridDraggedRow tr td.firstCol{
    width: 1%;
}

This is much cleaner, and much more reliable.

How to avoid AjaxMin removal for IE9 and below CSS hack

1 Answers1