Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu Close

Еще раз о png в IE6

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

Эта проблема решается только двумя способами — использовать javascript, или не использовать png. Но поскольку абсолютно отказаться от использования картинок в формате .png, нет никакой возможности, то мы рассмотрим первый вариант.

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

JQuery PngFix

Скачать можно с официальной страницы, там же расписаны подробные инструкции по использованию, но если вам лень читать, что ж, можно и перевести. Все довольно просто скачиваете последнюю версию библиотеки JQuery и сам плагин на вышеуказанной странице, и подключаете их в документ, примерно так:

<head> 
... 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.pngFix.js"></script> 
... 
</head>

Далее остается активировать png-фиксер на странице:

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 

После этих нехитрых действий, наша страница в ie6 преобразится, и прозрачные png-картинки будут выглядеть как положено.

Недостатки

А сейчас положенная ложка дегтя, потому что не все так замечательно, как можно подумать. Первое и наверное самое главное, этот скрипт, увеличит время загрузки страницы в ie6. Чем больше png-картинок на странице, тем дольше загрузка.

Второе — забудьте о png-картинках, заданных в качестве фона, хотя и заявлено что он прекрасно фиксит картинки в фоне, на практике это не всегда так. Причем неважно имеет картинка прозрачные области или нет, PngFix может сильно ее исказить, если она повторяется по горизонтали или вертикали.

Ifixpng improved

Скачать плагин можно отсюда. Для его использования вам также понадобится однопиксельная картинка pixel.gif, которая почему-то не входит в архив с плагином. Так что можете скачать ее здесь. Эту картинку необходимо положить в папку с картинками, причем желательно чтобы эта папка называлась images

Далее точно также подключаем JQuery и плагин в разделе head:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.ifixpng.js"></script> 

После чего активируется он следующим образом:

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $("#block").ifixpng();
    }); 
</script> 

Если же, папка, в которой расположена картинка pixel.gif, отличается от названия images, можно указать ее расположение в коде:

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $.ifixpng('media/pixel.gif');   
        $("#block").ifixpng();
    }); 
</script>

Недостатки

Недостатки аналогичные, не очень быстро, не умеет множит png-картинки в фоне, и то что каждую png-картинку, нужно указывать вручную. Тем не менее, я использую именно этот плагин, в том случае, если мне нужно профиксить одну или две прозрачные картинки, потому что в этом случае он не пытается фиксить все подряд png, искажая первоначальный вид.

Вообще конечно, все верстальщики и я в том числе, живут надеждой, что IE6 когда-нибудь пропадет как страшный сон, но пока он есть, вам предоставляется еще одна возможность заставить его корректно отображать прозрачность в png-картинках.

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо - поделиться ссылкой в социальных сетях: