Data URI в IE8

uggallery — Thu, 06 Mar 2008 11:26:01 +0000

Говорят, восьмой IE будет Data URI поддерживать. Я рад.

Кодирование графики в Base64 при помощи Internet Explorer

uggallery — Wed, 26 Apr 2006 09:45:10 +0000

Оказывается, чтобы закодировать графику в формате Base64, не нужны никакие специальные программы. Можно пользоваться подручными средствами в виде старого доброго MS Internet Explorer. Эта штука умеет сохранять страницы вместе с графикой в формате MHT (MHTML — MIME HTML). Графика, как раз, в Base64 кодируется.

Для наших целей нужно создать HTML-файл с одной единственной строкой внутри:

sample.png — это картинка, которую нужно закодировать.

Далее: открыть HTML-файл в IE, убедиться, что картинка видна в браузере, и сохранить файл как “Web archive, single file (*.mht)”.

Затем, MHT-файл открыть в текстовом редакторе. В файле, кроме разметки, положенной файлам этого формата, после строки типа “Content-Location: file:///…/sample.png” будет блок текста-абракадабры — то есть, наш графический файл, закодированный в формат Base64.

Вот и все. Может это не слишком изящный метод, но зато нужная программа всегда под рукой.

Графика в формате Base64 нужна, например, для использования с Data URI. Кстати, начиная c девятой версии, Opera тоже умеет сохранять MHTML. А с Data URI она работает уже давно.

(Англоязычные стать в Wikipedia о Base64, MHTML, Data URI (перевод на русский)).

Data URI и приемы черновой верстки

uggallery — Mon, 13 Mar 2006 18:37:05 +0000

Есть несколько способов визуализации блоков при на начальных этапах верстки. Когда есть пустой, или полупустой, блок, и нам хочется увидеть четкие его границы. Чтобы задать нужные размеры и правильно позиционировать его.

С такой задачей неплохо справляется Firefox с расширением Web Developer. Но это решение не подходит, если нужно увидеть блоки в нескольких браузерах сразу: Firefox, Opera, IE 5-6.

Самые простые и универсальные способы: задать блоку свойство border или background-color. Но они не всегда удобны: первый влияет на размеры блока (в разных браузерах — по разному), а второй делает блок непрозрачным, а иногда хочется увидеть, что за ним.

Border можно задавать не всем сторонам блока, а только снизу, например. В некоторых случаях, это совершенно незаменимая вещь. А залитый фоновым цветом блок можно сделать прозрачным при помощи свойства opacity, поддерживаемым последними “фаерфоксами”. Есть аналогичное свойство и для IE.

background: red; 
opacity: 0.5;
filter:alpha(opacity=50);

Получившееся сочетание подходит для тех, кто проверяет верстку только в Firefox и IE, но не в Opera.

Для Firefox и Opera, подойдет следующее:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYvyvJ9cAEGAABUwBzcyE834AAAAASUVORK5CYII=);

Абракадабра, заключенная в круглые скобки CSS-правила, ни что иное как обыкновенный полупрозрачный одно-пиксельный PNG-файл… но закодированный в текстовом формате Base64.

Этот формат дает возможность встраивать (а не прилинковывать) графические файлы в HTML-, JS- и CSS-документы. Получающийся текстовой фрагмент выглядит как обычная ссылка — URI. Это даже можно вставить в адресную строку браузера, и в окне мы увидим исходную картинку. Конечно если браузер поддерживает эту технологию.

Технология называется — Data URI.

Достаточно один раз перекодировать графику в текст, а текст сохранить в файле автозаполнения любимого текстового редактора. В своем EditPlus-е я просто добавил в файл css2.ctl две строки:

#T=redfiller
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYvyvJ9cAEGAABUwBzcyE834AAAAASUVORK5CYII=);

Теперь, чтобы добавить полупрозрачный бэкграунд к объекту, мне достаточно набрать: “redf” и нажать F2.

Скомбинировав эти приемы, получаем:

opacity: 1;
background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYvyvJ9cAEGAABUwBzcyE834AAAAASUVORK5CYII=) !important;
background-color: red;
filter:alpha(opacity=50);

Страница с примером.

Эта конструкция работает в Opera, Firefox, IE 5.0, IE 5.5, IE 6.0.

Тут важен порядок, в котором свойства расположены, и наличие !important.

Страницу с примером можно сохранить “без картинок” на локальный компьютер — функциональность сохранится! Все необходимые “картинки” содержатся внутри HTML-файла.

Эта заметка появилась благодаря желанию пристроить хоть куда-нибудь технологию Data URI, которая сама по себе имеет огромный потенциал, особенно в веб-приложениях, но вот беда — она не поддерживается Internet Explorer-ом. А жаль. В рунете, кстати, по Data URI нет практически ничего. Надо понемногу заполнить пробел.

Англоязычная статья в Wikipedia о Data URI (перевод на русский)
Кодирование графики в Base64 при помощи Internet Explorer
Офлайновый base64-декодер для Unix и Windows (командная строка)
Онлайновые Data URI-base64-декодеры:

(Все эти ссылки есть на странице в Википедии.)

Tags: data+uri, base64, css+верстка, edit+plus

UGgallery » Data URI

Data URI в IE8

Кодирование графики в Base64 при помощи Internet Explorer

Data URI и приемы черновой верстки