программирование
Data URL: так ли страшны издержки
Я уже несколько раз писал о data URL, так что наверное все уже запомнили что это такое. У этого способа внедрения ресурсов есть интересные плюсы, но, в своей массе,
из-за base64 размер изображения увеличивается на треть- невозможно использовать одно изображение несколько раз
- не работает в IE
Все эти минусы — мнимые.
По первому пункту. Многие сайты используют
По второму. Даже начинающий верстальщик знает как использовать изображение из data URL несколько раз. Для этого надо поместить его в CSS и сделать фоном контейнера.
По третьем пункту я уже высказывался. В IE до восьмой версии не было data URL (в IE8b1 поддержка есть, но очень урезанная — всего 32Кб данных), но я придумал способ как внедрять изображения в IE.
Автообновление CMS
У Бирмана встретил на сайте его движка блогов «e2»:
Рекламируют автообновление:
Если смотреть на систему непредвзято — она действительно хороша. Первое, чем она вас встретит — это автоматические обновления: пожалуй, уникальное свойство в мире CMS. Она сама скачивает с сайта разработчика заплатки и новые функции и сама же на себя их устанавливает.
Я действительно гений. После того, как я это сделал в 2004 году, это стало появляться и в других
веб-приложениях.
Система прав, локализатор и модуль файла конфигурации сейчас используется в Lixil CMS, а миниязык блокировки по IP — в проекте KVNru.ru. Так что часть системы жива и сейчас, не говоря уже о том, что до сих пор существуют сайты на этой CMS (скриншот взят с одного из таких сайтов).
Урезаем текст средствами CSS, часть II
Как мне справедливо подсказали в предыдущей заметке большинство современных браузеров поддерживает свойство
Я модифицировал предыдущий пример так, чтобы он работал в FireFox и сделал для остальных браузеров поддержку через их родные свойства. Получилось несколько громоздко, но это первый в интернете пример, работающий без JavaScript:
<style type="text/css">
body { background: white; color: black; font-family: Arial; font-size: 16px }
.crop div div
{
text-overflow: ellipsis; /* Internet Explorer 6.0 и выше, Safari, Konqueror */
-o-text-overflow: ellipsis; /* Opera 9.0TP1 и выше */
white-space: nowrap;
width: 100%; /* для IE */
overflow: hidden;
}
.crop ins, .crop del { display: none } /* скрываем свои хаки от остальных браузеров */
/* стили только для FF, см. /all/1623 */
@-moz-document url-prefix()
{
/* ширина «…» — 16px, высота строки — 18px */
.crop { overflow: hidden; height: 18px; width: 100% }
.crop div { clear: none; float: left }
.crop div div { white-space: nowrap; overflow: hidden; margin-right: 16px; width: auto}
.crop ins { float: right; margin-left: -16px }
/* margin делаем на -1px уже, чем ширина «…», чтобы блок «свалился» чуть раньше */
.crop del { float: right; color: white; background: white; width: 16x; margin-left: -15px }
.crop del, .crop ins { display: block; text-decoration: none }
}
</style>
<div style="max-width: 700px; margin-left: 10px">
<div class="crop">
<div>
<div>Who let the dogs out (woof, woof, woof, woof)!</div>
<ins>…</ins>
<del>…</del>
</div>
</div>
</div>Вот такая эмуляция
Урезаем текст средствами CSS: concept proof
Возникла у меня на днях задача — обрезать текст средствами браузера с красивым многоточием, если текст не умещался. Обычно такую проблему решают через JavaScript, но мне пришло в голову сделать это средствами CSS, я даже сразу придумал откуда можно начать.
В «резиновом» контейнере заключаем текст, в его конце должен быть плавающий элемент, справа перекрывающий родительский слой и уходящий за его пределы. Когда строка умещается по ширине (и браузер не пытается её перенести), этот элемент перекрывает многоточие, которое идёт сразу за контейнером. Когда ширины контейнера перестаёт хватает, браузер пытается сделать перенос и переносит перекрывающий слой на следующую строку, многоточие «открывается».
В качестве concept proof я накидал небольшой пример, который сразу заработал в «Опере» и «Сафари», FF2 и IE7 возможностями победнее, они не потянули, видимо, в них придётся убрать селектор «:after» и заменить всё тегами с многоточиями внутри.
Сам код:
<style type="text/css">
body { background: white; color: black; font-family: Arial; font-size: 16px }
div.crop { width: 100%; height: 20px; overflow: hidden; z-index: 1 }
div.crop div { float: left; width: auto }
div.crop:after { content: '\2026'; position: relative; z-index: 2; background: white; margin-left: -16px }
div.crop div:after { content: '\2026'; position: relative; z-index: 3; background: white; color: white }
</style>
<body>
<div class="crop"><div>Текст не умещается в контейнер, до того он длинный</div></div>
<div class="crop"><div>Текст не умещается в контейнер</div></div>
</body>Логотип Blok
Как многие наверное знают, движок моего блога называется «Blok». Основные особенности — всё на файлах (никаких баз данных, так интереснее) , никакого интерфейса администрирования через веб, максимальное использование чужих сервисов и RSS как средство оповещения о чём угодно.
У такого замечательного движка до сих пор не было логотипа. Я
Сейчас придёт Смирнов и скажет, что логотип полная лажа.
Какие форматы изображений поддерживает Internet Explorer
Цитата из базы знаний Microsoft:
Обозреватель Internet Explorer отображает файлы рисунков с расширениями ART, WMF, EMF, PNG, MOV, XBM, AVI, MPG, GIF, JPG, MPEG и BMP.
MOV, AVI, MPG и MPEG — это, конечно же, не рисунки. Но IE умеет их поддерживать в теге IMG. WMF и EMF — это Windows Media File и Enhanced Metafile, форматы, которые были введены Microsoft ещё в 90x годах. ART — формат графики от America OnLine (похоже не поддерживается с IE7), XBM — текстовый формат графики
XBM, кстати, неплохой формат был. Самое смешное, что его можно было внедрять
Загрузка изображений в Blok
Проблема с загрузкой изображений через «Semagic» решилась куда проще (напомню, что у меня на сайте нет
Мой движок анализирует нет ли во введённых данных тега IMG с data URL, выдёргивает из него данные, кладёт на диск в виде изображения, а обратно отдаёт тег уже
Cursor CSS
Заношу себе в закладки хорошую статью с сайта QuirksMode, рассказывающую и наглядно показывающую (если поводить мышкой по названиям свойств) какие значения
В статье есть смешное место — написано, что значение «url» (помечено как «Microsoft», т. е. собственное свойство IE) не поддерживается браузерами Internet Explorer.
На деле Internet Explorer требует указывать курсоры в форматах .cur или .ani, тогда как в редакции CSS3 (где данное свойство заимствовано и расширено) курсор может быть в любом формате, поддерживаемом браузером (для Gecko это BMP, JPG, CUR, GIF, SVG и XBM), плюс должны быть указаны координаты активной точки (hotspot) курсора.
data URL в IE ★
Пару лет назад я занимался проблемой data URL в Internet Explorer, добился определённых результатов, но то, что получилось, использовать было невозможно. Data URL (иногда его ещё называют «протокол data:») — возможность вставлять ресурсы (графику, CSS, JavaScript и так далее) в HTML код.
Выглядит это примерно так:
<img
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7" />В Data URL указывает тип содержимого и способ его кодирования. Способа кодирования два — base64 (именно он и указан в примере), увеличивающий содержимое на треть и URL encoding (в этом случае способ кодирования не указывается) — привычный многим способ кодирования при помощи %xx, в лучшем случае вообще не увеличивает размер содержимого, в худшем — увеличивает в три раза.
Кстати, в настоящее время IE8b1 поддерживает data URL, но, увы, длиной не более 32Кб.
Теперь амбула.
Вчера ночью мне пришла в голову идея как можно попытаться корректно совместить 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).'"';
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} type='\n{$data['mime']}'><img "
."src='mhtml:http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}!{$name}' {$data[3]}{$style} /></object>\n\n"
."<!--\n"
."--=_NextPart_01C6A9B1.539AB070-->";
return true;
}У данного метода, по сравнению с обычными data URL есть масса ограничений: необходим специальный заголовок в начале файла, т. е. этот метод невозможно использовать на чужих сайтах, этим методом нельзя воспользоваться (по крайней мере не в таком виде) для включения ресурсов внутрь CSS или JavaScript. В принципе, тут есть достаточно большое поле для экспериментов, возможно все или некоторые из проблем можно решить.
В разделе «храню» есть пример, который можно потестировать на имеющихся у вас браузерах. Уже протестировано на Opera 9.25 и 9.50b, FF 2.0.0.13 и 4 (Minefield), Safari 3.1 (Safari под iPhone — тоже), Internet Explorer 6.0SP2 и 7.0, Sony PSP browser, Opera mini, Netscape Navigator 9.0.0.5.
PHP 5.3.0 jumps to Basic
BLOK: MetaWeblog API, FotoBuilder API
Я, когда писал движок для своего сайта (до сих пор недописанный, кстати), сразу расчитывал на то, что
Протокол достаточно простой, но описан очень плохо. Как бы то ни было, я его реализовал. Один недостаток — загрузка изображений. В протоколе flat такой возможности нет. Почесав репку, я посмотрел на обилие описанный протоколов и выбрал очень простой MetaWeblog. Протокол излишне многословен (даже по меркам XML, как мне кажется), но зато реализуется за час.
Теперь ещё хочу посмотреть Windows Live Writer, но через штатный инсталлятор мне поставить его не удаётся, грешу на прокси. В общем, остаюсь пока на Semagic, но с загрузкой изображений надо
Попытался сделать это наскоком, не удалось. Видимо (это обычно для документации LiveJournal) пропустили
Вышел публичный билд «Оперы», проходящий ACID3
Пару дней назад «Опера» прошла тест ACID3, но публичного билда, подтверждающего это событие, не было. Сегодня стал доступен специальный билд, который демонстрирует прохождение теста (есть версии для Windows и Linux). Я себе его скачал, посмотрел, тест действительно проходит, но сайты открывает ужасно, видимо, это специальная ветка разработки, патчи из которой будут включены в «Оперу» позднее. Так же эта версия действительно поддерживает web fonts и цвета в виде rgba/hsla.
Кстати,
Сегодня же вышел еженедельный снапшот «Оперы», где большое внимание уделено улучшению производительности. Удалось достигнуть ускорения
CSS IE: -ms-interpolation-mode
У Internet Explorer
У свойства два значения —
img.highqual { -ms-interpolation-mode:bicubic }
img.nearestn { -ms-interpolation-mode:nearest-neighbor }Opera прошла ACID3, WebKit — тоже
Напомню, ACID3 — специальный тест, проверяющий качество поддержки браузерами современных стандартов. На момент появления этого теста (конец прошлого года), браузеры проходили его весьма слабо, после появления — двигались к финишу семимильными шагами. Лично мне казалось, что быстрее всего
И вот, невероятная новость — первым браузером, который проходит тест ACID3, является «Опера». В публичном доступе билд, проходящий тест, появится в течении следующей недели.
Ситуация несколько осложняется тем, что ребята, которые делают движок «Сафари» WebKit (он прошёл тест чуть позднее), нашли в ACID3 баг — для прохождения теста пришлось нарушить спецификацию SVG 1.1, тест был исправлен и теперь «Опера» проходит тест на 99%. На мой взгляд, это значения не имеет — тот тест, к которому все стремились, «Опера» прошла первой.
Помимо этого упомянутый билд «Оперы» включает в себя поддержку CSS3 RGBA, HSLA и Web Fonts. RGBA/HSLA — это возможность при указании цвета задавать прозрачность, а Web Fonts — технология, позволяющая использовать на странице произвольный шрифт (впервые появилась у Internet Explorer много лет назад, недавно — у «Сафари», и теперь ещё и в «Опере»).
99 бутылок: РАЯ, MS HTML
44. РАЯ (русский алгоримический язык). Язык, придуманный академиком Ершовым для обучения детей программированию. Все названия на русском языке, что, впрочем, совершенно не отвлекает. Для написания программы я использовал падучую реализацию языка с сайта «Инфомир».
Особо о языке сказать нечего, разве что понравились многословные имена переменных, процедур и функций (можно записывать через пробелы), показалось интересным наличие исполнителей (вроде известной «черепашки») и не понравилось отсутствие конкатенации строк и операции «неравно» (в документации я этого не нашёл).
| Написал Евгений Степанищев aka BOLK
алг
нач
цел сколько пива
нц для сколько пива от 99 до 1 шаг -1
выводим пиво(сколько пива, " on the wall, ")
выводим пиво(сколько пива, ".")
вывод нс, "Take one and pass it around,", нс
выводим пиво(сколько пива, " on the wall.")
вывод нс, нс
кц
вывод "No more bottles of beer:", нс
вывод "Go to the store and buy some more:", нс
вывод "99 bottles of beer."
кон
алг выводим пиво(цел пива, лит окончание)
нач
вывод число пива(пива), " bottle"
если пива > 1 или пива=0
то вывод "s"
все
вывод окончание
кон
алг лит число пива(цел пива)
нач
если пива=0
то знач:="No"
иначе знач:=цел_в_лит(пива)
все
кон43. MS HTML. Конечно, HTML не является языком программирования. Но и на этом языке разметки, применяя особенности Internet Explorer, можно написать песню про пиво. Лишнюю строку пришлось «спрятать» за экран. Работает, естественно, только в Internet Explorer.
<!-- Written by Evgeny "BOLK" Stepanischev -->
<style type="text/css">
.outer { position: absolute; top: -20px }
body { background: white; margin: 0; padding: 10px }
body, table { font-size: 11px; font-family: Tahoma }
table, td, tr { margin: 0; padding: 0; border-collapse: collapse }
</style>
<body>
<xml id="dataOuter">
<row>
<d><o>9</o></d>
<d><o>8</o></d>
<d><o>7</o></d>
<d><o>6</o></d>
<d><o>5</o></d>
<d><o>4</o></d>
<d><o>3</o></d>
<d><o>2</o></d>
<d><o>1</o></d>
</row>
</xml>
<xml id="dataInner">
<row>
<d><i>9</i></d>
<d><i>8</i></d>
<d><i>7</i></d>
<d><i>6</i></d>
<d><i>5</i></d>
<d><i>4</i></d>
<d><i>3</i></d>
<d><i>2</i></d>
<d><i>1</i></d>
<d><i>0</i></d>
</row>
</xml>
<xml id="dataInnerSingle">
<row>
<d><i>9</i><s>s</s></d>
<d><i>8</i><s>s</s></d>
<d><i>7</i><s>s</s></d>
<d><i>6</i><s>s</s></d>
<d><i>5</i><s>s</s></d>
<d><i>4</i><s>s</s></d>
<d><i>3</i><s>s</s></d>
<d><i>2</i><s>s</s></d>
<d><i>1</i></d>
</row>
</xml>
<div class="outer">
<table datasrc="#dataOuter">
<tr>
<td>
<table datasrc="#dataInner">
<tr>
<td>
<span datafld="o"></span><span datafld="i"></span> beer bottles
of beer on the wall.<br /><br />
<span datafld="o"></span><span datafld="i"></span> beer bottles
of beer on the wall,
<span datafld="o"></span><span datafld="i"></span> bottles of beer.<br />
Take one and pass it around,<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table datasrc="#dataInnerSingle">
<tr>
<td>
<span datafld="i"></span> beer
bottle<span datafld="s"></span> of beer on the wall.<br /><br />
<span datafld="i"></span> beer
bottle<span datafld="s"></span> of beer on the wall,
<span datafld="i"></span> bottle<span datafld="s"></span>
of beer.<br />
Take one and pass it around,<br />
</td>
</tr>
</table>
No beer bottle of beer on the wall.<br />
<br />
No more bottles of beer...<br />
Go to the store and buy some more...<br />
99 bottles of beer.
</div>
</body>Safari: шрифт на тёмном фоне
Ни для кого не секрет, что браузере «Сафари» под Windows использует тот же метод сглаживания, что и под Mac OS. Один из его известных недостатков (кроме сломанных глаз) — текст на тёмном фоне получается (не кажется, а получается) жирнее, чем на светлом, что прекрасно иллюстрирует нижеприведённый скриншот:
Часто это очень неприятно, потому что не позволяет добиться одинакового отображения вёрстки сайта в разных браузерах и портит дизайн. Решается это проблема очень просто, в стилях нужно прописать следующую магическую строку для текста:
.our_text { text-shadow: 0 0 0 #000 }Фильтрация CSS по браузеру
Я
Способ для FireFox мне подсказали в комментариях на «Хабре», для Internet Explorer я придумал его самостоятельно. Вот пример, иллюстрирующий идею:
.class { color: black } /* для всех остальных браузеров */
.class, noindex:-moz-any-link { color: blue } /* стиль только для Mozilla FireFox */
.class, v\:* { color: red } /* стиль только для Internet Explorer */Можете попробовать самостоятельно — фильтрует идеально. В примере класс «class» даст тегу, к которому его применят, в FireFox — голубой цвет текста, в IE — красный, а в остальных браузерах — чёрный.
Валидный NOINDEX
Для многих валидная вёрстка — очень важная штука. На мой взгляд, валидность самоцелью быть не может и я знаю много ситуаций, где ей можно пожертвовать. Одна из этих ситуаций — использование тега NOINDEX. Для тех, кто не знает, поясню: этот тег показывает поисковой машине какую часть текста вашей страницы индексировать не нужно.
Т. е. присутсвие этого тега необходимо, но в стандарт HTML он не входит. Как быть, если требуется достичь валидности любой ценой? Обычное решение — выдавать отдельную копию страницы для поисковых машин. Изяществом оно не обладает, тем более есть способ, если не лучше, то проще. Автор утверждает, что способ был им протестирован. Я немного изменил код, потому что такое использование кажется мне более логичным:
<del class="inv"><![CDATA[<noindex>]]></del>
То, что запрещено к индексации
<del class="inv"><![CDATA[</noindex>]]></del>В таблице стилей прописывается «display: none» для класса inv:
.inv { display: none }
PHP: простой способ определения кодировки UTF-8
Придумал простой способ определения кодировки
if (preg_match('//u', $string)) { /* у вас UTF-8 */ }Работать должно, думаю, с версии PHP 4.3.5, в документации сказано:
Dictatorship IE vs. Open Source Dictatorship
Удивительная избирательная слепота у людей. На «Хабре» опубликовали статью «Новые возможности HTML и CSS в Safari 3.1», где народ восторженно обсуждает возможности, появившиеся в браузере «Сафари». Этим возможностями сто лет в обед — те же яйца, только боком уже
Это вообще
Я составил небольшую таблицу соответствий технологий IE и их реализаций в других браузерах:
Internet Explorer | Остальные браузеры |
|---|---|
Таблицу можно продолжать. Учтите, что всё, что перечислено в ней слева, появилось ещё шесть лет назад.
Мне интересно, кто первым реализует «data binding» из IE, при помощи этой технологии я написал «Песню о пиве» на HTML.