Тонкий 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) }

Но мы можем применить экспрешн: