Writing browser specific hack in Less (for

Question

I want to do something like this (Source - CSS Tricks Article):

#veinte { color/*\**/: blue\9; }

in Less for IE7 and IE8 but it gives errors.

The below works:

#diecinueve { color: blue\9; }

but there are some elements that I dont want to be called in IE9. e.g. I have something in IE9 with :before elements but because IE8 doesnt support it, I want to give it a padding only in IE8.

But this

#veinte { color/*\**/: blue\9; }

gives errors in Less. I tried this

#veinte { color~"/*\**/": blue\9; }

but that also doesnt work. Does anyone know how to do this in Less?

Do the CSS hacks provide what you need? Or is it just that the LESS compiler gives you errors? — KatieK, Jan 22 '13 at 18:49
To my knowledge, it cannot be done in LESS. The compiler does not allow either the `*` or the `\` or `/` in the property name. It also does not, to my knowledge, have a way of escaping an entire string _that **includes** the property name itself_. — ScottS, Jan 22 '13 at 19:15
Don't think you would still be looking for an answer to this one mate but judging by the no. of views this question has got I felt an updated answer would be helpful, so added one. — Harry, Oct 03 '14 at 16:27

score 4 · Answer 1 · answered Sep 28 '14 at 03:29

4

Property name interpolation is possible with Less v1.6.0 and above. Hence this hack can be implemented as shown below:

@hack: ~"/*\**/";
#veinte { 
    color@{hack}: blue\9; 
}

Compiled CSS:

#veinte {
    color/*\**/: blue\9;
}

answered Sep 28 '14 at 03:29

Harry

87,580
25
202
214

score 3 · Answer 2 · edited Aug 07 '13 at 11:03

Are you including Modernizr or another shiv script that adds classes directly to the HTML element?

Thus something like this:

.selector {  
  ...rules...  

  .lte8 & {  
    ... < IE9 styles ...  
  }  
}

Might suit your needs. (see: nesting selectors, using the &)

Otherwise, since you're being hacky anyway, why not just reference a different .less compiled output sheet in a conditional comment?

score 1 · Answer 3 · edited Oct 26 '18 at 09:36

1

You can try this one: background-position:~"-150px 0px\9" width:~"300px\9";

example:

.test{
    width:~"300px\9";
}

edited Oct 26 '18 at 09:36

Blaze

16,736
2
25
44

answered Oct 26 '18 at 09:16

Hansa Valva

11
1

Writing browser specific hack in Less (for

3 Answers3

Linked