С трудом сдерживаю себя чтобы не выразить эмоции матом. Мучаюсь уже пару часов.
Есть следующий HTML код
<!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>
и файл Styles.less
html {height: 100%; width: 100%;}
body {background: #6ab56e; width: 100%; height: 100%;}
@pro: `document.body.clientWidth`;
.metroContent {margin-left: @pro;}
Так вот, document.body.clientWidth не возвращает по-видимому ничего и вообще при его использовании ни один из стилей не применяется (ошибка js?), но вот window.innerWidth срабатывает «на ура». Как я понимаю разница между ними в том, что первый возвращает ширину документа, а второй — ширину окна. И первый не срабатывает потому, что дерево DOM возможно еще не построено (поправьте если ошибаюсь).
Все бы ничего, но
глядя на эту табличку я думаю, что о кроссбраузерности (а именно IE) с использованием window.innerWidth можно забыть.
Исходя из того, что я думаю о неработоспособности (см. выше) меня не удивляет что сие работает успешно (см. через webkit object inspector, opera dragonfly и подобные) на
jsfiddle.net потому, что там оно в iframe сделано на уже построенной странице с известной шириной и высотой, где данные подгружаются через json
Но тогда у меня возникает вопрос, почему в
официальной документации сей метод красуется? И многие о нем говорят и пишут, мол какая хорошая штука.
P.S. Я знаю что в моем варианте переменная @рro не содержит единицу измерения и не отобразиться корректно. Дело не в этом. В инспекторе объектов можно увидеть что по крайней мере оно присваивается (в случае использования window.innerWidth или в примере jsfiddle)
P.P.S. В хроме (а может и в других браузерах) less.js не будет работать через file:// — используйте веб-сервер
