Палсеич— (lusever) wrote,
Палсеич—
lusever

Тонкий CSS для Internet Explorer (expression)

Выкладываю версию доклада из 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, записи обычно дублируются:

    .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+')' ) }

IE не завис? На четырех кнопках не должен. А вот на десяти и более, он иногда виснет и вылетает. Происходит это потому, что на каждое движение мышки по странице или выполнение JavaScript–кода происходит пересчет expression. Избежать пересчета удастся, просто переопределив фильтр в начале выражения:

    .button1, .button2, .button3, .button4
    { filter: expression( runtimeStyle.filter = 'alpha(opacity='+currentStyle.opacity*100+')' ) }

В презентации к докладу, есть более развернутый пример.

Таким образом, наш экспрешн быстро применяется при загрузке страницы и последующем создании новых нодов скриптом.

Такой способ оптимизации подходит только для «статичных» элементов, которым не нужно менять свое отображение динамически. Изменение родительского класса, равнение по высоте окна и эмуляция position: static — все это проблемные участки оптимизации. Лучше их не оптимизировать, а использовать пореже.

Tags: css, expression, javascript
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 20 comments
Ура!
Я тоже счастлив

Deleted comment

Пожайлуста. Еще скажи, что понятно?
Наконец-то. Самая важная часть. Спасибо, Паша.

Насчет синтаксиса.. запятая - это такой оператор в js.
Мысль про функцию и аргументы, конечно, очень оригинальная и мне нравится. Но к сожалению, это не так. Но за идею - 5 баллов! )
Пожалуйста! Твое мнение, пожалуй, самое значимое.
Функция, как и оператор, момент спорный. Нам то все равно неизвестно на 100%.
Вот, если бы с этой точки зрения объяснить, что код как-будто находятся внутри with{}, тогда да.

makishvili

10 years ago

lusever

10 years ago

Ура! Спасибо!!!!!!

Anonymous

December 7 2007, 11:21:46 UTC 10 years ago

Большое спасибо!
Из презентации не понятна разница между решениями на страницах 20-22, можно как-то приоткрыть завесу тайны? И еще пояснить в какие моменты для обращения к свойстам будет использоваться просто style, а не currentStyle и runtimeStyle?
В живую разницу объяснял, а тут забыл написать - переопределять стоит в самом начале, иначе экспрешен выполняется "два" раза (есть нюансы). И свойство behavior слишком вредное, его лучше не использовать. Вероятно из-за того, что служит оно для подключения htc файлов.
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

Странно, но у меня без runtimeStyle. работает быстрее такая вот конструкция:

background: expression(this.cellIndex == 0 ? "#f00" : this.cellIndex == 1 ? "#0f0" : "#00f");

Не подскажите как можно оптимизировать это выражение тогда?
Сколько строк? Сделайте 100 и поводите мышкой по экрану.
Покажите оптимизированное выражение.

Anonymous

9 years ago

lusever

9 years ago

Anonymous

9 years ago