Обзоры, статьи, исследования



Укрощение ИЕ6: отображение альфа-прозрачности PNG


32-битную поддержку прозрачности PNG поддерживают большинство современных браузеров - Mozilla 0.9+ (Firefox, Netscape 6+ ...), Opera 6+, Konqueror 3+, Safari 1.0+ , IE7... Протестировать поддержку PNG в вашем браузере можно здесь.

Однако работа для верстальщиков найдётся и здесь. Чтоб корректно отображались PNG-файлы в IE (до седьмого, в котором проблема исправлена) приходится использовать тот или иной способ укрощения IE. При это вместо прозрачных областей PNG-файлов отображается серый фон.

Примечание: Macintosh Internet Explorer 5.0+ корректно работает с альфа-каналом PNG – см. скриншот теста этого браузера. Там же гамма-тест и цветовой тест.

Для того, чтобы Internet Explorer5.5-6 стал учитывать альфа-канал PNG необходимо использовать фильтр AlphaImageLoader – либо непосредственно в стилях к картинке, либо используя скрипт. Но вначале разберёмся с механизмом работы этого фильтра, его ограничениями и особенностями.
Фильтр AlphaImageLoader

Фильтр AlphaImageLoader Отображает рисунок внутри границ объекта и между его фоном и содержанием. При загрузке изображения в формате PNG поддерживается прозрачность от 0 до 100 процентов.

Для получения дополнительных сведений о фильтре AlphaImageLoader см. веб-узел MSDN (Microsoft Developer Network) по следующему адресу:
http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx

Пример применения фильтра

Прозрачность PNG-изображений соблюдается на протяжении выделения текста. Это означает, что пользователь может выделить контент на фоне только полностью прозрачного PNG-изображения.

Проблемы с использованием фильтра:

Оказывается, Internet Explorer имеет свойство "зависать" во время подзагрузок в себя PNG файлов, объявленных в стилях, и особенно это заметно если файлы довольно объемные. Встречая прописанный в стиле фильтр AlphaImageLoader IE в первую очередь начинает загружать в себя этот PNG, останавливая при этом работу всего окна приложения. Ощущение возникает, что Explorer "повис", но на самом деле он просто качает PNG из интернета. Ситуация неприятная - пользователь не будет разбираться почему Explorer "повис" и просто его отключит.
Если для масштабирования рисунков веб-страница использует фильтр AlphaImageLoader, то в Internet Explorer рисунки могут масштабироваться с ошибками. В результате между рисунками могут образовываться промежутки, которых быть не должно.
Страница на Microsoft содержит исправление этого бага. Проблема описана на странице:
http://support.microsoft.com/kb/824463/ru
PNG нельзя поместить в src тега , только в атрибуте style. Если это необходимо, то нужно использовать тот или иной скрипт.
Среди прочих мелких недостатков применения AlphaImageLoader: иногда видны серые линии перед загрузкой картинки, нельзя использовать дополнительные фильтры и т.д.

Как видим, для более гибкого и универсального использвания преимуществ PNG в проекте, нужно использовать нечто большее, чем просто применение фильтра к картинке.

Итак, рассмотрим, наиболее популярные решения.
Способ I: Использование .htc файла

Автор метода: Erik Arvidsson

Метод предполагает использование разработки Microsoft – behavior-скрипты (формат .HTC). Подробнее читайте на официальном сайте Microsoft Developer Network:
HTC Reference

Описание метода - http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Принцип работы: проверка src изображения, если это PNG – то применяется фильтр и заменяется src на прозрачный GIF.

Вся настройка работы скрипта заключается в том, чтоб написать корректный путь к прозрачному GIF-изображению:
var blankSrc = "blank.gif";

Собственно, применение метода весьма просто:

Возможные проблемы:

Если для загрузки PNG-изображений используется AJAX, то необходимо немного изменить файл скрипта .htc:

function fixImage() {
var src = element.src;

if(src==http://+window.location.hostname+"/img/blank.gif")

src=element.getAttribute("ie6");

Описание этой проблемы и развёрнутое решение её читаем:
Таблетка, которая успокаивает IE6
Если проект использует Google Map, то для карты необходимо отменить действие скрипта:

#map img{
behavior: none;
}

Источник и обсуждение:
и снова MSIE vs PNG
По поводу производительности...

Что касается проблемы быстродействия и производительности, то все действия, выполняемые в этом файле - просто "микро" по сравнению с обработкой браузером IE инструкции filter:progid:DXImageTransform.Microsoft.AlphaImageLoader. А без этого фильтра невозможно отображение PNG в тех версиях IE, которые не поддерживают этот формат.
Ещё один недостаток скрипта: обязательно надо указывать размеры .png картинок - иначе могут отображатся некорректные размеры - большие, чем реальные, что особенно некрасиво в случае пиктограмм. Описание этой проблемы пока не найдено.
К слову сказать, этот метод использует такой «малоизвестный» сайт, как Apple ;-)
Выводы делайте сами

Способ II: описан на Alistapart

Источник: http://www.alistapart.com/articles/pngopacity

Автор метода: Michael Lovitt

Метод использует сниппет Криса Нотта (Chris Nott) по определению браузера и его версии Browser Detect Lite. Этот сниппет модифицирован для выдачи соответствующего document.write:

function od_displayImage(strId, strPath, intWidth, »
intHeight, strClass, strAlt) {
if (pngAlpha) {
document.write('
');
} else if (pngNormal) {
document.write(''+strAlt+'');
} else {
document.write(''+strAlt+'');
}
}

Для собственно показа PNG на странице, используются объекты JavaScript:






Способ III: IE PNG Fix - TwinHelix

Источник: IE PNG Fix

Автор метода: Angus Turnbull
Способ IV: использование плагина к jQuery

Источник: http://jquery.andreaseberhard.de/pngFix/index.html

Автор метода: Andreas Eberhard, 2007

Для сайтов, уже использующих популярную JavaScript-библиотеку jQuery, полезным инструментом станет плагин от Andreas Eberhard - jQuery.pngfix.js

Особенности и преимущества плагина:

скрипт прост в использовании
включена поддержка PNG-фоновых изображений
работают ссылки на прозрачных PNG-изображениях
добавлена поддержка PNG для input type=image

Тестировано разработчиком метода на Windows XP SP2 c - IE 5.5 + 6 + 7

Итак, мы рассмотрели лишь основные подходы к отображению PNG и исправлению тех проблем, которые возникают в связи с использованием этого формата.

P.S.
Для поклонников CMS Drupal создан модуль PNG Fix, также включающий jQuery PNG Fix, описанный выше.
Дополнительная информация:

Универсальная поддержка полупрозрачности в MSIE6-.
Некоторые модификации кода с учётом IE5
Фикс проблемы с неработающими линками на фоне PNG