@donnerjack1358931 июл 2010 в 13:29

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

2 мин

7.5K

Веб-разработка *

+32

Комментарии 36

@sunnybear 31 июл 2010 в 13:54

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

@donnerjack13589 31 июл 2010 в 14:10

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

@cst 31 июл 2010 в 14:16

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

@sunnybear 31 июл 2010 в 14:32

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

@donnerjack13589 31 июл 2010 в 14:45

Спасибо :)

@aisergeev 31 июл 2010 в 14:14

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

@sunnybear 31 июл 2010 в 14:33

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

@donnerjack13589 31 июл 2010 в 14:47

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

@tenshi 31 июл 2010 в 18:12

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

@script 31 июл 2010 в 16:14

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

@donnerjack13589 31 июл 2010 в 17:29

блестяще!

@sunnybear 31 июл 2010 в 18:05

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

@pepelsbey 31 июл 2010 в 17:20

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

@AMCDM 31 июл 2010 в 18:05

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

@tenshi 31 июл 2010 в 18:24

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

@AMCDM 31 июл 2010 в 18:29

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

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

@tenshi 31 июл 2010 в 18:59

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

@tenshi 31 июл 2010 в 19:00

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

@Iskin 31 июл 2010 в 20:23

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

@tenshi 31 июл 2010 в 20:31

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

@rPman 1 авг 2010 в 08:13

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

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

@tenshi 1 авг 2010 в 10:49

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

@iStyx 1 авг 2010 в 08:13

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

@tenshi 1 авг 2010 в 10:41

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

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

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

@iStyx 1 авг 2010 в 13:23

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

@tenshi 1 авг 2010 в 21:51

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

@dfn 31 июл 2010 в 18:30

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

@ArtyV 1 авг 2010 в 04:58

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

@pashamesh 1 авг 2010 в 06:58

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

@vick 1 авг 2010 в 10:30

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

@madimp 2 авг 2010 в 08:00

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

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

@donnerjack13589 2 авг 2010 в 08:16

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

@madimp 2 авг 2010 в 08:17

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

@donnerjack13589 2 авг 2010 в 08:18

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

@madimp 2 авг 2010 в 08:21

Досадно.

@trilodi 6 сен 2011 в 06:11

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий