Выкладываю версию доклада из ClientSide. Полная версия, с файлами и презентацией. Спустя месяц я разродился, прошу за это у всех прощения. Спасибо, что не проявляли терпение и активно меня мучали, без этого его бы совсем не было в электронном виде.
В журнале я выкладываю, самую полезную и спорную часть, про expression.
Expressions
Для того чтобы оценить плюсы и минусы «выражений» (expression), решения на основе behavior были описаны выше. Специальная конструкция expression по праву считается лекарством от всего. Благодаря ей полноценные JavaScript–выражения можно писать прямо в CSS–файле.
#id {
свойство: expression(javascript код);
}
Свойство может быть существующим или выдуманным. Китайские верстальщики часто используют несуществующее свойство star.
Самое сложное в понимании экспрешнов — это нестандартный синтаксис. Новые команды разделяются не точкой с запятой или переносом строк, а запятыми. Самое логичное, что можно предположить — это функция. Т.е. мы передаем параметры в функцию, и она уже их выполняет.
Есть несколько особенностей у expression:
- выполняется постоянно, если не переопределить CSS–свойство (см. «Оптимизация»);
- выполняется мгновенно;
- ключевое слово this необязательно, выражение this.style равносильно простому style;
- работают комментарии
/* */
, несмотря на то, что мы находимся внутри css; - можно использовать внешние функции или библиотеки, если они объявлены или подключены в html;
- пробелы могут вызывать ошибку, хотя такое встречается редко;
Оптимизация
Основа оптимизации — это переопределение CSS–свойств, которые содержат expression. Получить к ним доступ можно с помощью:
- style
- currentStyle
- runtimeStyle
style — это style конкретного html элемента. Свойства из currentStyle мы можем только читать, зато currentStyle содержит все CSS–свойства, даже те, которые не понимает сам браузер. Свойства из runtimeStyle мы можем как читать, так и переопределять, но только те свойства, которые понимает браузер. Стоит заметить, эти свойства относятся к ноду, а не к CSS–правилу. Если мы изменяем runtimeStyle, то изменения касаются конкретного нода.
Приведу пример оптимизации. Допустим, у нас есть кнопки с прозрачностью.
.button1 { opacity: .1 }
.button2 { opacity: .2 }
.button3 { opacity: .3 }
.button4 { opacity: .4 }
Для IE, записи обычно дублируются:
Но мы можем применить экспрешн:
IE не завис? На четырех кнопках не должен.
А вот на десяти и более, он иногда виснет и вылетает.
Происходит это потому, что на каждое движение мышки по странице или выполнение JavaScript–кода происходит пересчет expression.
Избежать пересчета удастся, просто переопределив фильтр в начале выражения:
В презентации к докладу, есть более развернутый пример.
Таким образом, наш экспрешн быстро применяется при загрузке страницы и последующем создании новых нодов скриптом.
Такой способ оптимизации подходит только для «статичных» элементов, которым не нужно менять свое отображение динамически.
Изменение родительского класса, равнение по высоте окна и эмуляция
.button1 { filter: alpha(opacity=10) }
.button2 { filter: alpha(opacity=20) }
.button3 { filter: alpha(opacity=30) }
.button4 { filter: alpha(opacity=40) }
.button1, .button2, .button3, .button4
{ filter: expression( 'alpha(opacity='+currentStyle.opacity*100+')' ) }
.button1, .button2, .button3, .button4
{ filter: expression( runtimeStyle.filter = 'alpha(opacity='+currentStyle.opacity*100+')' ) }
position: static
— все это проблемные участки оптимизации.
Лучше их не оптимизировать, а использовать пореже.
December 5 2007, 22:01:25 UTC 10 years ago
December 6 2007, 10:31:12 UTC 10 years ago
Deleted comment
December 6 2007, 10:32:05 UTC 10 years ago
Deleted comment
December 6 2007, 11:04:38 UTC 10 years ago
Насчет синтаксиса.. запятая - это такой оператор в js.
Мысль про функцию и аргументы, конечно, очень оригинальная и мне нравится. Но к сожалению, это не так. Но за идею - 5 баллов! )
Про оператор "запятая"
December 6 2007, 11:14:28 UTC 10 years ago
Re: Про оператор "запятая"
10 years ago
December 6 2007, 11:28:20 UTC 10 years ago
Функция, как и оператор, момент спорный. Нам то все равно неизвестно на 100%.
Вот, если бы с этой точки зрения объяснить, что код как-будто находятся внутри
with{}
, тогда да.10 years ago
10 years ago
December 6 2007, 12:12:04 UTC 10 years ago
Anonymous
December 7 2007, 11:21:46 UTC 10 years ago
непонятно ...
Anonymous
December 14 2007, 09:09:50 UTC 10 years ago
Re: непонятно ...
January 19 2008, 23:10:00 UTC 10 years ago
style это DOM, чисто теоретически, его менять плохо по двум причинам:
1. Придется учитывать код на JavaScript для сайта;
2. Вероятно, дорого по производительности.
Anonymous
December 21 2007, 10:13:29 UTC 10 years ago
V. Homskiy
Anonymous
April 20 2008, 18:10:21 UTC 10 years ago
работают комментарии /* */, несмотря на то, что мы находимся внутри css;
ну комментарии и в CSS этими-же символами задаются.
Anonymous
July 24 2008, 11:56:26 UTC 9 years ago
background: expression(this.cellIndex == 0 ? "#f00" : this.cellIndex == 1 ? "#0f0" : "#00f");
Не подскажите как можно оптимизировать это выражение тогда?
July 24 2008, 12:07:29 UTC 9 years ago
Покажите оптимизированное выражение.
Anonymous
9 years ago
9 years ago
Anonymous
9 years ago