Pull to refresh
35
0
Миронов Михаил @MIC

User

Send message

data URI

Reading time2 min
Views7.6K
Пару лет назад я занимался проблемой data URL в Internet Explorer, добился определённых результатов, но то, что получилось, использовать было невозможно. Data URL (иногда его ещё называют «протокол data:») — возможность вставлять ресурсы (графику, CSS, JavaScript и так далее) в HTML код.


Подробнее о data URL можно узнать из свежей статьи на «Хабре» «Картинки в теле страницы с помощью data:URL». Хотелось только её дополнить двумя замечаниями: IE8b1 поддерживает data URL длиной не более 32Кб, в современных версиях других браузеров ограничений увидеть не удалось, Safari/Opera/FF показали изображения размером около 700Кб.


Теперь амбула.


Вчера ночью мне пришла в голову идея как можно попытаться корректно совместить data URL и включение картинок через протокол mhtml. То, что у меня не получилось два года назад, получилось сейчас.


Результат — готовый код на PHP из двух функций. Первую функцию («bolk_data_uri_header») нужно вызвать в самом начале перед выводом любого вашего кода, вторую («bolk_data_uri») собственно для включения картинки в код.


Надеюсь на примерах всё понятно:
bolk_data_uri_header();
bolk_data_uri('myjpeg.jpg');
bolk_data_uri('ourpng.png', 'border: 2px dotted red');


Код самой библиотеки:
function bolk_data_uri_header() 
{ 
    echo "<!--\n" 
        ."Content-Type: multipart/related; boundary=\"=_NextPart_01C6A9B1.539AB070\"\n\n" 
        ."--=_NextPart_01C6A9B1.539AB070\n" 
        ."Content-Transfer-Encoding: base64\n" 
        ."Content-Type: text/html\n" 
        ."-->\n\n"; 

} 

function bolk_data_uri($file, $style = '') 
{ 
    if (!( file_exists($file) && ($data = @getimagesize($file)) )) return false; 

    $name = uniqid('', true); 

    if ($style <> '') $style = ' style="'.htmlspecialchars($style).'"'; 
    $mime = strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ? " type='{$data['mime']}" : '';

    echo "<!--\n" 
        ."--=_NextPart_01C6A9B1.539AB070\n" 
        ."Content-Location: {$name}\n" 
        ."Content-Transfer-Encoding: base64\n" 
        ."Content-Type: {$data['mime']}; -->\n" 
        ."<object data='data:{$data['mime']};base64,\n\n"; 

    echo base64_encode(file_get_contents($file)); 

    echo "' {$data[3]}{$style}{$mime}'><img " 
        ."src='mhtml:http://{$_SERVER['HTTP_HOST']}"
        ."{$_SERVER['REQUEST_URI']}!{$name}' {$data[3]}{$style} /></object>\n\n" 
        ."<!--\n" 
        ."--=_NextPart_01C6A9B1.539AB070-->"; 

    return true; 
}



Секрет в совмещении данных, чтобы IE, обратившись к странице по протоколу mhtml нашёл нужный кусор, «спрятанный» внутри тега, а остальные браузеры увидели бы картинку через data URL.


Код тестировался под Opera 9.50b, FF 2.0.0.13, Safari 3.1 и IE6. Предложения и результаты испытаний — прошу в комментарии.


Оригинал записи опубликован в моём блоге.
Total votes 46: ↑43 and ↓3+40
Comments85

Уровни владения HTML, CSS и Javascript: Часть 1. HTML

Reading time4 min
Views18K
Вашему внимание предлагается достаточно большой отрывок статьи «Levels of HTML knowledge», написанной Роджером Йоханссеном 30 Мая 2006 года.

Прим. переводчика: Изначально я опубликовал этот пост в виде юмористических выдержек из трех статей, написанных тремя разными авторами и озаглавленных схожим образом: «Уровни владения HTML», «Уровни владения CSS» и «Уровни владения Javascript». Что, конечно же, было довольно глупой затеей. Осознание допущенной ошибки пришло через 5 минут и два минуса к посту и карме. Исправляюсь. Перевод «Уровней владения CSS» ждите завтра.

Узнать всю правду об уровне ваших знаний
Total votes 48: ↑37 and ↓11+26
Comments54

Linux для веб-разработчика

Reading time1 min
Views40K
Здравствуйте уважаемые хабрапользователи и линукс юзеры. Сломился я перед выбором ОС и решил поставить Linux, только в выборе дистрибутива я заступорился.

Дело в том, что работая на Windows, уже привыклось использовать различный софт (фри или триал). И при переходе на Линукс, хочется увидеть альтернативы.

Пробовал использовать Ubuntu, но увидел сразу проблемы со шрифтами на сайтах, они коряво отображались и хотел бы узнать у профи, как можно исправить положение.

В общем вопрос прост: Какой на ваш взгляд лучший дистрибутив Линукс, подойдет типичному веб-программисту (Java, PHP, MySQL PostgreSQL, SFTP/SSH-ftp, SSL-FTP поддержкой).

Просто Windows откровенно достал своими лагами (даже на такой машине как Athlon X2 4800+, 2GB RAM). Хочется продуктивной работы, что бы ничто не отвлекало. Поэтому спрашиваю мнение у професионалов. Благо, на этом сайте, есть такие. :)

p.s. В данный момент использую Nu PHPed (там есть поддержка SSH доступа, работает стабильней, чем в Zend`е, инклуды можно щёлкать прямо в коде и открываются отдельными файлами, поиск декларации функций, классов и переменных, WinSCP как ftp-клиент, оч удобный, SQL Manager для работы с БД MySQL pgAdmin для работы с PostgreSQL).
Total votes 33: ↑22 and ↓11+11
Comments165

Определяем браузер. Самый необычный способ

Reading time1 min
Views1.1K
<map
id="browser"
/''name="firefox"
/""name="sleipnir_gecko"
"name="safari"
""name="konqueror"
/name="ie"
name="opera"
name="lynx"
>



Атрибут name объекта с id=browser отдает название браузера. Основано на различии методов парсинга атрибутов элементов.

Источник: http://www.hedgerwow.com/360/dhtml/html-browser-detection.html
Total votes 63: ↑57 and ↓6+51
Comments51
12 ...
29

Information

Rating
Does not participate
Location
Таиланд
Registered
Activity