Less CSS - SPLessons

Chapter 16

Less Browser Support

Less Browser Support

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.


Less supports running on latest versions of modern browsers such as:
Less can be used on the client side production, but it is important to remember that 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.

<script src=”less.js”></script>

For finding less style tags on the page, create style tags with the CSS compiled.

<link rel=”stylesheet/less” type=”text/css” href=”style.less”>

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.

<script>
less = {
env: "development"
};
</script>
<script src="less.js">
</script>

The optional way to specify the script tag is.

<script>
less = {
env: "development"
};
</script>
<script src="less.js" data-env="development"></script>

To add to the link tags to override the settings.

<link data-dump-line-numbers="all" data-global-vars='{ "var": "#ddffee", "str": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

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

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

Modify Variables

The Modify Variable enables the run-time modifications of Less Variables by calling with new values, the Less file is recompiled without reloading.

less.modifyVars({
'@buttonFace': '#5B83ED',
'@buttonText': '#D9EEE2'
});

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.

<!-- 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>

The table below explains some of the options for less browser support.

Options Type Default
async:
Used to check whether the requested import files have the async option or not.
Boolean false
dumpLineNumbers:
Set this option to add the source line information to the output css file. It helps in debugging a particular rule.
string ‘ ‘(single quotes)
env:
Set the option to run either on development or production. In the case of production, the CSS in the local storage is cached and the messages are not output to the console.
eg: less = {env: ‘production’};
string depends on page URL
errorReporting:
Set the option when the compilation failed.
string html
fileAsync:
The option is used to set when a page with a file protocol is requested asynchronously.
Boolean false
functions:
User function and a object type.
eg:
less = {
functions: {
myfunc: function() {
return new(less.tree.Dimension)(1);
}
}
};
Can be used as a native Less function.
eg:
.my-class {
border-width: unit(myfunc(), px);
}
object User function, keyed by name.
logLevel:
Used to display the amount of logging in the JavaScript console. In the production environment, it is unable to get any logging.
2 – Information and errors
1 – Errors
0 – Nothing
Number 2
poll:
Used to measure the time between polls in watch mode.
Integer 1000
relativeUrls:
Used to adjust the URLs to be relative and by default the URLs are already relative to the entry Less file and is false.
Boolean false
globalVars:
The option is set to insert the global variables list into the code. The variables of string type should be given in quotes.
eg:
less.globalVars = { myvar: “#ddffee”, mystr: “\”quoted\”” };
object undefined
modifyVars:
The modifyVars option is quite opposite to globalVars option. It puts the declaration at the end of the base file.
object undefined
rootpath:
Used to add a path at the starting of every URL resource.
string false
useFileCache:
The option is set to use per session file cache and calls modifyVars in cache less files. It will not retrieve all the less files again.
Boolean true

Summary

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