Реклама в журнале

PNG. Забытый формат веб-графики

Источник: http://www.nbsp.ru/

Начну с того, что формат .PNG мог бы сделать революцию в веб-дизайне, если бы Microsoft Internet Explorer поддерживал его формат. Не буду вдаваться в подробности, почему Microsoft не хочет поддерживать png, поскольку по этому вопросу давно уже создана целая организация, которая пытается "заставить" их сделать это. Но мы пойдем другим путем. Попробуем решить эту проблему.

Если вы думаете, что .gif и .jpg при создании вами веб-сайта не ограничивают вашу фантазию, и вас устраивает постоянно "дорезать" тенюшку в .gif`е вместе с фоном, то вы можете смело забыть про возможности .png, а точнее про 24-bit`ную глубину цвета , анти-альясинг и прозрачность.

Если вы так не думаете, то давайте попробуем решить проблему с поддержкой .png в MSIE.

И так, имеем в исходнике .psd вот такой кусок сайта:

Предполагается, что в html-файле тэг body имеет полосато-серый фон, и он как бы просвечивает сквозь тенюшку и прозрачность. Первый выход, "как оптимизируем?" - инстинктивно .gif, преимущественно вот такой:

Но этот способ всем известен, и не о нем речь. Начнем с того, что в исходнике .psd убираем не нужные слои из-под тени и заливки.

=>

Сохраняем этот кусок как .png-24 с прозрачностью (transparency). В потоке html прописываем свой красивый фон (здесь полосато-серый) и вставляем наш .png. Открываем наш html-файл в Эксплорере (кстати если вы работаете в дримвивере он в режиме просмотра может показать .png корректно. Не верьте!)

Эксплорер автоматически подкладывает серый фон. Затем открываем его же (файл) в Mozille ( или Netscape6):

Поддержка есть. Но, статистику браузеров не обманешь.

Первый выход из такой ситуации предлагает Microsoft, уже "затравленный" той самой организацией: AlphaImageLoader filter. Их предложение таково:

Создать прозрачный .gif размером 1x1px и изменить тэг img следующим образом:

<img src="прозрачный.gif" width="x" height="y"
style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ваш.png');">

Где x, y координаты именно PNG файла! И, ура, Эксплорер прекрасно видит нашу прозрачность.

В порыве радости (не забывая про кросс-браузерность) открываем Mozillа и... готовы разбить монитор кулаком.

Да, да. Ровным счетом ничего, Mozilla отображает только наш "прозрачный.gif", который собственно и прозрачный. Лично я после этого "сюрприза" от Microsoft, забросил эту затею.

Но подумав, решил взяться снова, ведь по идее можно описать скриптом определение браузера и если в потоке html есть png, то будь это MSIE - добавляется их фирменный фильтр, а будь кто другой все остается на своих местах. Обойдя все поиcковики и пару-тройку импортных форумов, выудил следующую информацию:

  1. Создаем опять же прозрачный.gif и называем его blank.gif
  2. Скачиваем вот этот скрипт png.htc

    Он то и описывает процесс определения браузера и подмены тэга img, если это требуется на такой же, но с фильтром для ИЕ.(Остальные браузеры отображают .png как он есть) Важно: внутри скрипта есть такая строчка:

    var blankSrc = "blank.gif";Надеюсь понятно, что изменив название файла прозрачного .gif-a, не забудем и в скрипте это указать.

  3. Сохраняем blank.gif и png.htc в корне сайта
  4. Внутри html тэг img для нашего PNG выглядеть должен стандартно, но обязательно с прописаными width и height.

    <img src="наш.png" width="100" height="150" border="0" alt="">

  5. В свой CSS или прямо в потоке html в тэг style добавляем следующее:

    <style>img {behavior: url("png.htc");}</style>

В итоге мы получаем поддержку прозрачности PNG в Microsoft IE без потерь для Mozilla. А это именно то, что нам и было нужно.

  

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

Ссылки по теме:

Арсений Веснин (вебсайт)


Играйте и выигрывайте! Интернет лотерея iLoto.net
Реклама в журнале

Copyright © <LMTH>. Все материалы являются собственностью их авторов.
При перепечатывании ссылка на http://www.magaz.org/ как на источник
информации обязательна. Правила использования материалов журнала