Борьба с альфа прозрачностью PNG в IE6

Все блоги / DLE движок для сайтов | 15 октября 2010

За всю историю существования Internet Explorer 6, было предложено много методов для корректного отображения PNG с альфа прозрачностью (alpha transperency). Многим думаю известно, что IE6 не поддерживает альфа-канал, а с настоящими стилями веб-дизайна без поддержки так называемых "фич" PNG создать нечто красивое и сверхъестественное очень сложно. Хоть и некоторые большие комьюнити, например, YouTube
похоронили IE 6 версии
, но все же осталась довольно таки большая доля пользователей интернета по прежнему бороздящих его на своем "друге". И клиент, заказывающий верстку, порой просит поддержку IE6. Деваться нам некуда, надо делать.
Предлагаю использовать самый лучший на данный момент хак для поддержки прозрачности png изображений в Internet Explorer 6 - DD_belatedPNG.
Официальный сайт:
http://www.dillerdesign.com/experiment/DD_belatedPNG/


Потребуется всего-лишь один JS и небольшая настройка для наших элементов, чтобы решить данную проблему. Скачиваем его
здесь
.

Подключаем его в <head></head> и пишем комментарий, чтобы скрипт работал только для IE6:

<!--[if IE 6]>
<script type="text/javascript" src="/js/belatedpng-min.js">
<script language="javascript" type="text/javascript">
DD_belatedPNG.fix(#menu);

<![endif]-->


С помощью функции DD_belatedPNG.fix мы указываем в каком блоке, изображении обрабатывать наши png. В данном примере мы обрабатываем блок/изображение с ID menu.

Можно задавать сразу несколько селекторов:

<script language="javascript" type="text/javascript">
DD_belatedPNG.fix(.right input, #main_menu li a, .block_side, .index_page_1, .index_page_2, .index_page_3, .images img);



Огромный плюс, которым не обладает ни один подобный хак, является возможность позиционировать изображение в фоне.

Сайт автора скрипта с примерами и использованием:
http://www.dillerdesign.com/experiment/DD_belatedPNG/


Источник:Блог о верстке Руслана Дерепко, DLE
Перейти на сайт

Похожие новости