расставляй правильно приоритеты и не отвлекайся на мелочи

CSS Sprites (спрайты) для PNG файлов и их корректная работа в IE

Тема использования PNG файлов в элементах дизайна сайтов продолжает пользоваться хорошей популярностью у веб сообщества и мой давний перевод: Использование прозрачности PNG формата в веб дизайне и полезные моменты извлеченные из этого: Использование PNG в IE6 и в современных браузерах, постоянно находят своих читателей.

Что-ж, тема по праву заслуживает своего внимания, изучения, осмысления и применения. Сегодня я бы хотел затронуть еще один из моментов по использованию преимуществ предоставляемых нам PNG форматом.

Я думаю ни для кого уже ни секрет и не новость то, что правильно оптимизированный сайт должен содержать как можно меньшее число GET запросов к своему содержимому, а если сказать проще, то в выигрыше будет та верстка странички, которая будет содержать меньшее число внешних файлов: изображений, таблицей стилей, скриптов и т.п. (хотя и здесь, как и в любом деле, всегда необходимо думать о балансе).

Те, кто следует этой тенденции уже наверняка в курсе, что одним из полезных решений в этом направлении является проектирование верстки с использование CSS спрайтов (sprites). Те, кто еще не осознал что это такое, и какие преимущества дает такая верстка, могут смело идти к своему любимому поисковику и получить массу исчерпывающей информации на эту тему, т.к цель моей статьи немного другая — показать на конкретном примере действие спрайтов с использванием всех преимуществ PNG формата, да еще и с поддержкой его в Internet Explorer.

Заканчивая длинную преамбулу приступим к делу. В предыдущей записке я научился использовать PNG изображения в своих работах, в том числе и для background изображений. Эти-же самые приемы нужно использовать и для поддержки PNG в спрайтах. Техника спрайтов довольна проста и изящна, и позволяет нам в нужный момент подставлять необходимую часть фонового изображения с использованием простого манипулирования CSS параметром background-position. Все бы ничего, но вот самый популярный и самый обделенный, на сегодняшний момент, корректной работой с веб стандартами браузер IE6, а за одно с ним и провальный IE7 — заставляют верстальщиков совершать над ними магические действия, лишь бы заставить научить их грамотно отображать задуманное.

Я обеими руками поддерживаю инициативу русского проекта NoIE, по продвижению в массы альтернативных браузеров — выполняющих более корректную, быструю и комфортную работу с веб ресурсами. Советую Вам познакомиться с этим ресурсом и поддержать его начинание, а так-же принимать активное участие в обсуждениях на блоге проекта.

Теперь о «чудесах». Как оказалось, в ходе моих мытарств, победа над IE кроется не только в замене неработающего для PNG параметра background-position на клиппинг фона с помощью CSS аттрибута clip, но и в совсем неожиданном месте. Хорошую подножку IE устраивает тогда, когда Вы захотите использовать отлаженный код в XHTML документе, Вы вдруг обнаружите, что clip напрочь отказывается работать. Мне потребовалось несколько часов на изыскание проблемы, пока я не нашел, того, что оказывается для XHTML документов формат записи clip не должен содержать запятых в указании области, т.е. вместо clip:rect(0, 100px, 100px, 0), для XHTML IE подавай clip:rect(0 100px 100px 0), всего-то — «пустячок».

Теперь итог, я считаю, что лучше хорошей болтовни — только хороший пример, поэтому я не буду здесь подробно расписывать проектирование спрайта и расчеты с background-position и clip, а лишь дам Вам уже готовое решение, с которым каждый сможет разобраться самостоятельно.

Вот скриншот примера (к сожалению на движке блогспота я не могу опубликовать сам пример прямо здесь, вот если-бы кто дал рекомендации оптимального (цена-качество) российского PHP хостинга, я был бы счастлив):

Меню на CSS спрайтах с использованием PNG

А вот здесь онлайн демонстрация моего результата (и весь пример одним файлом), которым Вы можете спокойно пользоваться совершенствуя свои познания в HTML верстке.

PNG Вам в помощь!

Почитать еще по данной теме :
5 комментариев на статью:
  1. Елизавета:

    С нетерпением жду когда FireFox и Опера обгонят IE… По теме поста, спасибо за приведенный пример, в конце, всегда удобно когда есть визуальное представление.

  2. bridennis:

    :) Когда Microsoft купит FireFox и портирует его в свою новую ОС, которая будет распространятся бесплатно, либо за очень маленькие деньги — конкурирующие с пиратскими. А так, IE будет жить еще очень долго.
    Спасибо за комментарий :)

  3. SelenIT:

    Спасибо за статью. Только хочу уточнить, что «особенность» поддержки свойства clip в IE связана не с XHTML (существование которого IE всех версий вообще упорно игнорирует!), а со стандартным режимом рендеринга (layoutMode=»CSS1Compat»). А режим зависит не от языка разметки, а от конкретного доктайпа. С доктайпом для HTML 4.01 Strict и даже с <!doctype html> (HTML5) запятые тоже не работают.

  4. bridennis:

    Спасибо за действительно дельный совет, теперь буду в курсе.

  5. PVasili:

    У метода огромное количество ограничений, практически исключающих его использование :(

Ответить
Обязательные поля помечены *