понедельник, 28 июня 2010 г.

Прозрачность или не прозрачность, вот в чем вопрос!



   Каждый уважающий себя веб-дизайнер сталкивался с проблемой прозрачных PNG в Internet Explorer 6. Да да, эта головная боль не давала спокойной жизни многим верстальщикам, мне в том числе. Осознавая проблему, приходилось рисовать макеты упрощенные, чтобы резать можно было под ИЕ6 (то есть опираясь на браузер 9 летней давности), либо уже идти ва-банк и отрезать “доблестному старичку” вход на сайт этим самом лишиться некоторое число посетителей, а в некоторых случаях и потенциальных пользователей. Вот сейчас я столкнулся с такой же проблемой, верстая сайт из своего же макет, уже пришел к решению, что ИЕ6 надо “забанить”, однако, случайно наткнулся на один чудо-скрипт который решил проблему прозрачности. О нем мы и поговорим дальше.

    Скрипт DD_belatedPNG, который можно скачать отсюда, в отличии от своих конкурентов, мною исследованных, сохраняет активные элементы активными после обработки, и настройка функции достаточно проста:

<script type="text/javascript">
DD_belatedPNG.fix('#pngселектор, html-тэг');
</script>

Как видно из данной функции обрабатываемые объекты, задаются через запятую, и можно вписывать как CSS селекторы, так и обычные HTML тэги.

В конечном счете наш “фикс” PNG прозрачности должен выглядеть так:

 

<!--[if IE 6]>

<script src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div, a, p, img');
</script>
<![endif]-->

Для сравнения приведу примеры:

До

Снимок1

После

Снимок

Комментариев нет:

Отправить комментарий

Примечание. Отправлять комментарии могут только участники этого блога.