расставляй правильно приоритеты и не отвлекайся на мелочи

Использование PNG в IE6 и в современных браузерах

Внимательно изучив комментарии к переводу предыдущей статьи от Джефф Крофта можно почерпнуть много интересного материала по проблеме полной поддержки формата PNG.

Как я уяснил, во первых, если мы хотим обеспечить работоспособность PNG в IE6 и ниже (а точнее IE 5.5 — 6.0), как не хочется, но нам никуда не деться с подводной лодки под названием — фильтр AlphaImageLoader от Microsoft.

Во вторых, при любых обстоятельствах, что-то придется приносить в жертву: либо валидность CSS, либо функционал движка Вашего сайта, переложив на его плечи работу по подстановке необходимого CSS, а возможно и даже (X)HTML кода, в зависимости от клиентского браузера. Не знаю что для Вас будет лучшим, но я все-таки склоняюсь в сторону некорректного CSS, т.к. лучше грузить разборками клиентскую часть, которая их проглотит даже не заметив, это я про выдумку условных комментариев от Microsoft, чем взваливать эту ношу на сервер.

В третьих, я узрел как-бы три подхода к обработке PNG изображений фильтром AlphaImageLoader:

Первый, предложенный Джефф в предыдущей статье, решает задачу с помощью JavaScript. Неплохой вариант, но мне не нравится сама идея использования JavaScript, т.к. я всегда стараюсь его использовать только в действительно остро необходимых случаях. Еще в этом варианте придется «колдовать» как в самом JavaScipt, вставляя id используемых PNG изображений, так и в HTML коде.

Второй, предложеный на www.twinhelix.com, очень похож на первый, за исключением того, что вместо JavaScript сделан с помощью внешней компоненты (шило — мыло). Выигрыш использования данного метода кроется в том, что здесь компонента сама выискивает Ваши PNG, как в img элементах, так и в div, когда они используются на фоне, и применяет к ним фильтр. Но и здесь есть неприятные мне моменты — опять необходимость внешнего воздействия через JavaScript и кроме этого, что-бы компонента корректно работала с элементами img, ей нужно «пустое» изображение (blank.gif), которое Вам придется тащить за собой.

Кстати, у самого Microsoft’а на MSDN есть замечательный пример работы с PNG в IE c помощью их собственной компоненты.

Третий, найденный на www.reinspire.net решает все только с помощью CSS, и мне он наиболее симпатичен, хотя и прибавляет ощутимые довески к коду CSS и немного к HTML.

Что-ж, внимательно все обдумав и взвесив все за и против я пришел к следующему мнению:
— мне не нужен «лишний» JavaScript или довесок ввиде компоненты;
— HTML код страниц должен быть максимально «нетронутым», т.е. не содержать в себе ничего лишнего;
— на будущее, уход от поддержки IE6, и избавление от невалидных трюков, должен быть простым и безболезненным

В итоге родилось абсолютно неоригинальное, но сподручное, решение очень похожее на третий подход.

При вставке PNG изображения в разметку страницы обрамляем его тэгом <div> с каким-либо уникальным id

<div id="png1"><img src="sample.png" width="100" height="100" /></div>

Данный код «практически не содержит ничего лишнего» и корректно отработает картинку во всех нормальных браузерах, а наличие div c id позволит обработать картинку для IE6, но об этом позже.

С фоновым PNG для блоков еще проще — совсем ничего лишнего:

<div id="bgpng1" style="width:100px;height:100px"></div>

Все, остаемся верными принципу максимальной «нетронутости». Поле для работы готово, теперь займемся его обработкой через CSS, так как была договоренность: JavaScript не использовать.

Что-бы соблюсти третий пункт о простом уходе с невалидного CSS отделяем его от основного:

В основном оставляем только обработку фоновых PNG:

html>body #bgpng1 {

    background: url(bgsample.png) no-repeat;
}

А в дополнительный, вот таким образом:

<!--[if lte IE 6]>

<style>@import "pngfix.css";</style>
<![endif]-->

выносим (что-бы в дальнейшем было легко от него отвязаться) все «шаманские заклинания» для IE6. Вот его содержимое pngfix.css:

#png1 {

        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='sample.png', sizingMethod='scale');
        width:100px;height:100px;
}
#png1 img { display:none; }


#bgpng1 {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bgsample.png', sizingMethod='scale');
}

А теперь, для лучшего укладывания в голове, пример целиком (картинки подставьте по Вашему желанию):

<!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" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>PNG in action!</title>

<!--[if lte IE 6]>
<style type="text/css">
@import url("pngfix.css");
</style>
<![endif]-->

<style type="text/css">
html>body #bgpng1 {
    background: url(bgsample.png) no-repeat;
}
</style>
</head>

<body>

<div id="png1"><img src="sample.png" width="100" height="100" alt="" /></div>

<div id="bgpng1" style="width:100px;height:100px"></div>

</body>
</html>

Вот здесь живой пример. Между прочим Markup Validation Service говорит, что: This Page Is Valid XHTML 1.0 Transitional!, так что условные комментарии от Microsoft картину не портят, чего не скажешь о внешнем CSS.

Все это довольно коряво и не очень красиво, но думаю что с ростом доли IE7 среди браузеров, PNG будет постепенно занимать свою нишу, отбирая у GIF формата обжитые места где используется прозрачность. Задумываться о будущем необходимо уже сейчас, тем более когда существуют возможности его полноценного применения.

Почитать еще по данной теме :
65 комментариев на статью:
  1. Алексей:

    По началу не работало, просто надо вточности повторить пример, тогда все заработает.

Ответить
Обязательные поля помечены *