Pull to refresh

Фоновый .png и IE 6 — принуждаем к миру.

Website development
Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом (спасибо dreamhelg за лаконичное описание сути происходящего в данном случае).

Сегодня в в своей RSS-ленте обнаружил ссылку на очередную статью о конфронтации .png и IE. Воспринял ее, пожалуй, как и бóльшая половина удививших заголовок выше — с предубеждением (мол, опять двадцать пять). Тем не менее, выяснилось много интересного. Например, теперь фоновые .png отлично подчиняются свойствам background-position и background-repeat.

Сразу же отправлю всех любопытных на страничку с примерами и пояснениями. Реализуется все при помощи JavaScript, который создает и присваивает необходимому элементу страницы <DD_belatedPNG:rect/> (то есть наш .png «перерожденный» в VML).

Чтобы работало нужно:

  1. cкачать и подключить к HTML-документу JavaScript (на страничке с примерами есть две ссылки — на обычный и сжатый файлы);
  2. внутри HTML-документа запустить функцию (DD_belatedPNG.fix()), которой необходимо, в качестве параметра, передать селектор элемента, над которым мы проводим обряд манипуляцию.

Например:

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('.png_bg, .other_class'); //пример подключения классов
</script>
<![endif]-->

Что особенного?

  • в отличии от других fixов не использует AlphaImageLoader, тем самым не создавая путаницы в порядках слоев (изменения z-index после применения фильтра);
  • как сказано выше теперь свойства CSS background-repeat и background-position работают;
  • заодно поддерживается доступ к стилю элемента через element.style и работа с псевдо-классом :hover;
  • скромный вес скрипта — 4 Кб в сжатом виде.

Недостатки:

  • нельзя в качестве селектора указывать <body>, в связи с ограничениями накладываемыми особенностью присвоения VML тому или иному DOM-узлу;
  • работа свойства background-position:fixed не проверялась;
  • будучи скриптом борящимся с «фоновыми» каверзами IE, он не помогает отображать .png полупрозрачным внутри тега ;
  • скрипт не работает пока с элементами таблиц <tr> и <td>.

Вообще, скрипт довольно сырой. Первая проба выпущена всего навсего три дня назад. Посему и дополнительные баги могут появиться и работа скрипта быть более ресурсоемкой, нежели хотелось бы. Тем не менее я думаю, что штука сделанная Дрю Диллером (Drew Diller, так зовут автора скрипта) будет интересна многим, оттого и написал эту кратенькую заметку.

UPD. Выпущена третья версия скрипта в которой исправлены некоторые недоработки. В том числе однопиксельные отступы слева и сверху, появление нежелательноых границ, скролов, а также добавлена возможность передавать функции несколько селекторов через запятую (см. пример кода выше).
Tags:ie png fixvmljavascriptpng фоном
Hubs: Website development
Total votes 80: ↑74 and ↓6 +68
Views2K

Popular right now

JavaScript Developer
from 2,700 €DiscoRemote job
JavaScript-разработчик
to 180,000 ₽MobilityРязань
Sales Development Representative/ Business development manager
from 80,000 to 120,000 ₽RoonyxRemote job
JavaScript разработчик
from 170,000 to 300,000 ₽WeMakeTeamRemote job
JavaScript разработчик
from 180,000 ₽SportrecsМоскваRemote job