How to avoid AjaxMin removal for IE9 and below CSS hack


Tags: css,ajaxmin

Problem :

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...



Solution :

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.


    CSS Howto..

    CSS element class - Height differs based on content, how to fix?

    How to move this structure to the right without using float?

    Show missing CSS in Google Chrome

    How do I correct overlapping spacing error in CSS when it wraps text?

    how to base a css rule on inherited value of dir attribute

    Background color does not show up when scrolling to the right

    How can I toggle between multiple .css with jquery?

    Attempting to show logo using 'content' from CSS

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    How to use 3-digit color codes rather than 6-digit color codes in CSS?

    How do I create 3D perspective using CSS3?

    YUI Calendar: how does it load the Sam's Skin CSS?

    how to detect a url path with jquery and change css

    How do I modify the Datatable header style in PF Dynamic Columns?

    How to set select icon bigger

    CSS: How to get rid of the extra space of first line of a paragraph?

    How to make divs float on both ends of another div?

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    how to position a css sprite as background for another class

    How can a URL fragment affect a CSS layout?

    How to stop the queuing of multiple animations based on occurrence jquery

    How to add materialize css to an angularjs project?

    Flexslider - How to make two slider functioning together (images and a paragraph text) using a single directionNav?

    jQuery .css, how to translate it into Javascript

    How to Jump-Start PhoneGap App Development [closed]

    How to Implement different backgrounds on scroll [closed]

    How to remove reference of specific CSS files files from View

    CSS: how to properly style horizontal menu bar with background image and centered entries separated by icons

    How do I evenly space these links within my navbar div?

    How can I add a scrollbar to a DIV that contains a table?