CSS-выражения

CSS-выражения

CSS-выражения (англ. CSS expressions) были впервые представлены в Internet Explorer 5.0, который позволял назначать JavaScript-выражение в качестве CSS-свойства. Например, следующий код позволит выставить позицию элемента в зависимости от того, какого размера окно браузера.

#myDiv {

position: absolute;

width: 100px;

height:100px;

left: expression((document.body.offsetWidth > 110 ?

document.body.offsetWidth – 110 : 110) + "px");

top: expression(document.body.offsetHeight - 110 + "px");

background: red;

}

Не самый лучший способ решения поставленной задачи, но в качестве примера его достаточно.

Проблема с этими выражениями в том, что они вычисляются гораздо чаще, чем многие могли бы ожидать. Они вычисляются не только во время визуализации страницы и изменения размеров окна, но также при скроллинге и даже когда пользователь просто водит мышкой по странице. Это несложно отследить — достаточно добавить счетчик в искомое выражение.

Единственный способ избежать огромного числа вычисления CSS-выражений — использование одноразовых выражений, когда после проведения всех необходимых вычислений они устанавливают свойство CSS-стиля к какому-то конечному статическому значению, заменяя им CSS-выражение. В том случае, если необходимо динамически изменять свойство CSS-стиля по мере пребывания пользователя на странице, мы можем применить прием с обработчиками событий в качестве альтернативы. Если избежать использования CSS-выражений на странице не удается, то нужно помнить, что они могут вычисляться тысячи раз и тем самым повлиять на производительность всей страницы.