May 28, 2009

CSS filter и CSS expression Vs Internet Explorer 6

Мыши плакали, кололись,
но продолжали жрать кактус
Бородатый афоризм

IE6 не поддерживает PNG. Это знают все. Еще в нем не работают альфа-прозрачность, min-width, min-height, он криво отображает половину сайтов. По этим причинам и еще по сотне-другой других причин 99% верстальщиков желают ему скорейшей и мучительнейшей смерти. Увы, сайты под него делают: слишком он популярен среди пользователей.

Панацеей от многих глюков Internet Explorer-а незаслуженно считаются CSS filter и CSS expression. Однако панацеи не существует, даже в случае с IE.

Давайте попробуем посчитать, сколько раз expression выполняется на очень простой странице. Для примера я написал вот такой код:

Пример кода

В новом окне

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script type="text/javascript">
    var expressionCallCount = 0;
    function checkExpressionCall() {
      expressionCallCount ++;
      document.title = expressionCallCount;
    }
  </script>
  <style type="text/css">
    div#withExpressions {
      background: #cc0000;
      filter: expression(checkExpressionCall());
      padding: 10px;
      width: 50%;
    }
  </style>
</head>
<body>
  <div id="withExpressions">
     Производство, при адиабатическом изменении параметров, взаимно.
     Русло директивно привлекает органический гидроузел, открывая новые горизонты.
     Притеррасная низменность избирательно отображает рекламный бриф, что известно
     даже школьникам. Стратегический маркетинг вращает твердый гештальт, отрицая очевидное.
  </div>
</body>
</html>

Думаю, комментарии излишни: каждый вызов экспрешна увеличивает счетчик на единицу, а результат работы отображается в заголовке окна. Поводив несколько секунд курсором над слоем div#withExpressions я получил вот это:

Internet Explorer жжот

Как видите, старательный IE выполнил и перевыполнил план отрисовки слоя: за 8 секунд метаний мышкой он отрисовал слой 4960 (!!!) раз.

Expression обрабатывается каждый раз при перерисовке фрагмента окна в IE. Получается, если у вас было несколько больших PNG картинок, то ради нескольких пикселей, он отрисует заново практически весь экран. Как быть?

Забудьте про expressions, их не для этого придумали (для чего – сам не знаю ;) ). Есть средства значительно более удобные. К примеру, если вы эмулируете свойство max-width в IE, то вам нет смысла перерисовывать окно, когда оно неподвижно. Достаточно воспользоваться методом onresize, который вычислит нужные размеры при изменении самого окна браузера.

Пример кода

В новом окне

if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion)<7) {
  window.onresize = function() {
    if (document.documentElement.offsetWidth<1000) {
      document.body.style.width='995px';
    }
    else if (document.documentElement.offsetWidth>1250) {
      document.body.style.width='1240px';
    }
    else {
      document.body.style.width='auto';
    }
  }
}

А если вы решились на использование полупрозрачных PNG в ослобраузере, то попробуйте перерисовать PNG только при загрузке: это существенно сократит время вашей работы. Как перерисовывать? Да хотя бы вот так:

Пример кода

В новом окне

function redrawPNG(element) {
  element.style.filter = 'expression(...)';
  element.style.filter = '';
}

Так вы избавите себя от возможных “тормозов” на странице (увы, и такое бывает) и подвисаний нашего любимого браузера.

Конечно, правильной версткой это не назовешь, но она уже стала валидной, а это не может не радовать ;)

CSS filter и CSS expression Vs Internet Explorer 6

Оставить комментарий