В последнее время появилось не мало способов корректно использовать формат PNG в дизайне сайтов. Не вдаваясь в детали скажу что формат PNG был разработан в свое время на смену формату GIF, в то время еще защищенному авторскими правами (сейчас уже свободному).
PNG корректно поддерживается всеми современными браузерами, кроме до сих пор доминирующего (здесь я всплакнул) Internet Explorer 6. То есть IE6, конечно поддерживает (читай воспроизводит) PNG, но не поддерживает полупрозрачность. А это, на равне с поддержкой 16-ти миллионов цветов, основное преимущество PNG над GIF.
Справедливости ради, стоит заметить что отказаться от GIF
в пользу PNG не получится, так как PNG не поддерживает анимацию,
да и вес иногда оставляет желать лучшего.Недавно, борясь со сложной версткой, в которой присутствовали иконки с тенями на фоне хитрого градиента я подумал, а почему бы не задействовать PNG? И полез рыть Сеть. Оказалось что есть несколько способов внедрить сей замечательный формат. Я конечно поделюсь ссылками на найденое, но здесь приведу описание самого простого на мой взгляд способа “включения” PNG в дизайн сайта.
Этот способ, в отличии от других не использует javascript, a основан на .htc скрипте, который нужен нам только для IE 6 и IE 5.5 для корректного отображения полупрозрачности. Скрипт никак не повлияет на остальные браузеры.
Все что нужно сделать для того чтобы скрипт заработал, это прописать в css-файле для IE6 вот эту строку:
img {
behavior: url(iepngfix.htc)
}Если вы не используете отдельный файл стилей для Интернет Эксплорера с помощью Conditional Comments, рекомендую использовать Star HTML хак:
* html img {
behavior: url(iepngfix.htc)
}Затем положить сам файл iepngfix.htc туда где вам удобно, в пределах домена (скрипт не может быть вызван с другого домена в целях безопасности), и изменить путь к нему в CSS.
Еще один момент. Для корректной работы скрипта нужен однопиксельный прозрачный blank.gif, который можно взять здесь или сделать самому.
Если однопикслельный gif лежит не в той же папке что и .htc скрипт, то необходимо открыть iepngfix.htc, в начале файла найти строку
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == "undefined") var blankImg = "blank.gif";И изменить имя файла и путь к нему. Вот и все. Никаких дополнительных настроек и кода не нужно.
Можно спокойно использовать PNG и как картинки и как фоновое изображение в дизайне ваших сайтов.
В случае использования PNG для фоновых изображений, можно смело позиционировать его, повторять по обеим осям, в общем все как обычно.
Сайт разработчика скрипта не изобилует обьяснениями, но они почти и не нужны ;) Пользуйтесь на здоровье.
> Справедливости ради, стоит заметить что отказаться от GIF
> в пользу PNG не получится, так как PNG не поддерживает
> анимацию,
Поищи в интернете что-нибудь про mng.
использование .htc файлов конечно удобное дело, но в моем случае неприменимо, т.к. имеет очень досадный недостаток – невозможно в CSS файле подключать .htc файл с другого домена, так что фраза “Затем положить сам файл iepngfix.htc туда где вам удобно и изменить путь к нему в CSS” не совсем верна… куда удобно не получится.
У меня все что связано с графикой хранится на поддомене images.* …
[quote post="103"]Поищи в интернете что-нибудь про mng.[/quote]
Да чего там искать? Я о нем даже упоминать не хотел. Формат, который на данный момент поддерживается только Konqueror’oм…
[quote post="103"]У меня все что связано с графикой хранится на поддомене images.*[/quote]
ну .htc вроде не совсем графика, можно было бы и к скриптам отнести… Дополнил статью.
[quote comment="736"]> Справедливости ради, стоит заметить что отказаться от GIF
> в пользу PNG не получится, так как PNG не поддерживает
> анимацию,
Поищи в интернете что-нибудь про mng.[/quote]
А почему никто не говорит про APNG он уже вроде бы как работает на альфах FF.
Ещё не придумали фильтр для IE чтобы APNG показывал ? :)
Или как всегда microsoft замедляет технологические продвижения?
[quote post="103"]А почему никто не говорит про APNG он уже вроде бы как работает на альфах FF.[/quote]
Да ну это все не серьезно. По крайней мере пока.
Здорово, спасибо за инфу, попрактикуем и этот способ ;).
to Dimox
Напишешь потом как успехи ;)
[quote post="103"]Справедливости ради, стоит заметить что отказаться от GIF в пользу PNG не получится, так как PNG не поддерживает анимацию, да и вес иногда оставляет желать лучшего.[/quote]
Время анимации в GIF ушло безвозвратно для этого есть Flash.
Насчет веса это вообще-то не правда есть два вида PNG, PNG8 в котором используется палитра в 256 и который в 99 случаях из 100 дает файл меньших размеров чем GIF иногда значительно меньших и PNG24 который жмет без потери качества и поэтому всегда больше GIF.
Подробная информация по ссылкам:
Креативное использование полупрозрачных PNG в веб-дизайне
PNG8 против GIF
разве в мозилле mng не поддерживается?
помнится у ещё Phoenix троббер был в мнг нарисован
to Евгений
Процитирую одного из участников беседы в ru_webdev из приведенной тобой ссылки:
Тоже самое относится и к Flash. Не всегда и не везде.
[quote comment="746"]разве в мозилле mng не поддерживается?
помнится у ещё Phoenix троббер был в мнг нарисован[/quote]
Mozilla перестала поддерживать mng.
[quote post="103"]…пнг-8 и пнг-24 — мощные инструменты, но только будучи применённые с умом и в нужном месте. не надо сотворять себе кумира и менять все гифы на пнг…[/quote]
в этом утверждении нет ни одного аргумента, даже обсуждать нечего.
Вот вам пример:
В шапек этого сайта использован sprites.gif (почему у него такие размеры это другой вопрос)весит он 8 716 байт, я пережал его в png8 получилось 1 213 байт, проверить можете сами, если не верите мне.
Если вам нужна анимация то, конечно, png8 не заменит gif, в остальных случаях стоит отдать предпочтение png8.
to Евгений
Так никто и не спорит. Часто png предпочтительнее, но не всегда.
И уж тем более неуместна фраза “Время анимации в GIF ушло безвозвратно для этого есть Flash”.
Поэтому и обсуждать нечего. Не всегда и не везде.
Да, согласен.
Но вернемся к теме статьи, нужно обратить внимание на тот важный момент, что IE6 нормально работает с двоичной (как в gif либо пиксель прозрачен, либо нет) прозрачность в png, проблемы только с альфа-каналом, которого в gif вообще нет. Это значит что прозрачный gif можно заменить прозрачным png8 без всяких скриптов, а вот если нужны более сложные эффекты (полупрозрачность, склаживание границ) то нужно брать png-24 (PhotoShop не умеет создавать png-8 альфа-каналом) и прибегать к различным скриптам.
[quote post="103"]Да чего там искать? Я о нем даже упоминать не хотел. Формат, который на данный момент поддерживается только Konqueror’oм…[/quote]
и FF3.0a =)
Хм… Я немного погуглил, и нашёл замечательный ЯваСкрипт подключаешь файлом и все ПНГ работают без никакого шаманства. Просто вставить одну строчку с файлом подкючения .js и всё.
Но: по моему, он фоны не берёт. Т.е. если пнг на фоне, то альфа будет опять не корректно работать :(
[quote post="103"]Но: по моему, он фоны не берёт. Т.е. если пнг на фоне, то альфа будет опять не корректно работать :([/quote]
Сплошное расстройство :) Буду продолжать юзать этот скрипт.
Картинки то отображаются, а вот фоновые изображения – нет.
[quote comment="835"]Картинки то отображаются, а вот фоновые изображения – нет.[/quote]
Не знаю, не знаю, я лично проверял. Проверьте все еще раз.
есть одно но. данный скрипт решает проблему с img, а что если я png фоном кладу?
[quote comment="853"]есть одно но. данный скрипт решает проблему с img, а что если я png фоном кладу?[/quote]
А вы попробуйте сначала. Скрипт работает и для фоновых изображений.
[quote post="103"]В случае использования PNG для фоновых изображений, можно смело позиционировать его, повторять по обеим осям, в общем все как обычно.[/quote]
Что то не получается ни позиционировать, ни повторять. Это действительно возможно?
body {
background-image:url('checkerboard.gif');
}
.square {
width:500px;
height:500px;
border:1px solid #000;
behavior: url(iepngfix.htc);
background:url('opacity.png') repeat-x 100% 100%;
}
Не работает ни позиционирование, ни повторение. Как быть?
Ринат, код проглотился движком. Покажи пример.
хм…. к сожалению, с .htc файлами некоторых постигнет большой облом…
HTC components in XP Service Pack 2
HTC components in XP Service Pack 2 (2)
>Этот способ, в отличии от других не использует javascript,….
>Затем положить сам файл iepngfix.htc туда где вам удобно
Автор у вас противоречия. Не стоит дурить публику.JS – есть JS в каком бы файле он не записывался…
PVasili
htc != js
не работает прозрачность на фоновых пнг в обычных таблицах=(((( всю голову уже поломал =((((
[quote comment="3508"]не работает прозрачность на фоновых пнг в обычных таблицах=(((( всю голову уже поломал =(((([/quote]
позор на мои седины, забыл td в css прописать. работает все. Спасибо )
Данный метод имеет все же один серьезный недостаток – .htc не “кушается” валидатором. Именно по этой причине мне пришлось отказаться от данного хака в свое время.
Хотя было бы здорово, если кто-нибудь пофиксит .htc файлик на предмет W3C валидности.
а чем хуже AlphaImageLoader Filter ? http://msdn2.microsoft.com/en-us/library/ms532969.aspx
Этот метод с .htc скриптом работает не корректно в некоторых случаях, например, отменяет значение position=”relative” у блоковых элементов, не работает для элемента формы input type=”image”. Проверял в IE 6.0.2900, придется использовать другой способ с яваскриптом, у AlphaImageLoader который предлагает Microsoft еще больше ограничений на использование :( В который раз поминаю IE недобрым словом!
[quote post="103"]В случае использования PNG для фоновых изображений, можно смело позиционировать его, повторять по обеим осям, в общем все как обычно.[/quote]
Покажите хоть один пример где это работает, вы сами то проверяли? Ни позиционирование, ни повторение НЕ РАБОТАЕТ!
За статью конечно спасибо, но очень меня огорчили несоответствия в описании с реальным использованием…
СПАСИБО!!!!
Хороший метод, пользуюсь.
Только есть вопрос: можно ли использовать его при подмене одного png-изображения на другое использованием псевдокласса :hover, есстественно в IE6? Сколько не бился, не получается… :(
Респектище!
Именно этот скрипт помог реализовать все капризы заказчика, но в фоне не работает – как не крутил, если у кого заработало киньте в меня – каким образом?
Блин, хотел было поглумиться, что Apple на своем майте даже не заморачивается по поводу ИЕ6, и всюду полурозрачные png с серым фоном, захожу, а они все поправили…(
@Мельников
У них сейчас появилась новая альфа-версия которая якобы поддерживает все что нужно. Но баги вроде бы продолжаются. Если потестите – отпишитесь.
Apple у себя тоже этот скрипт используют :)
Выкачал, потестил, с фоном работает, всё что мне нужно реализовал…
Все кто мучается с полупрозрачными png-фонами – качаем v2.0 Alpha 2
странно, раньше использовал этот fix, а сейчас на одном сайте не работает и всё…
замечены проблемы с ссылками в ИЕ6 – проявляется при direction: rtl;
не нажимаются ссылки
div.block {
behavior: url(iepngfix.htc);
background:url(’opacity.png’) repeat-x 100% 100%;
}
div class=”block”
a href=”1″
a href=”2″
a href=”3″
/div
лечиться -
div.block a {
zoom:1;
}
Вот еще один способ с помощью DD_belatedPNG http://www.alexilin.ru/png-and-ie6-with-dd_belatedpng/.
Предельно просто и работает замечательно.