Презентация и аудио доклада с ВСТ-встречи http://www.webhitech.ru/party/

1. Систематизация экспрешнов в IE
Комаров Роман

2. Экспрешны
— Насколько они нужны? А нужно ли вообще что-то править под IE?
— За что разработчики не любят экспрешны (не умеют готовить?)
— Объективные недостатки имеющихся подходов к экспрешнам.

3. Важно!
Экспрешны — не универсальное решение всех проблем, но при
правильном применении способны существенно сократить время
разработки.
Предлагаемая система не является универсальным комбайном а ля
печально известная библиотека IE7, это набор точных инструментов,
при применении которых необходимо думать.

4. Правильный рецепт приготовления экспрешнов
— Перезаписываемые («одноразовые») экспрешны.
— Постоянно выполняющиеся экспрешны с условиями («кешируемые»)
А кроме того:
— Автоматическое получение эмулируемых свойств.
— Отделение экспрешнов от таблиц стилей во внешний .js файл.
— Гибкость вариантов применения экспрешнов.

5. Одноразовые и кешируемые экспрешны
Про самые основы уже есть достаточно материалов:
— «Тонкий CSS для Internet Explorer», Павел Корнилов (ClientSide 2007)
(примерно 40-й слайд)
— «CSS Framework своими руками. Практика» ,
Виталий Харисов (Я.Субботник в январе 2009)
Вкратце:
— Всё что можно выполнить только один раз раз — нужно выполнить
только один раз.
— А для всего остального, перед вычислением всех значений, узнавать
нужно ли это делать.

6. Автоматическое получение эмулируемых свойств
Почти всё, что нам нужно, мы можем получить из свойства
currentStyle.
Например:
— parseInt(t.currentStyle['max-width'], 10);
— t.currentStyle.opacity * 100;
— t.currentStyle['content']; // хотя тут ещё надо парсить…
Таким образом, любые правки в проекте мы будем вносить только в
оригинальные таблицы стилей, забыв про хаки IE.

7. Отделение экспрешнов от таблиц стилей во внешний .js файл
1. Разделение поведения (behavior!) и представления.
2. Повторное использование кода.
3. Отсутствие проблем с подсветкой кода в редакторах.
4. Предотвращение ошибок браузеров, связанных с неверной
интерпретацией содержимого экспрешнов (привет, Safari!)
5. Ну и все прелести яваскрипта *доступные IE.

8. Отделение экспрешнов от таблиц стилей во внешний .js файл
ie.js
var IExpr = {
fix: function(t) {…},
target: function(t) {…},
hover: function(t) {…},
…
}
ie.css
.example1 {
zzz:expression(IExpr.positioning(this));
}
.example2 {
behavior:expression(IExpr.fix(this,'hover'));
}

9. Гибкость вариантов применения экспрешнов
— Чаще всего все исправления применяются к одному свойству.
— Самый простой способ для одноразовых экспрешнов:
zoom:expression(IExpr.iframeShim(this),this.runtimeStyle.zoom=1);
— И для постоянно выполняющихся:
zzz:expression(IExpr.positioning(this));
Ну и, кроме того, удобно применить сразу много исправлений в одном
экспрешне:
.example {
behavior:expression(IExpr.fix(this,'before','after','target'));
}

10. Различные варианты применения эскпрешнов
Вариант со вспомогательной функцией fix уменьшает количество кода
в CSS, кроме того он позволяет «отключать» постоянно
выполняющиеся функции.
Однако, в случае, когда необходимо применять к одному элементу
несколько экспрешнов по разным селекторам, этот вариант не
подходит, т.к. нельзя дополнять свойство behavior, можно только
переопределять его.
На самом деле, я сейчас тестирую одну штуку, которая позволит добавлять
любые экспрешны из любого селектора без конфликтов, но пока про неё
ничего не скажу ;)

11. Практические примеры
1. max-width
2. :hover
3. :before

12. max-width
maxWidthPx: function(t)
{
if (t.parentNode.scrollWidth != t.w) {
t.w = t.parentNode.scrollWidth;
var max = parseInt(t.currentStyle["max-width"], 10);
t.style.width = 'auto';
if (t.scrollWidth > max) {
t.style.width = max;
}
}
return 1;
},

13. :hover
hover: function(t)
{
var hoverClass = t.className ?
t.className.replace(/([^s]+)/g,'$1_hover') : 'hover';
t.attachEvent('onmouseover',function() {
t.className += (' ' + hoverClass);
});
t.attachEvent('onmouseout',function() {
t.className = t.className.replace(new RegExp(' ' + hoverClass,'g'),
'');
});
},

14. :before
before: function(t)
{
t.insertAdjacentHTML('afterBegin','<span class="' + (t.className ?
t.className.replace(/([^s]+)/g,'$1_before') : 'before') + '"
style="behavior:expression(IExpr.fix(this,'renderContent'))"></span>');
},
renderContent: function(t)
{
var content = t.currentStyle['content'];
if (content && content.length > 2) {
if (content == 'none' || content == 'normal') {
t.removeNode(true);
} else {
t.insertAdjacentText('afterBegin', content.slice(1,-1));
}
}
},

15. Спасибо!
— http://kizu.ru/lib/ie/
— kizu@kizu.ru