donnerjack13589 Jul 31 2010 at 17:29

Поддержка Data:URL Internet Explorer'ом

2 min

7.3K

Website development*

+31

Comments 36

sunnybear Jul 31 2010 at 17:54

и чем это круче IE6/7 хаков?
* html
*+html

donnerjack13589 Jul 31 2010 at 18:10

CSS-правило, полученное моим методом, проходит валидацию

cst Jul 31 2010 at 18:16

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

sunnybear Jul 31 2010 at 18:32

:) * html, *+html — валидные селекторы
www.w3.org/TR/css3-selectors/

donnerjack13589 Jul 31 2010 at 18:45

Спасибо :)

aisergeev Jul 31 2010 at 18:14

в любом случае спасибо автору за еще один вариант

sunnybear Jul 31 2010 at 18:33

не знаю, с какой стороны это хороший вариант, — наличием behavior, грузящего проц?

donnerjack13589 Jul 31 2010 at 18:47

Вы, конечно, правы!
Но боюсь, что это не единственная (и вряд ли главная) вещь, которая будет грузить проц на IE.

tenshi Jul 31 2010 at 22:12

поэтому давайте грузить его ещё больше? х)

script Jul 31 2010 at 20:14

я сейчас начал копать в сторону метода описанного тут… В Вашем же варианте требуется чтобы Javascript был включен.

donnerjack13589 Jul 31 2010 at 21:29

блестяще!

sunnybear Jul 31 2010 at 22:05

если уж говорить о методах, то проще и элегатнее data:URI+mhtml еще не придумали

pepelsbey Jul 31 2010 at 21:20

behaviour — это не атрибут, а свойство.

AMCDM Jul 31 2010 at 22:05

А кто может мне объяснить в трех словах, зачем это нужно?
Я в верстке не шарю, стало интересно…

tenshi Jul 31 2010 at 22:24

чтобы уменьшить число запросов с 2 до 1, но увеличить трафик на 30% х)

AMCDM Jul 31 2010 at 22:29

Хех) Спасибо)

Аж стало интересно, что покажет в адресной строке браузер, если кликнуть «Открыть изображение в новой вкладке»

tenshi Jul 31 2010 at 22:59

<a href=«data:text/html;base64;charset=utf-8,ZGF0YSAtICYjMTA5MDsmIzEwNzI7JiMxMDgyOyYjMTA4NjsmIzEwODE7ICYjMTA3ODsmIzEwNzc7ICYjMTA4NzsmIzEwODg7JiMxMDg2OyYjMTA5MDsmIzEwODY7JiMxMDgyOyYjMTA4NjsmIzEwODM7ICYjMTA4OTsgJiMxMDkwOyYjMTA4NjsmIzEwOTU7JiMxMDgyOyYjMTA4MDsgJiMxMDc5OyYjMTA4ODsmIzEwNzc7JiMxMDg1OyYjMTA4MDsmIzExMDM7IHVyaSAmIzEwODI7JiMxMDcyOyYjMTA4MjsgJiMxMDgwOyBodHRwICYjMTA4MDsmIzEwODM7JiMxMDgwOyB1cm4=»data:text/html;base64;charset=utf-8,ZGF0YSAtICYjMTA5MDsmIzEwNzI7JiMxMDgyOyYjMTA4NjsmIzEwODE7ICYjMTA3ODsmIzEwNzc7ICYjMTA4NzsmIzEwODg7JiMxMDg2OyYjMTA5MDsmIzEwODY7JiMxMDgyOyYjMTA4NjsmIzEwODM7ICYjMTA4OTsgJiMxMDkwOyYjMTA4NjsmIzEwOTU7JiMxMDgyOyYjMTA4MDsgJiMxMDc5OyYjMTA4ODsmIzEwNzc7JiMxMDg1OyYjMTA4MDsmIzExMDM7IHVyaSAmIzEwODI7JiMxMDcyOyYjMTA4MjsgJiMxMDgwOyBodHRwICYjMTA4MDsmIzEwODM7JiMxMDgwOyB1cm4=

tenshi Jul 31 2010 at 23:00

