LESS and document.body.clientWidth - why doesn't it work?

T

Timur2012-08-24 00:46:32

css

Timur, 2012-08-24 00:46:32

I can hardly restrain myself so as not to express my emotions with obscenities. I've been suffering for a couple of hours now.

I have the following HTML code

<!DOCTYPE html>
<html>
  <head>
    <title>Тестовый проект</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>	
  </head>
  <body>	
  <div class="metroContent">Проверка</div>
  </body>
</html>

and the Styles.less file

html {height: 100%; width: 100%;}
body {background: #6ab56e; width: 100%; height: 100%;}

@pro: `document.body.clientWidth`;
.metroContent {margin-left: @pro;}

So, document.body.clientWidth does not seem to return anything, and in general, when using it, none of the styles are applied (js error?), but window.innerWidth works with a bang. As I understand it, the difference between them is that the first returns the width of the document, and the second returns the width of the window. And the first one fails because the DOM tree may not have been built yet (correct me if I'm wrong).
Everything would be fine, but looking at this sign , I think that you can forget about cross-browser compatibility (namely IE) using window.innerWidth.

Based on what I think about the inoperability (see above) it doesn't surprise me that this works successfully (see through the webkit object inspector, opera dragonfly and the like) on jsfiddle.netbecause there it is in an iframe made on an already built page with a known width and height, where the data is loaded via json

But then I have a question, why is this method flaunted in the official documentation ? And many people talk and write about him, they say what a good thing.

PS I know that in my version the @pro variable does not contain a unit of measurement and will not be displayed correctly. It's not about that. In the object inspector you can see that at least it is assigned (in case of using window.innerWidth or in the jsfiddle example)
PPS In chrome (and maybe other browsers) less.js will not work through file:// - use a webserver

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

Desiderata, 2012-08-24
@XAKEPEHOK

When checking your code, I get the error "TypeError: document.body is null", which is quite logical.
As a crutch, you can execute less.js after the page has loaded:

$(document).ready(function()
{
$.getScript('http://lesscss.googlecode.com/files/less-1.3.0.min.js');
});

By the way, you can check the variable like this:

.metroContent:after
{
  content: "@{pro}";
}

D

deleted-mifki, 2012-08-24
@deleted-mifki

Why not just margin-left: 100%;?