CODEWITHSUNDEEP
cssinternet-explorerless
Ronnie
Ronnie

Reputation: 5043

Internet Explorer css hack negative numbers and less compilation

I have a LESS file where I apply IE8 css specific hacks like:

#example {
   height: 46px; //ALL BROWSERS
   height: 50px\9; //ONLY IE8
}

When compiling from LESS to CSS the above example works, going with negative numbers raises a compilation error.

#example {
   height: 46px; //ALL BROWSERS
   height: -50px\9; //ONLY IE8 BUT GIVES A COMPILATION ERROR WITH LESS
}

I tried different solutions but none worked but modifying the css compiled file manually.

Upvotes: 2

Views: 414

Answers (1)

Harry
Harry

Reputation: 89760

As per CSS Spec the backslash (\) character indicates a character escape. For example, a value of \A for the content property would indicate a line break. So technically, 50px\9 is valid syntax as per CSS spec.

However when the negation operator is added prior to that, parsing fails because 50px\9 is not interpreted as a number but is rather considered as an anonymous type.

Hence we would have to form the output value by using string manipulation and escaping. Putting the entire value for the property within quotes (including the \9) and then using the ~ or the e() function would make Less treat the value as a string and then output it without the quotes.

#example {
    height: 46px;
    height: ~"-50px\9";
}

or

#example {
    height: 46px;
    height: e("-50px\9");
}

Compiled CSS:

#example {
    height: 46px;
    height: -50px\9;
}

References:

Upvotes: 2

Related Questions