Палсеич— (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
  • 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 

  • 22 comments