Матвей Земсков

Заметки веб-мастера

Понедельник, 30 августа 2010 17:18

Размещаем полупрозрачный .png в IE6.

Оцените материал
(0 голосов)

Несмотря на то, что пользователей браузера IE6 с каждым днем становится все меньше и меньше (6,4% на август 2010 года) - поддерживать его при создании сайта все-таки необходимо. Кстати, ежемесячная статистика доступна, например, на сайте http://www.liveinternet.ru/.

Напротив, использование полупрозрачных изображений формата png при верстке макетов становится все более популярным.

Однако, IE6 отображает их неправильно… Можно, конечно, использовать фильтр AlphaImageLoader, но я нашел способ лучше. Этот способ нашелся в виде JS-библиотеки под названием DD_belatedPNG. Итак, какие же положительные моменты мы увидим при использовании библиотеки DD_belatedPNG?

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

Еще одним плюсом, является то, что при использовании библиотеки объем кода, который необходимо написать разработчику при верстке значительно сокращается.

Не нужно создавать альтернативных таблиц стилей и применять в них фильтр к каждому элементу с фоном в виде .png файла. Нужно всего лишь скачать библиотеку с сайта: http://www.dillerdesign.com/, затем подключить ее к своей страничке с помощью условных комментариев:

html

<!--[if IE 6]>
  <script src="/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>
       DD_belatedPNG.fix('.some_class, some_element');
    </script>
<![endif]-->

и передать функции DD_belatedPNG.fix() в качестве аргументов те элементы. Которые содержат png изображения. Причем можно передавать сразу несколько элементов через запятую. Аргументами могут быть не только имена селекторов классов и идентификаторов, которые нужно обработать, но и сами элементы (например, img).

DD_belatedPNG.fix('*') - вызов метода с аргументом ‘*’, приведет к фиксу всех тегов, весомым минусом в работе функции в этом случае будет, то, что «прорисовка» страницы займет много времени.

Помимо «плюсов», у библиотеки есть и недостатки:

  • Тег <body> не может быть использован в качестве обрабатываемого селектора, хотя есть выход — можно «обернуть» все элементы страницы в элемент <div> и обработать его с помощью DD_belatedPNG.fix().
  • Скрипт не будет работать с элементами <tr> и <td>
  • Не поддерживается <INPUT type="image"/>

Вот такая полезная библиотека. По моему мнению, пользоваться ей в большинстве случаев удобней, чем фильтрами от Microsoft’a. Ну, а выбор инструментов, в итоге все равно зависит от разработчика. Хотелось бы, чтобы этот выбор был правильным и создание страничек доставляло разработчику удовольствие.

Прочитано 4850 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх