Less CSS - SPLessons

Less Browser Support | Modern Browsers

Chapter 16

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Less Browser Support | Modern Browsers

Less Browser Support

shape Introduction

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]


shape Description

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.


shape Note

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.


shape 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”>


shape Setting

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


shape WatchMode

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>


shape Modify Vars

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.

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


shape Debugging

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.


shape Options

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>


Less Browser Support – Options

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


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


Relevant Articles
Introduction to Less
Computer Aptitude – Important Terms