UGgallery

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

С такой задачей неплохо справляется 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-декодеры:
  • Data-kitchen
  • data: URI image encoder
  • Data URL Image Generator

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

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

Дата написания: Monday, 13.03.2006. Время: 22:03. Рубрика: CSS-Шаблоны, CSS-верстка, Data URI, Разное, Ссылки.