scorp_takoi (scorp_takoi) wrote,
scorp_takoi
scorp_takoi

И вновь о PNG в IE6

Букв много. Весь текст под катом.

Случилось то, что раньше так сильно не хватало при верстке — полноценного использования 24 битного PNG с прозрачностью. Не буду описывать все плюсы этого дела для новичков, если таковые сюда заглянут, а просто отошлю их к статье, например, этой. Там же описаны причины, почему такая замечательная вещь не используется широко.

Тем временем, у меня появилось задание сверстать новый дизайн для сайта нашей фирмы. Сказать, что дизайн простой не легкий для верстки — значит не сказать ничего. Наш дизайнер постарался на славу, а наше начальство на славу дизайн одобрило. Одно то, что придется искать приемлемые варианты замены стандартных селектов стоит большого :) Полупрозрачных градиентов в этом дизайне тоже пруд пруди. И вот вчера весь вечер я убил на то, чтобы найти приемлемое решение как заставить шестого осла нормально отображать этот градиент. Задача осложнялась тем, что очевидна была необходимость использовать полупрозрачный PNG в фоне. Распрастраненный метод с использованием фильтра не только не прокатывал по этой причине, но вызывал отвращение необходимостью использовать костыли в коде в виде прозрачных гифоф и прочего — не слишком ли много чести для осла?

И вдруг совершено случайно наткнулся на ЭТО! Еще несколько десятков минут на прочтение, скачивание и установку. Еще полчаса на попытки заставить это работать. Нет, просто оказалось сам дурак, что-то где-то не так прописал — не без этого ;) И оно заработало! Слава DD_belatedPNG!

Опять же не буду вдаваться в подробности сей библиотечки. Скажу лишь кратко что это такое и с чем ее едят. Итак, библиотека DD_belatedPNG — это маленькая молодая библиотечка (первый релиз 2008.12.07, последний — 2009.01.01) в виде одного JS файла размером в 5 кбайт, подключающийся в условных комментариях только для IE6. С помощью библиотеки можно использовать PNG изображения в HTML и CSS, в том числе в фоновых повторящиюхся изображениях, абсолютно не задумываясь о шестом IE. Для него потребуется лишь поместить в условные комментарии подключение этой библиотеки и вызов функции, входным параметром которой будет перечень селекторов, в которых используются PNG изображеия. Вот примерно так:

<!--[if lte IE 6]>
<script type="text/javascript" src="js/png.js"></script>
<script>DD_belatedPNG.fix('.main, .header, .content, .footer');</script>
<![endif]-->

И всё.

Конечно, я лукавлю, говоря «и всё». Как обычно, в отношении продуктов Microsoft (да и вообще ПО, что греха таить!) не обходиться без ложки дегтя. Постараюсь перечислить все недостатки, которые я смог заметить в использовании этой библиотеки.

Первое, что бросилось в глаза — это возможный не совсем корректный расчет паддингов в блоке, внутри которого находится PNG фон. Так, в конструкции, где div находится внутри ячейки таблицы (да, я ненавижу менять таблицу на дивы, чтобы этим дивам присваивать свойства таблицы, а потом еще специально для IE придумывать костыли, потому что он этих свойств не понимает; поэтому колонки, вертикальное выравнивание и горизонтальное меню с варьируемым числом пунктов делаю в таблицах), у которой задано «vertical-align:middle;» фон этого div'а уехал вниз за его границу. С«vertical-align:top;» работает нормально.

Второй замеченный жук — ниоткуда взявшийся padding в 1 пиксель между элементом с PNG фоном и его родительским контейнером. Лечится заданием этого самого отступа, чтоб и в других нормальных браузерах было так.

Третье — ограничение. Сей костыль не работает с самими <IMG>. То есть если создать прозрачный рисунок и ему фоном назначить PNG, то в этом случае PNG не будет скорректирована. Поэтому вместо подобных картинок лучше использовать банальный <DIV>.

Кроме всего этого есть еще одно ограничение, которое, как я пока не обошел. Выражается оно в том, что отображение PNG изображений корректируется (или не знаю, как точнее сказать, ибо в принципе работы этой библиотеки не разбирался пока) после загрузки, а не «на лету». Посему когда я попытался по событию onHover менять PNG фон у объекта, то IE поменял и показал нескорректированную картинку, как будто библиотека не работает. Кроме того, способ замены не самого изображения, а его позиции, также не работает в этом случае. Я догадываюсь почему. И решил пока эту проблему не трогать, ибо не столь существенно подсвечивать кнопку под курсором мышки. Хотя можно, как вариант, попробовать вызвать в JS функции, обрабатывающей событие hover, функцию DD_belatedPNG.fix(), предварительно определив, что имеем дело с IE6. Пока еще я не решил, стоит ли шестой осел такой чести? :)

Есть еще одна проблема. Конечно, у меня давно уже не установлен IE6 как основной браузер в системе, поэтому я использую его эмуляторы. В офисе, где я делал эти первые опыты, я использую IE Tester. Дома же у меня установлен Multiple IE. Первый прекрасно работает с библиотекой DD_belatedPNG. А вот Multiple IE работать с ней отказался. Хотя у моего коллеги в нем же сверстанный макет отобразился корректно. С живым IE и IE на виртуальной машине проблем пока не обнаружено.

Пожалуй, это все, что я хотел бы сейчас рассказать о моих приключениях с PNG в IE6. По мере накопления опыта я буду описывать грабли, встреченные мной. А теперь спать :)

Добавлено 13.04: IE6 отказался воспринимать PNG внутри ячейки таблицы. Заметил такой
вот факт.

Добавлено 27.05: Библиотека отказывается работать, если файл png имеет расширение не .png. Например, в новых версиях Netcat файлы хранятся не в том виде, в каком мы привыкли, а разбиты по разделам сайта и имеют имя в виде хеша реального имени без расширения. При попытке скорректировать полученный таким образом PNG, получаем обычную для IE6 картинку с серым фоном.

Сайт DD_belatedPNG: http://dillerdesign.com/experiment/DD_belatedPNG/
Ссылка на саму библиотеку http://dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a-min.js
Tags: компы
Subscribe

  • С днем обочника!

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

  • Летят утки

    А какая потрясающая стая уток пролетела сегодня с юго-запада на север! Занимюсь своими досками. Слышу какое-то кряканье. Вокруг ничего и никого.…

  • Слива vs Синьор Пикассо

    Кстати, в Вязьму ездил на «Сливе». Два года я не сидел за ее рулем. Ниже впечатления. Во-первых, посадка. Ну оооочень низкая.…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 18 comments

  • С днем обочника!

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

  • Летят утки

    А какая потрясающая стая уток пролетела сегодня с юго-запада на север! Занимюсь своими досками. Слышу какое-то кряканье. Вокруг ничего и никого.…

  • Слива vs Синьор Пикассо

    Кстати, в Вязьму ездил на «Сливе». Два года я не сидел за ее рулем. Ниже впечатления. Во-первых, посадка. Ну оооочень низкая.…