IE9, прозрачность и альфа-фильтрация

В IE9 реализована поддержка цветового модуля CSS3, в том числе и его популярного свойства прозрачности. Как и другие стандартные функции, прозрачность реализована таким образом, что разметка, используемая в других браузерах, работает в стандартном режиме IE9.

В браузере Internet Explorer 8 и более ранних версиях был реализован другой механизм, подразумевающий применение эффекта прозрачности с использованием в специфичном для IE свойстве фильтра альфа-фильтра. Это приводило к возникновению проблем с совместимостью, поскольку в стандартном режиме IE9 поддерживается только прозрачность, но не альфа-фильтр. (В режимах совместимости IE9 7 и 8 по-прежнему поддерживается альфа-фильтр и не реализуется прозрачность.)

Для сайтов, на которых используются рекомендованные практики обнаружения компонентов, проблем не возникает. На таких сайтах автоматически обнаруживается поддержка свойства прозрачности в IE9, которое используется вместо фильтра. Проблема возникает для сайтов, полагающихся на обнаружение браузера, где ошибочно предполагается, что в браузере IE всегда используется альфа-фильтр вместо свойства прозрачности, и в результате этого в скрипте изменяется только свойство фильтра. При открытии таких веб-страниц в режиме документа IE9 по умолчанию эффект прозрачности отображается с ошибками. Чтобы исправить такую ошибку, сначала необходимо обнаружить стандартный компонент прозрачности, а затем — относящийся к браузеру компонент фильтрации, как было описано в предыдущих публикациях.

Пример . Рекомендациипо CSS

 .fiftyPercentOpaque
{
    opacity: 0.5;
    filter: alpha(opacity=50);
} 

Пример. Рекомендации по коду

 // Установите флаг, определяющий необходимость использования прозрачности или фильтра
// в этом браузере (или в этом режиме браузера). Рекомендуется использовать прозрачность.
var useOpacity =
   (typeof document.createElement("div").style.opacity != 'undefined');
var useFilter = !useOpacity
   && (typeof document.createElement("div").style.filter != 'undefined');

function setOpacity(el, value) {
   // В качестве значения el будет использоваться объект элемента или строка идентификатора
   if (typeof el == 'string')
      el = document.getElementById(el);

   // Убедитесь, что значение лежит в диапазоне [0-1]
   value = Math.min(1, Math.max(value, 0));

   // Задайте прозрачность или альфа-фильтрацию в зависимости от того, что поддерживается
   if (useOpacity)
      el.style.opacity = value;
   else if (useFilter)
      el.style.filter = "alpha(opacity=" + (value * 100) + ")";
}

Альтернативный код обнаружения браузера

В общем случае рекомендуется использовать обнаружение компонента вместо обнаружения браузера, хотя на использующих эффект прозрачности страницах применяется режим обнаружения браузера. Если такой подход применяется на вашем сайте, можно реализовать режим обнаружения компонента для полноценной работы с IE9. Ниже приведен код, который определяет, работает ли IE в режиме, соответствующем версиям ниже, чем стандартный режим 9.

 function browserDetectSetOpacity(el, value) {
   // В качестве значения el будет использоваться объект элемента или строка идентификатора
   if (typeof el == 'string')
      el = document.getElementById(el);

   // Убедитесь, что значение лежит в диапазоне [0-1]
   value = Math.min(1, Math.max(value, 0));

   if (navigator.userAgent.match(/\bMSIE\b/)
         && (!document.documentMode || document.documentMode < 9))
      el.style.filter = "alpha(opacity=" + (value * 100) + ")";
   else
      el.style.opacity = value;
}

Выводы

Описанная выше проблема происходит только при изменении прозрачности элемента с помощью скрипта, в котором перед изменением фильтра не проверяется поддержка прозрачности. Сайты, на которых используется только декларативная разметка CSS, по-прежнему будут работать без ошибок при косвенном изменении прозрачности посредством изменения CSS-класса элемента или с использованием псевдокласса, например, :hover.

На портале W3Schools приводятся разъяснения по применению свойства прозрачности CSS и устаревшего альфа-фильтра IE.

—Тед Джонсон (Ted Johnson), руководитель программы разработки веб-графики