Быстро и просто внедряем PNG в дизайн сайта
В последнее время появилось не мало способов корректно использовать формат 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 для фоновых изображений, можно смело позиционировать его, повторять по обеим осям, в общем все как обычно.
Сайт разработчика скрипта не изобилует обьяснениями, но они почти и не нужны ;) Пользуйтесь на здоровье.
15/07/2007 в 2:07 дп
> Справедливости ради, стоит заметить что отказаться от GIF
> в пользу PNG не получится, так как PNG не поддерживает
> анимацию,
Поищи в интернете что-нибудь про mng.
15/07/2007 в 2:42 дп
использование .htc файлов конечно удобное дело, но в моем случае неприменимо, т.к. имеет очень досадный недостаток - невозможно в CSS файле подключать .htc файл с другого домена, так что фраза “Затем положить сам файл iepngfix.htc туда где вам удобно и изменить путь к нему в CSS” не совсем верна… куда удобно не получится.
У меня все что связано с графикой хранится на поддомене images.* …
15/07/2007 в 9:02 дп
Да чего там искать? Я о нем даже упоминать не хотел. Формат, который на данный момент поддерживается только Konqueror’oм…
ну .htc вроде не совсем графика, можно было бы и к скриптам отнести… Дополнил статью.
15/07/2007 в 9:12 дп
А почему никто не говорит про APNG он уже вроде бы как работает на альфах FF.
Ещё не придумали фильтр для IE чтобы APNG показывал ? :)
Или как всегда microsoft замедляет технологические продвижения?
15/07/2007 в 9:17 дп
Да ну это все не серьезно. По крайней мере пока.
15/07/2007 в 5:41 пп
Здорово, спасибо за инфу, попрактикуем и этот способ ;).
15/07/2007 в 5:44 пп
to Dimox
Напишешь потом как успехи ;)
15/07/2007 в 7:03 пп
Время анимации в GIF ушло безвозвратно для этого есть Flash.
Насчет веса это вообще-то не правда есть два вида PNG, PNG8 в котором используется палитра в 256 и который в 99 случаях из 100 дает файл меньших размеров чем GIF иногда значительно меньших и PNG24 который жмет без потери качества и поэтому всегда больше GIF.
Подробная информация по ссылкам:
Креативное использование полупрозрачных PNG в веб-дизайне
PNG8 против GIF
15/07/2007 в 8:59 пп
разве в мозилле mng не поддерживается?
помнится у ещё Phoenix троббер был в мнг нарисован
15/07/2007 в 10:29 пп
to Евгений
Процитирую одного из участников беседы в ru_webdev из приведенной тобой ссылки:
Тоже самое относится и к Flash. Не всегда и не везде.
15/07/2007 в 10:32 пп
Mozilla перестала поддерживать mng.
16/07/2007 в 10:38 дп
в этом утверждении нет ни одного аргумента, даже обсуждать нечего.
Вот вам пример:
В шапек этого сайта использован sprites.gif (почему у него такие размеры это другой вопрос)весит он 8 716 байт, я пережал его в png8 получилось 1 213 байт, проверить можете сами, если не верите мне.
Если вам нужна анимация то, конечно, png8 не заменит gif, в остальных случаях стоит отдать предпочтение png8.
16/07/2007 в 10:43 дп
to Евгений
Так никто и не спорит. Часто png предпочтительнее, но не всегда.
И уж тем более неуместна фраза “Время анимации в GIF ушло безвозвратно для этого есть Flash”.
Поэтому и обсуждать нечего. Не всегда и не везде.
16/07/2007 в 10:52 дп
Да, согласен.
Но вернемся к теме статьи, нужно обратить внимание на тот важный момент, что IE6 нормально работает с двоичной (как в gif либо пиксель прозрачен, либо нет) прозрачность в png, проблемы только с альфа-каналом, которого в gif вообще нет. Это значит что прозрачный gif можно заменить прозрачным png8 без всяких скриптов, а вот если нужны более сложные эффекты (полупрозрачность, склаживание границ) то нужно брать png-24 (PhotoShop не умеет создавать png-8 альфа-каналом) и прибегать к различным скриптам.
18/07/2007 в 4:05 пп
и FF3.0a =)
24/07/2007 в 3:58 дп
Хм… Я немного погуглил, и нашёл замечательный ЯваСкрипт подключаешь файлом и все ПНГ работают без никакого шаманства. Просто вставить одну строчку с файлом подкючения .js и всё.
Но: по моему, он фоны не берёт. Т.е. если пнг на фоне, то альфа будет опять не корректно работать :(
24/07/2007 в 9:29 дп
Сплошное расстройство :) Буду продолжать юзать этот скрипт.
14/08/2007 в 6:21 пп
Картинки то отображаются, а вот фоновые изображения - нет.
14/08/2007 в 11:49 пп
Не знаю, не знаю, я лично проверял. Проверьте все еще раз.
16/08/2007 в 10:19 дп
есть одно но. данный скрипт решает проблему с img, а что если я png фоном кладу?
16/08/2007 в 10:24 дп
А вы попробуйте сначала. Скрипт работает и для фоновых изображений.
26/08/2007 в 2:20 пп
Что то не получается ни позиционировать, ни повторять. Это действительно возможно?
15/09/2007 в 2:41 пп
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%;
}
Не работает ни позиционирование, ни повторение. Как быть?
15/09/2007 в 10:47 пп
Ринат, код проглотился движком. Покажи пример.
8/10/2007 в 5:53 пп
хм…. к сожалению, с .htc файлами некоторых постигнет большой облом…
HTC components in XP Service Pack 2
HTC components in XP Service Pack 2 (2)
28/10/2007 в 10:29 дп
>Этот способ, в отличии от других не использует javascript,….
>Затем положить сам файл iepngfix.htc туда где вам удобно
Автор у вас противоречия. Не стоит дурить публику.JS - есть JS в каком бы файле он не записывался…
28/10/2007 в 11:06 дп
PVasili
htc != js
10/01/2008 в 12:03 пп
не работает прозрачность на фоновых пнг в обычных таблицах=(((( всю голову уже поломал =((((
10/01/2008 в 12:50 пп
позор на мои седины, забыл td в css прописать. работает все. Спасибо )
13/01/2008 в 9:30 дп
Данный метод имеет все же один серьезный недостаток - .htc не “кушается” валидатором. Именно по этой причине мне пришлось отказаться от данного хака в свое время.
Хотя было бы здорово, если кто-нибудь пофиксит .htc файлик на предмет W3C валидности.
1/02/2008 в 3:52 пп
а чем хуже AlphaImageLoader Filter ? http://msdn2.microsoft.com/en-us/library/ms532969.aspx
10/02/2008 в 3:21 пп
Этот метод с .htc скриптом работает не корректно в некоторых случаях, например, отменяет значение position=”relative” у блоковых элементов, не работает для элемента формы input type=”image”. Проверял в IE 6.0.2900, придется использовать другой способ с яваскриптом, у AlphaImageLoader который предлагает Microsoft еще больше ограничений на использование :( В который раз поминаю IE недобрым словом!
10/02/2008 в 8:46 пп
Покажите хоть один пример где это работает, вы сами то проверяли? Ни позиционирование, ни повторение НЕ РАБОТАЕТ!
За статью конечно спасибо, но очень меня огорчили несоответствия в описании с реальным использованием…
19/03/2008 в 2:08 пп
СПАСИБО!!!!
9/04/2008 в 2:45 пп
Хороший метод, пользуюсь.
Только есть вопрос: можно ли использовать его при подмене одного png-изображения на другое использованием псевдокласса :hover, есстественно в IE6? Сколько не бился, не получается… :(
10/04/2008 в 12:13 пп
Респектище!
7/08/2008 в 11:35 дп
Именно этот скрипт помог реализовать все капризы заказчика, но в фоне не работает - как не крутил, если у кого заработало киньте в меня - каким образом?
7/08/2008 в 11:39 дп
Блин, хотел было поглумиться, что Apple на своем майте даже не заморачивается по поводу ИЕ6, и всюду полурозрачные png с серым фоном, захожу, а они все поправили…(
7/08/2008 в 11:39 дп
@Мельников
У них сейчас появилась новая альфа-версия которая якобы поддерживает все что нужно. Но баги вроде бы продолжаются. Если потестите - отпишитесь.
Apple у себя тоже этот скрипт используют :)
7/08/2008 в 12:19 пп
Выкачал, потестил, с фоном работает, всё что мне нужно реализовал…
Все кто мучается с полупрозрачными png-фонами - качаем v2.0 Alpha 2