Объединяем несовместимое

С одной стороны, у нас схема data:URI, которая поддержана W3C и распознается всеми браузерами, кроме IE. С другой стороны, у нас IE, который понимает mhtml и с которым работают 70% наших пользователей. Мы объединим эти два решения, благо они оба используют base64‑представление картинок.

Задача первая: объединить оба назначения стилевых правил, чтобы они не конфликтовали друг с другом. Решается это очень просто с помощью либо отдельного CSS‑файла для IE (через условные комментарии), либо CSS‑хаков (последнее предпочтительнее, ибо позволяет загружать всего один CSS‑файл). В итоге в CSS‑файле мы имеем примерно следующее:

/*

Content‑Type: multipart/related; boundary="_"

‑‑_

Content‑Location: 1

Content‑Transfer‑Encoding: base64

iVBOR..

*/

ul li {

background: #fff url(data:image/png;base64,iVBOR...) 0 0 no‑repeat;

}

* html ul li {

background‑image: url(mhtml:http://site.ru/main.css?20081010!1);

}

*+html ul li {

background‑image: url(mhtml:http://site.ru/main.css?20081010!1);

}

Данная конструкция позволяет вывести фоновое изображение в base64‑кодировке для всех (ну или 99,9%) браузеров. Почему в конце содержатся 2 разных CSS‑селектора с одним объявлением? Первое предназначено для IE6 и предыдущих версий, второе – для IE7. Объединить через запятую их нельзя.

Панацея или ящик Пандоры?

Первый же скептический вопрос, который каждый читатель должен в этом месте задать: как можно эти картинки выводить только один раз в CSS‑файле (можно заметить, что base64‑строка фигурирует там дважды)? Ответ: никак. Однако выход есть.

Это gzip‑сжатие. Если очень коротко, то при любом архивировании создается некоторый словарь наиболее часто используемых строк, которые заменяются на однобайтовые представления. При восстановлении данных из архива происходит обратная процедура, когда значения слов словаря подставляются вместо их наименований. В нашем случае у нас для одной картинки используется одна и та же base64‑строка . Это означает, что при архивировании она сожмется удивительно эффективно.

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