Использование 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 формата обжитые места где используется прозрачность. Задумываться о будущем необходимо уже сейчас, тем более когда существуют возможности его полноценного применения.
Merci a vous!!
Огромное вам спасибо. Третье решение – просто класс!
Да, решение нормальное. Вот как бы ещё сделать чтобы дивы строку не переносили. Было бы просто супер.
Не совсем понял про дивы и перенос строк, можно подробнее, мне интересно
а я нашел такой способ
<div style=»filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’); width:819px; height:265px;»>
<img src=»image.png» style=»filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);»/>
</div>
-jimkey
Никак не получается проделать это для background. Дело в том что у меня сл. html код:
И соотв. css :
td.title2 {
height: 25px;
background-image: url(/pic/stripe2.png);
background-repeat: repeat-x;
}
Тоесть пустая строка с повторяющимся бекграундом. Как теперь применить для него ваш метод?
Почему-то вырезало код.., попробуем так:
td class=»title2″ colspan=»3″></td
Вообщем возникла проблемма именно с повторениями. Даже если сделать так, как указано в примере всё на div-ах, то бекграунд не повторяется, а растягивается в ширину.
у меня тупо дублируется изображается в тд гиф не подходит
нужно тупо убрать прозрачность эти методы вообще не один не подходит
td.polos { background: url(../images/polos.png ) repeat-x; height: 19px; }
Самому мне не приходилось сталкиваться с PNG в качестве повторяющегося фона, не было задачи, попробуйте спросить у Web 2.0. Я Вам сейчас его мыло закину
Не работает=))) К сожалению не работает ваш способ.
2 звер: к счастью он работает :-)
К сожалению не работают ссылки с пнг графики, можно как-то решить эту проблему??
2 webalex: не совсем понял какие ссылки не работают, можно уточнить?
Ссылки перехода a href не работают в Ослике, хотя в Опере работает все нормально.
Вот пример:
#png_car {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’img/car.png’, sizingMethod=’scale’);
width:149px;height:64px;
}
#png_car img { display:none; }
div class=»logo» id=»png_car» a href=»http://nashdom.od.ua/» title=»Главная» img src=»img/car.png» alt=»лого» / /a /div
извиняюсь, но там регулярки видимо, не дают отправить код нормально, пришлось в таком виде
Напишите мне по епочте, и ссылку укажите, где не работает, я постараюсь помочь
Касаемо ссылок – position:relative, повешенный на ссылку, помогает.
Вы хоть сами то в IE6 это запускали? Абсолютно нерабочий вариант. Неуважуха.
И кстати у вас если закомментировать коментарий, как в html, то его не видно =))))))) Например гляньте исходный код данной страницы, там мой 20ый комментарий побольше =)))))
Хреновый из вас верстальщик.
Ваш живой пример не пашет =)
Прошу прощения за наезды. Оказывается, что поратативная версия ie6 (устанавливается отдельной папкой и работает параллельно с ie7) просто не поддерживает полупрозрачность.
Ребят, щелкните по вкладке «рабочая версия» а там просмотрите код.. все работает превосходно.
рЫбята, все работает! (здесь жирная точка)
Спасибо добрый человек!!! Вы мне очень помогли.
Всё работает отлично, если руки не кривые.
Рад, что кому-то помог. Хорошие руки – это очень полезная вещь :)
привет. все работает. есдинственный вопрос. что и куда прописать чтобы png поставленый как id=»bg» в таблицу, повторялся. просто растягивается и все. если можно ответ на почту.ну или лучше сюда
Насчет повторяющегося фона я писал в комментариях ранее. Очень советую прочитать мою последнюю запись на тему PNG:
Полная поддержка формата PNG в IE 6 – http://handynotes.ru/2008/12/png-ie-6.html
Пишите хорошо, но вот изюминки какой-то не хватает. Наверное позитива нужно больше
Сложновато для восприятия. Я нашел простой способ без условных комментариев и нескольких CSS файлов:
#bgpng {
width:200px;
height:200px;
background: url(bgimg.png);
-background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’bgimg.png’, sizingMethod=’scale’);
}
Спасибо большое.
nikolay еще бОльшее спасибо. Его способ дейстивтельно очень прост. Даже чайнику помогло
[...] Использование PNG в IE6 и в современных браузерах [...]
Значица так.
Если отключить в IE поддержку активного содержимого (другими словами, все того же джаваскрипт), то все это не работает. Полный пипец.
Ибо когда есмть строка filter: progid:DXImageTransform.Microsoft.AlphaImageLoader и т.д., браузер тут же воспринимает ее как активное содержимое и отрубает.
ВСЁ. ПРОБЛЕМА (по крайней мере, эти способом) НЕ РЕШАЕТСЯ. БОЛЬШАЯ ЖИРНАЯ ТОЧКА. А жаль…
Это не довод.
Необходимо ориентироваться на основную массу пользователей, а не на частные случаи с «если».
Попробуйте вовсе отключить поддержку JavaScript и поработать С КОМФОРТОМ в интернет, когда повсюду так называемый Web2.0.
Не нужно самому себе создавать дополнительных проблем. Вот здесь и точка. :)
Здравствуйте.
Столкнулась с проблемой.
Картинка под углом на прозрачном фоне (png).
Мозилла, Опера нормально показывают картинку, а вот ие6 почему-то добавляет ей иний фон.
Подскажите, пожалуйста, как можно решить данную проблему?
Спасибо.
Отправил Вам письмо по электропочте
Если руки золотые, то не важно из какого места они растут.
По мне так гораздо разумнее всем png элементам добавить какой нибудь класс, и уже на класс повесить AlphaImageLoader . Таким образом не появляются лишние «паразитные» теги.
PS: самая ип*нутая каптча, она меня просто бесит :)
Зато самая полезная: ввел правильную капчу, помог в распознавании книжки :)
Автору спасибо! Метод работает.
Вопрос только один: можно ли избавиться каким-либо образом от предупреждения об активном содержимом. В «живом примере» это сообщение не вылетает.
Когда пример запускается через веб сервер, а не как из локальной файловой системы, тогда предупреждение не вылетает. Положите пример на свой сервер и попробуйте его вызвать стандартно, как http://….
*** Никак не получается проделать это для background. Дело в том что у меня сл. html код: ***
для background не недо заменять src на background
те код так и остаётся
Вышлите мне код и пояснение проблемы на мою электропочту, я постараюсь помочь Вам.
Привет, интересная статья, решил попробовать реализовать твою идею… но не получилось… у меня стоит ie6…
в область head html-файла вписал
@import url(«pngfix.css»);
создал pngfix.css
туда вписал
#date {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’img/logo+.png’, sizingMethod=’scale’);}
id date определен в главном css файле main.css как
#date { width:330px;height:210px;
font:bold 16px Tahoma;
background:url(img/logo+.png) no-repeat bottom;
text-align:center;
float:left;
}
в итоге получил непонятно что )) по-моему, снизу идет файл logo+.png на него наложен отфильтрованный logo+.png
объясни, пожалуйста, может что-то не так сделал?
Привет, вышли код по почте я помогу с реализацией
куда писать?)) всё просмотрел, ящика не нашел )))
сори за постоянные сообщения, попытался сам исправить, получилось… но есть одна мелочь непонятная
объясни, пожалуйста, что за обращение к id идет в css файле html>body #qwerty… почему не просто #qwerty или html body #qwerty
:) не заморачивайся, это трюк такой, что-бы в IE6 все нормально работало
Под каждой статьей есть: handyblogger[at]gmail.com
А удобно ли использовать id в стилях? Ведь если сайт будет напичкан картинками, то придется стили дописывать в css-файл
Да, так неудобно, попробуйте вот это решение: http://handynotes.ru/2008/12/png-ie-6.html
Здравствуйте! А как быть, если фон задан в таблице?
У меня например так:
Можно ли здесь сделать прозрачность??? У меня что-то никак не выходит…
Почему то код не отобразился…вот пример:
td width=»315″ height=»80″ background=»images/top_right_bk.png»
Здравствуйте,
дайте мне ссылку на страницу или вышлите исходный материал на почту (указана в подвале каждой статьи), я постараюсь помочь
как сделать чтобы филтр прозрачности менялся или отключался при наведении на картинку курсора:
img.Pic {filter: Alpha (Opacity=60);}
img.Pic:hover { filter: Alpha (Opacity=100);}
прозрачность включаутся, но ни как не могу добиться изменений при новедении курсора.
Хороший вопрос, – не знаю ответа :(
Админ, почему адрес эл.почты не работает? Есть вопросы…
Работает. Как вариант: Ваше сообщение попало в спам, я добавил Ваш п/я в белый список – пишите.