This chapter, gives an overview of Less browser support. Here, the following are explained: the browsers supporting Less, using less in browser and various options for using Less in browser.
[Are you concerned about your online privacy? - Check Out The 5 Most Recommended Secure Browsers that Respect Your Privacy]

Less supports running on latest versions of modern browsers such as:
Less can be used on the client side production, but importantly there are performance implications on working client side. There is a possibility of occurrence of cosmetic issues when a JavaScript error occurs, which is a trade of flexibility vs speed. So, it is highly recommended to compile Less on the server side to get fast performance for a static web site.

Currently the PhantomJS does not implement Function.prototype.bind. So, a es-5 shim is required to run the function under PhantomJS. To run less in older browsers, use es-5 shim, so that it adds the JavaScript features required to run less.

Using Less in the Browser: It is highly recommended to use less in browser side for development purposes. The less file cannot be compiled dynamically on sever side because less is a large JavaScript file. Hence, one needs to include the less script to use less in browser. [c]<script src=”less.js”></script>[/c] For finding less style tags on the page, create style tags with the CSS compiled. [c]<link rel=”stylesheet/less” type=”text/css” href=”style.less”>[/c]

Setting options: The options can be set programmatically, all the initial link tags and the programmatic usage of less are effected by setting them on a less object before the script tag. [c] <script> less = { env: "development" }; </script> <script src="less.js"> </script> [/c] The optional way to specify the script tag is. [c] <script> less = { env: "development" }; </script> <script src="less.js" data-env="development"></script> [/c] To add to the link tags to override the settings. [c] <link data-dump-line-numbers="all" data-global-vars='{ "var": "#ddffee", "str": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">[/c]

Watch Mode : The watch mode can be enabled by setting the env option for developing and can call the less.watch() after the less.js file is added. For enabling the watch mode temporarily, add #!watch [c] <script>less = { env: 'development'};</script> <script src="less.js"></script> <script>less.watch();</script> [/c]

Modify Variable: The Modify Variable enables the run-time modifications of Less Variables by calling with new values, the Less file is recompiled without reloading. [c]less.modifyVars({ '@buttonFace': '#5B83ED', '@buttonText': '#D9EEE2' });[/c]

Debugging: By Debugging, users will get the css output rules that allows some tools to locate the source of the rule. Either specify the option dumpLineNumbers or add the !dumpLineNumbers:mediaquery to the url as mentioned above. The option mediaquery can be used with FireLESS( similar to SCSS media query debugging format) and the option comment can be used to display the line numbers in the inline compiled CSS code and also used to display the file information.

Options: Set the options in a global less object before loading the less.js script. [c] <!-- set options before less.js script --> <script> less = { env: "development", logLevel: 2, async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, globalVars: { var1: '"string value"', var2: 'regular value' }, rootpath: ":/a.com/" }; </script> <script src="less.js"></script> [/c]
Less Browser Support - Options

• Highly recommended to compile less on server side to get clean and fast output without any issues.
• PhontomJS in less need es-5 shim to run the functions.