data:text/html;base64;charset=utf-8,ZGF0YSAtICYjMTA5MDsmIzEwNzI7JiMxMDgyOyYjMTA4NjsmIzEwODE7ICYjMTA3ODsmIzEwNzc7ICYjMTA4NzsmIzEwODg7JiMxMDg2OyYjMTA5MDsmIzEwODY7JiMxMDgyOyYjMTA4NjsmIzEwODM7ICYjMTA4OTsgJiMxMDkwOyYjMTA4NjsmIzEwOTU7JiMxMDgyOyYjMTA4MDsgJiMxMDc5OyYjMTA4ODsmIzEwNzc7JiMxMDg1OyYjMTA4MDsmIzExMDM7IHVyaSAmIzEwODI7JiMxMDcyOyYjMTA4MjsgJiMxMDgwOyBodHRwICYjMTA4MDsmIzEwODM7JiMxMDgwOyB1cm4=

Iskin Aug 1 2010 at 00:23

Кстати, трафик не всегда растёт на 30 %. Base64-кодирование конечно увеличивает, но потом gzip обратно уменьшает.

tenshi Aug 1 2010 at 00:31

ничего подобного. для хорошего зипования нужны длинные повторяющиеся последовательности, а base64 за счёт преобразования 3 байт в 4 уменьшает их повторяемость, ибо исходные данные не выстроены по 3-хбайтовой сетке

rPman Aug 1 2010 at 12:13

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

Например конкретно эту последовательность base64 длиной 394 байт bzip2 уменьшил до 240 байт — 40%

tenshi Aug 1 2010 at 14:49

исходный текст был длиной в 96 байт в utf-8

iStyx Aug 1 2010 at 12:13

А вы не путаете с LZW? Разве gzip не по алгоритму Хаффмана работает?

tenshi Aug 1 2010 at 14:41

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

«base64 » — YmFzZTY0ICA=
" base64 " — IGJhc2U2NCA=
" base64" — ICBiYXNlNjQ=

если исходный текст можно закодировать всего 2 словами " " и «base64», то для закодированного в base64 нам потребуется словарь по крупнее

iStyx Aug 1 2010 at 17:23

Извините, вы ошибаетесь, gzip использует алгоритм DEFLATE, который построен на комбинации алгоритмов LZ77 и Хаффмана. И ему для хорошего сжатия не нужны «длинные повторяющиеся последовательности», ему важен размер таблицы вхождений и равномерность распределения.

tenshi Aug 2 2010 at 01:51

это ты ошибаешься, ю считая, что сказал что-то принципиально иное х)

dfn Jul 31 2010 at 22:30

Чтобы уменьшить число http-запросов к серверу. Если есть много мелких картинок, то достаточно много времени тратится на такие запросы. С аналогичных
рассуждений, кстати, склеивают много картинок в одну (спрайтинг) — выгоднее грузить одну большую картинку одним запросом.

ArtyV Aug 1 2010 at 08:58

Неплохо! Как раз думал, как попроще прифигачить data:uri не запариваясь за mhtml, только я наверное бы сделал это не через htc, а через одноразовый экспрешн

pashamesh Aug 1 2010 at 10:58

Кстати, data:url очень хорош в email-письмах, отправляемых в html формате. Это позволяет обойти столь неприятную ситуацию, когда многие почтовые клиенты рубят все подгружаемые извне изображения

vick Aug 1 2010 at 14:30

эту ситуацию можно также обойти путем вложения картинок в само письмо.

madimp Aug 2 2010 at 12:00

А почему нельзя просто написать 2 правила background-image:

Сначала background-image: url(habr.png);
Потом background-image: url(data:image/png; далее_base64_кодировка...); для тех кто поймет DataURI?

donnerjack13589 Aug 2 2010 at 12:16

Второе правило перебьет первое

madimp Aug 2 2010 at 12:17

У тех браузеров, что поймут второе, в которые не входят те, для которых написано первое.

donnerjack13589 Aug 2 2010 at 12:18

Понимают все, но IE6,7 не могут отобразить.

madimp Aug 2 2010 at 12:21

Досадно.

trilodi Sep 6 2011 at 10:11

background-image: url(data:image/png; далее_base64_кодировка...);
*background-image: url(habr.png);
Вот такая конструкция не перебьет. Вторая сработает только для IE

Show the best of all time