Member Avatar for Violet_82
Violet_82 89 Posting Whiz in Training

HI all, I am very new to LESS, literally just started today. I had a look at some tutorials, and got my first LESS webpage - or should I say CSS - to work in Firefox, but when I moved to other browsers the CSS doesn't pick up any style. SO I re-compiled the CSS again (I am using SimpleLess) but still no browser picks up the styles. I don't think there is anything wrong with the code, it is just a simple page with a few divs and a small css:

<!DOCTYPE html>
<html>
    <head>
        <title>LESS test</title>
        <link rel="stylesheet/less" type="text/css" href="style.less">
        <script src="less-1.7.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="normalDiv"><p>This is a div</p></div>
        <div class="bigDiv"><p>This is a big div</p></div>
    </body>
</html>

CSS style.less here

@myColorSmall:#affaaa;
@myColorBig: #cccccc;
.sample-mixin{
    border:1px solid red;
    color:red;
    margin:5px;
}
@myBorder: 4px solid red;


.normalDiv{
    width:200px;
    height:200px;
    background-color:@myColorSmall;
}
.bigDiv{
    width:300px;
    height:300px;
    background-color:@myColorBig;
}
p{
    .sample-mixin;
}

Curiosuly, IE11 in the console says:

SCRIPT5: Access is denied.
File: less-1.7.0.min.js, Line: 13, Column: 5978

IE10 and IE9** work OK**, I can see the styles

IE8 and IE7 (no style shown) kindly notify me that:

SCRIPT438: Object doesn't support property or method 'bind'
File: less-1.7.0.min.js, Line: 13, Column: 27892

Chrome (no style shown) says:

less: XHR: Getting 'file:///C:/Users/.../LESS/style.less' less-1.7.0.min.js:13
XMLHttpRequest cannot load file:///C:/Users/.../LESS/style.less. Cross origin requests are only supported for HTTP. test.html:1
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/.../LESS/style.less'. less-1.7.0.min.js:13

Opera (no styles shown) reports a Unhandled DOMException: NETWORK_ERR error somewhere in here:

"function" == typeof g.overrideMimeType && g.overrideMimeType("text/css"), d("XHR: Getting '" + a + "'", z.debug), g.open("GET", a, h), g.setRequestHeader("Accept", b || "text/x-less, text/css; q=0.9, */*; q=0.5"), g.send(null), y && !w.fileAsync ? 0 === g.status || g.status >= 200 && g.status < 300 ? c(g.responseText) : e(g.status, a) : h ? g.onreadystatechange = function() {
            4 == g.readyState && f(g, c, e)

Safari for windows works
ANy idea?
On their website http://lesscss.org/usage/#browser-support they are being a bit cryptic, well that's what I think, they do say something about Function.prototype.bind but they do not say which browser does or doesn't support. Does anybody have any experience with LESS?

Edited by Violet_82
  • 1 Contributor
  • 0 Replies
  • 190 Views

Dani AI

Generated

— the console output shows two separate, common causes:

  • Chrome/Opera/Safari errors come from trying to let less.js fetch a .less file from the filesystem: modern browsers treat file:/// as an opaque origin and block XHR/CORS for local files, so the in-browser compiler can’t load the .less file. (developer.mozilla.org)
  • The Object doesn't support property or method 'bind' error means the browser doesn't implement Function.prototype.bind (IE8 and older), and less.js expects ES5 features. Adding an ES5 shim or polyfill before less.js fixes that. (developer.mozilla.org)

Practical fixes (fast):

  • Don’t open the page with file:///. Run a local server (serves files over http://localhost) and load the page from there. Example quick servers:

    # Python 3
python3 -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node (if you have npm)
npx http-server -p 8000

    After that, visit and the XHR errors should disappear. (developer.mozilla.org)

  • For IE7/8 testing, include an ES5 shim before less.js (or use a small bind polyfill). Example (place in the head, shim first):

    <script src="es5-shim.min.js"></script>
<script src="less-1.7.0.min.js"></script>

    The es5-shim package supplies Function.prototype.bind plus other ES5 helpers. (npmjs.com)

Recommended workflow:

  • Use less.js in the browser only for development. For anything more than quick testing, precompile .less → .css (via lessc or a build step) and link the compiled CSS with rel="stylesheet"; this avoids runtime JS compilation, polyfills, and cross-origin headaches. (okarinfe.github.io)

Quick checklist: open DevTools Network tab to confirm the .less is fetched over http and returns 200, include shims before less.js when testing old IE, and switch to precompiled CSS for production.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.