LESS CSS IE targeting?

Question

What's the best way to target IE7, 8 etc. in LESS?

Is there a method to target them or would I ideally need to load a separate style sheet?

Answer 1

As far as I know, LESS doesn't allow you to target specific browsers, only media sizes.

You'll need to do something like:

<!--[if IE]>
<link rel="stylesheet/less" type="text/css" href="ie.less" />
<![endif]-->

Answer 2

Using Paul Irish's method of IE targeting allows your IE rules to take full advantage of nesting in your main less file. http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Answer 3

Using Paul Irish's technique that Scott Simpson linked too, you can very easily include targeted selectors right beside the rest of your CSS. For example:

div {
  display: inline-block;

  .ie-8 & {
    zoom: 1;
    display: inline;
  }
}

Your compiled CSS will then be:

div { display: inline-block; }
.ie-8 div { display: inline; zoom: 1; }

I find this technique preferable to separate stylesheets because it's easier to keep track of your IE-specific CSS.