Less hack background-image for IE8

Question

I want to set different background image for IE8 with Less, as it doesn't support background-size.

I have searched in Google about IE8 hacks and the result is writing code like this height: 300px\9;, ending with \9.

I have tried this, but I find it doesn't support background-image setting.

If I write like this

.backgroundImage(@url) {
  background-image: url('@{base_url}@{url}.png');
  background-image: e("url('@{base_url}x/@{url}.png')\9");
}

#demo {
  .backgroundImage('large_cloud');
}

, the Less compiler gives an error, and if I set height: 300px\9; like this, the compiler doesn't show any errors.

So, I'm very confusing. How to use Less hack for setting background-image in IE8.

"If I write like this ... the Less compiler gives an error" - the reference Less compiler [does not](http://less2css.org/#%7B%22less%22%3A%22%40base_url%3A%20%5C%22foo%2F%5C%22%3B%5Cn%5Cn.backgroundImage(%40url)%20%7B%5Cn%20%20background-image%3A%20url('%40%7Bbase_url%7D%40%7Burl%7D.png')%3B%5Cn%20%20background-image%3A%20e(%5C%22url('%40%7Bbase_url%7Dx%2F%40%7Burl%7D.png')%5C%5C9%5C%22)%3B%5Cn%7D%5Cn%5Cn%23demo%20%7B%5Cn%20%20.backgroundImage('large_cloud')%3B%5Cn%7D%5Cn%22%7D). — seven-phases-max, Jan 18 '16 at 08:59
@seven-phases-max: Actually the original version was different. Seems like OP updated code after my answer. This error now seems to be with their [integration tool](http://stackoverflow.com/questions/34847391/less-hack-background-image-for-ie8#comment57442642_34847653). — Harry, Jan 18 '16 at 10:06

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

Less is written to be compatible with proper CSS and so it may not always work properly when used for hacks. While some hacks like the height and color (in the thread linked below) may work, it is not a guarantee that all would work. If you need values with hacks to compile properly then it is safe to do CSS escaping for the value like below:

#demo{
  background-image: ~"url('myimage-400px.png')\9";
}

or as

#demo{
  background-image: e("url('myimage-400px.png')\9");
}

The above solution is purely one for the Less compiler error and I don't have much idea if that actually works in IE8 or not. If that method does not work then you may want to have a look at the options that are suggested in this SO thread.

^{Note: This question is similar to this one but it is not the same because that is about property name interpolation whereas this one is more about values.}

edited May 23 '17 at 11:59

Community

1
1

answered Jan 18 '16 at 05:09

Harry

87,580
25
202
214

Thanks for you answer, but it still not work. There is still error when compiling. – qiuyuntao Jan 18 '16 at 05:32
@qiuyuntao: What compiler are you using? The code works fine in the latest version of Less compiler. You can check it online [here](http://less2css.org/#%7B%22less%22%3A%22%40base_url%3A%20'..%2F'%3B%5Cn.backgroundImage(%40url)%20%7B%5Cn%20%20background-image%3A%20url('%40%7Bbase_url%7D%40%7Burl%7D.png')%3B%5Cn%20%20background-image%3A%20e(%5C%22url('%40%7Bbase_url%7Dx%2F%40%7Burl%7D.png')%5C%5C9%5C%22)%3B%5Cn%7D%5Cn%5Cn%23demo%20%7B%5Cn%20%20.backgroundImage('large_cloud')%3B%5Cn%7D%22%7D). – Harry Jan 18 '16 at 05:37
1

It a integration tool's problem. I write a demo with webpack loader, it's ok. So, I have found web integration tool's developer to solve this problem – qiuyuntao Jan 18 '16 at 09:38

score 0 · Answer 2 · answered Jan 18 '16 at 05:17

0

You should avoid hacks altogether. Instead, conditionally serve a stylesheet to IE 8 users that addresses the version-specific issues you're facing.

<link href="styles.css" rel="stylesheet" />
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" /><![endif]-->

Relying upon syntactic quirks often causes unintended side-effects, and generally come with a larger affected scope than advertised. Conditional Comments, on the other hand, are inherently designed to apply version-specific instruction.

answered Jan 18 '16 at 05:17

Sampson

265,109
74
539
565

I need to set image url to less，so I can't directly write as you said in html – qiuyuntao Jan 18 '16 at 05:35
Why can't you generate the IE 8 file from a .less file? – Sampson Jan 18 '16 at 05:37
Another solution, though not LESS, is to use the background size polyfill, and only load it for – Nathaniel Flick Jan 21 '16 at 11:33

score 0 · Answer 3 · answered Jan 18 '16 at 05:49

Here's the technique I use and the trick to getting it to compile when writen in LESS.

1) write your background css for older browsers that doesn't include the background-size property. eg: background:transparent url(/img/path-to-image-ie8.png) 0% 0% no-repeat;

2) write your background css for modern browsers that does include the background-size property. eg: background:transparent url(/img/path-to-image.png) 0% 0%/100% auto no-repeat;

Old browsers wont recognise the second line and will ignore it, modern browsers will overwrite the first line with the second.

The trick to getting it to compile in LESS is to write the / like this: background:transparent url(/img/path-to-image.png) 0% 0%~"/"100% auto no-repeat;

Less hack background-image for IE8

3 Answers3