cssinternet-explorerinternet-explorer-8less

Less hack background-image for IE8


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.


Solution

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