Less mixin generate error on IE8

Question

I receive this error on IE8 when I'm using this mixin:

SyntaxError: Object doesn't support property or method 'map'

>>less<<

    body{.gradient; 
}

>>mixin<<

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, @start),
                               color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
                                  @start,
                                  @stop);
  background: -moz-linear-gradient(center bottom,
                                   @start 0%,
                                   @stop 100%);
  background: -o-linear-gradient(@stop,
                                 @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

Can someone explain me why IE8 rise me this error ? ty.

Answer 1

map() is a method on the Array object, but only supported in more modern browsers. LESS is using it, and that's the reason (or one of the reasons) why it doesn't work in IE8.

You can polyfill Array.map(), but it's probably not worth it in this case, as there are likely to be other modern JS features that LESS uses which will also break IE8.

But frankly all this is moot anyway. Running LESS in the browser is a really bad idea for site performance: you're delaying your site from being rendered properly until after all the JS code has loaded and the LESS parser has had a chance to run.

If you want decent performance, you should really be compiling your LESS code to CSS on the server and serving only the pure CSS to the browser. You should be thinking of doing that before we even consider whether LESS actually runs in any given browser or not.

Answer 2

Looks like you are using less.js which requires the browser with ES5 support. (map() is a method of Array.prototype which was added in ES5).

IE8 does not support ES5, but including es5-shim before less.js should fix the problem.