F.A.Q. «Коротко о главном»
Что такое CSS Expressions?
CSS Expressions это проприетарная технология Microsoft, позволяющая в браузерах Internet Explorer (с пятой по седьмую версию включительно) использовать JavaScript в CSS-коде.
CSS Expressions это хорошо или плохо?
Это палка о двух концах. Экспрешены позволяют решить разные проблемы с некорректной блочной моделью IE и недостатками движка Trident.
С другой стороны, они ощутимо влияют на производительность.
Что значит «влияют на производительность»? Сколько слышу по интернетам, везде эта «производительность»!
Это значит, что вычисления выражения происходит каждую секунду, в которую пользователь совершает какое-либо действие с браузером: водит мышкой, печатает в поле ввода, скроллит или, не дай бог, изменяет размер окна. Это неочевидно, пока не посмотришь в диспетчер задач, хотя некоторые подмечают тормоза в работе и на глаз.
Ну, допустим. Что это за график?
График нарисовал ProcessExplorer для шестого IE, в который был загружен вот этот макет (проект еще в разработке, не могу пока раскрыть, чей это сайт):
Требование заказчика: «резина». Кроме того что резина, надо ограничить максимальную ширину, и установить минимальную.
max/min-width рулят, но только не в IE. Поэтому через условные комментарии подключаем стили:* html #wrapper,
* html #footer {
width: expression(
(document.compatMode && document.compatMode == 'CSS1Compat') ?
(document.documentElement.clientWidth < 950 ? "950px" :
(document.documentElement.clientWidth > 1300 ? "1300px" : "auto")) :
(document.body.clientWidth > 950 ? "950px" :
(document.body.clientWidth < 1300 ? "1300px" : "auto")));
}
А потом начинаем дрыгать сайт во все стороны. График, показывающий прожорливость IE прилагается.
Ого. И что теперь? Ну их в баню, эти экспрешены, пойду с заказчиком потолкую насчет фикса лучше...
Выход есть. Даже два. Только подходят они для отдельных случаев. Это одноразовые и кэшируемые экспрешены. Кратко по первым: значение вычисляется единственный раз при загрузке страницы. Подходят для добавления элементов в DOM, или для единоразового стиля какого-либо проблемного элемента. Кратко по вторым: значение вычисляется один раз до тех пор, пока не появится нужда его поменять. Подробнее по обоим: презентация Виталия Харисова, и видео-версия того же самого (второе предпочтительнее).
Во, круто, спасибо. Пойду пробовать! Это, может еще какие-то рекомендации?
Старайтесь свести использование CSS Expressions к минимуму, но если иного выхода нет (всякое в работе бывает) — по возможности оптимизируйте их. Подключайте их через Conditional Comments только тогда, когда нужно, а еще лучше — хорошенько подумайте, быть может, получится обойтись без них.
P.S. Народ, я знаю что тут полно профессионалов, которые это уже знают. Давайте не будем кидаться ссаными тряпками и кричать «баян», ладно? Вы ведь не одни на этом ресурсе, пусть молодежь учится :)
