ie

Microsoft серьёзно взялась за стандартизацию своего браузера. В блоге IE появилась статья, где рассказывается о дальнейших шагах по преобразованию браузера. Например, все расширения CSS будут теперь начинаться с префикса («-ms-»), как того требуют стандарты. Причём речь идёт не о нововведениях (IE7 уже поддерживает свойство «-ms-interpolation-mode» с префиксом), а о существующих свойствах. К примеру, «zoom» будет теперь называтся «-ms-zoom».

Хорошая новость: фильтры будут! только теперь они будут называться «-ms-filter» и выглядеть как обычное свойство, взятое в кавычки. Т. е. для указания прозрачности (загибайте пальцы) мы будем использовать: opacity (CSS3), -moz-opacity (старые FF), -khtml-opacity (старые Konqueror), filter (IE ниже 8) и -ms-filter (IE8 и выше).

Для сайтов, которые переделать невозможно (из-за объёма или запущенности), остаётся возможность использовать Compatibility View (режим обратной совместимости).

Вышла вторая бета Internet Explorer 8.0, в списке поддерживаемых операционных систем всё-таки есть Windows XP.

Печальная новость — CSS expression больше не будут функционировать стандартном режиме этого браузера, но они всё ещё поддерживаются в режимах IE7Strict и IE7Quirks. Не понимаю для чего это. Как теперь эмулировать недостающее?

Интересных новых штук несколько: новая стартовая страница, цветные закладки, нормальный autocomplete строки адреса. Из технических штук мне понравились методы для безопасного разбора и проверки JSON (JSON.parse, JSON.stringify).

DOM storage, XDomainRequest и Connectivity Events были, кажется, и в первой бете.

Ощущение, что ребята серьёзно взялись за свой браузер. С версии 8.5 это даже можно будет использовать.

Так-так, вот и FireFox 3.1, вслед за «Оперой» начинает поддерживать тег VIDEO и стандарт Ogg Theora для этого видео. Если так дело дальше пойдёт, то Ogg станет форматом для тега VIDEO де факто.

Из других интересных новостей — Vladimir Vukićević разработал ActiveX для IE, который повторяет функциональность этого тега пока только частично, но работа продолжается. Тот же автор обещает в будущем поддержку тегов video и audio, тоже, видимо, в формате ActiveX.

Оказывается, есть немного кривой, но способ заставить IE показывать незнакомые ему теги в глобальном namespace! В частности, это поможет уже сейчас использовать семантические теги из HTML5.

Решение основано на интересном хаке:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

Есть другое решение, но оно требует использования namespace. В IE есть всеми забытая технология custom tags. Когда появился черновик HTML5 я пытался использовать её, чтобы внедрить в документ новые теги:

<html xmlns:html5="http://www.w3.org/html/wg/html5/">
<head>
<style type="text/css">
html5\:footer {
    display: block;
    border: 1px solid black;
    padding: 10px; 
}
</style>
</head>
<body>
<html5:footer>This is footer!</html5:footer>
</body>
</html>

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

Далее дело техники. Например, если взять Nginx, в нём есть модули rewrite, browser и sub. Первый умеет выполнять условия, второй — определять браузеры, третий — заменять одну строку на другую. Получается что-то подобное:

modern_browser  msie  1.0;

if ($ancient_browser) {
    sub_filter 'html5:' ''
}

Надо сразу оговориться, что это не готовое решение, а намётки: кроме «html5:» надо так же вычистить «html5\:».

Совершенно случайно обнаружил поразительную штуку: оказывается IE, загружая картинку через VML, понимает альфа-прозначность у PNG:

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style>
    v\:* { behavior: url(#default#VML); display: inline-block; }
</style>
<v:image src="http://www.w3.org/Graphics/PNG/alphatest.png" style="width: 380px; height: 287px"></v:image>

К сожалению, есть существенный недостаток: картинка отображается чувствительно медленнее.

Итак, у нас, оказывается, есть надёжные CSS-фильтры для всех современных браузеров. О некоторых я уже писал, но перечислю все (стиль срабатывает только в указанном браузере):

<style type="text/css">
 /* только для Opera 9.50 и выше */
 noindex:-o-prefocus, tag { display: none; }

/* только для FireFox */
noindex:-moz-anylink, tag { display: none; }

/* только для FireFox /all/1623 */
@-moz-document url-prefix()
{
        tag { display: none }
}

/* только для Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
           tag { display: none }
}

xxx\:*, tag { display: none } /* только для IE */

</style>

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

Дома на ноуте у меня стоит Internet Explorer 8.0beta1. Принёс домой наш новый сайт, посмотреть как он будет смотреться под этим браузером. Гадский, гадский «Майкрософт»! Сайт (естественно) свёрстан в strict, так в этом браузере в strict режиме не работают фильтры! Естественно, CSS-свойство «opacity» там тоже не работает, так что прозрачность сделать не удаётся.

Кроме этого, не работают custom tags, что очень странно — другие-то браузеры их поддерживают. Надо будет попробовать переключить IE в режим совместимости с IE7, при помощи соответствующего meta-тега, жалко так делать, но что поделаешь — прозрачность нужна.

Ну и чтоб два раза не вставать — SVG в IE8 не будет.

Дополнение: переключение режима при помощи meta не дало результатов.

Как мне справедливо подсказали в предыдущей заметке большинство современных браузеров поддерживает свойство text-overflow, позволяющее добиться того, что я сделал в предыдущем примере одной строкой. Работает для всех браузеров, кроме FireFox, у него таких стилей нет.

Я модифицировал предыдущий пример так, чтобы он работал в 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>&hellip;</ins> 
    <del>&hellip;</del>
</div>
</div>

</div>

Вот такая эмуляция text-overflow в FireFox.

Цитата из базы знаний 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 — текстовый формат графики в X-системах (не поддерживается с IE6SP1).

XBM, кстати, неплохой формат был. Самое смешное, что его можно было внедрять в HTML-код без data URL, в том числе и в Internet Explorer.

Пару лет назад я занимался проблемой 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.

У Internet Explorer с 7-й версии, оказывается, есть очень довольно любопытное CSS-свойство: «-ms-interpolation-mode», которое позволяет устанавливать режим масштабирования (интерполяции) для изображений.

У свойства два значения — «nearest-neighbor» (менее качественный режим по ближайшему соседнему) и «bicubic» (более качественный бикубический метод). Кстати, обратите внимание, что новое свойство начинается с префикса, как это рекомендует делать W3C. Пример использования:

img.highqual { -ms-interpolation-mode:bicubic }
img.nearestn { -ms-interpolation-mode:nearest-neighbor }

По-умолчанию, IE масштабирует изображения по ближайшему соседнему, если масштаб страницы 100% и бикубическим методом в остальных случаях.

Я как-то уже писал о том как подключить целый блок CSS только для FireFox, но чаще нужно подключить не блок, а всего один-два стиля. В этом случае удобно воспользоваться тем фактом, что браузер обязан игнорировать стиль, если в селекторе встречается что-то незнакомое.

Способ для FireFox мне подсказали в комментариях на «Хабре», для Internet Explorer я придумал его самостоятельно. Вот пример, иллюстрирующий идею:

.class { color: black } /* для всех остальных браузеров */
.class, noindex:-moz-any-link { color: blue } /* стиль только для Mozilla FireFox */
.class, v\:* { color: red } /* стиль только для Internet Explorer */

Можете попробовать самостоятельно — фильтрует идеально. В примере класс «class» даст тегу, к которому его применят, в FireFox — голубой цвет текста, в IE — красный, а в остальных браузерах — чёрный.

Удивительная избирательная слепота у людей. На «Хабре» опубликовали статью «Новые возможности HTML и CSS в Safari 3.1», где народ восторженно обсуждает возможности, появившиеся в браузере «Сафари». Этим возможностями сто лет в обед — те же яйца, только боком уже давным-давно реализованы в Internet Explorer, причём в версиях 4.xx—5.5.

Это вообще какое-то чудо — все стандарты от Internet Explorer называются «мировым злом» (например, «фильтры»), а стандарты от других производителей — охренительными фичами (вроде тех же «transforms» или CANVAS от Apple). При этом последние шесть лет целая куча функционала была скомуниҗҗена с IE, а сколько там ещё можно утащить (самый известный пример, конечно же, HttpRequest, который придумали в Microsoft и на котором работает AJAX)!

Я составил небольшую таблицу соответствий технологий IE и их реализаций в других браузерах:

Таблицу можно продолжать. Учтите, что всё, что перечислено в ней слева, появилось ещё шесть лет назад.

Мне интересно, кто первым реализует «data binding» из IE, при помощи этой технологии я написал «Песню о пиве» на HTML.

Вышла первая бета Internet Explorer 8. Уже можно качать и пробовать, доступны версии для Windows XP, Vista, Server 2003. Проходит 17% теста ACID3 (IE7 проходил 13% теста), тест ACID2 — проходит полностью, CSS3 selector test — 335 тестов из 578 пройдено (Opera 9.50b, к примеру, проходит этот тест полностью).

После установки IE8 спрашивает не желаете ли вы его сделать браузером по-умолчанию (я не возжелал), а так же спрашивает не нужно ли импортировать откуда-либо закладки, например, из браузера  «Опера», который обнаружен не моей машине.

То, что видно навскидку — режим эмуляции IE7, подсвечивание домена в строке URL, корректная работа с favicon (или это уже в седьмой версии было?), открытие окна в фоновой закладке кликом мышиным колесом, как в остальных браузерах, и встроенные инструменты для разработчика (просмотр DOM, CSS, отладка JavaScript и так далее), а после подения он спрашивает восстанавливать ли закладки.

Появилась технология Web Slices, (между прочим — это микроформат) комментировать которую пока не берусь, но выглядит забавно, очень интересная вещь Activities, обязательно посмотрите ролик, даже если не понимаете английский.

Теперь версия IE на моей машине выглядит так: 8.0.6001.17184. Некоторые глюки, кстати, видны невооружённым глазом — кое-где что-то подвисает, иногда в окно нельзя переключиться и так далее.

И ещё раз к теме быстродействия JavaScript. Jeff Atwood произвёл ряд JavaScript-тестов на разных браузерах. В результате получилась любопытнейшая картинка. Расшифровка тестов:

• 3d — тест на основе библиотеки работы с 3D, написанной на JavaScript (испытывается —
• быстродействие массивов и чисел с плавающей точкой)
• access — массивы, свойства объектов, доступ к переменным
• bitops — битовые операции на целых числах
• controlflow — циклы, рекурсия, условия
• crypto — криптоалгоритмы (AES, MD5, SHA1)
• date — производительность при работе с объектом «Date»
• math — различные математические операции
• regpexp — регулярные выражения
• string — работа со строками

Хуже все справился IE7, но, если не принимать во внимание операции для работы со строками, он обгонит FireFox, который сейчас занимает предпоследнее место. В комментариях есть тестирование FireFox 3 b2, вцелом он справляется на 23% лучше, чем вторая версия, но на некоторых тестах проигрывает.

Выдержка из статьи «IE 8: On the Path to Web Standards Compliance — ACID 2 Test Pass Complete»:

The IE dev team checked in a bunch of code that included several new features implemented in the core rendering engine that enable IE to pass the ACID 2 test!

По-русски — разрабатываемый IE8 проходит тест ACID2. Для тех, кто не знает — это достаточно навороченный тест, который позволяет определить насколько хорошо браузер поддерживает стандарты (в частности — HTML 4.01 и CSS 2). Например, FireFox 2 до сих пор ACID2 не проходит. Это очень значимое событие. Если Internet Explorer 8.0 после своего выхода вытеснит более отсталые версии этого браузера, то браузеров, не поддерживающих стандарты в достаточной мере в интернете не останется и верстальщики наконец-то вздохнут спокойно.

В исходной статье есть даже видео, где можно наглядно увидеть прогресс в отображении ACID2. Бету обещают в первой половине 2008 года.

Мне очень нравится проект «UpgradeBrowser», это очень разумный способ снижения доли устаревших Internet Explorer в интернете. Смысл в следующем. Вы устанавливаете у себя на сайте специальный JavaScript-код перед закрывающим тегом BODY:

<!--[if lte IE 6]>
<script type="text/javascript" src="http://upgradebrowser.org/ie6fuck.js"></script>
<![endif]-->

Так же код ie6fuck.js можно скачать себе и вызывать локально. Пользователи Internet Explorer 6.0 и ниже увидят сверху сайта следующую симпатичную надпись:

Ссылка «обновите его» ведёт на страницу, где рассказывается о последних версиях Internet Explorer, FireFox и Opera. Чисто психологически проще поставить новую версию программы, чем переходить на её аналоги, так что на этой странице очень разумно первым упоминается Internet Explorer 7.0.

Что так же немаловажно, эту панельку можно закрыть (в оригинале справа есть крестик) и она не будет появляться ещё 30 дней. Кстати, она очень напоминает стандартную панель Internet Explorer, так что есть шанс, что многие пользователя подумают, что обновиться предлагает сам браузер.

Я код себе уже поставил, присоединяйтесь к проекту.

Утверждаю и буду продолжать утверждать, что Internet Explorer — самый недооценённый браузер века интернета, а все более поздние идеи — суть калька технологий, которые в нём уже есть. Ещё одна технология, с которой я познакомился в году 1998. Тогда (впрочем, как и многие сейчас) в качестве «растяжек» для ограничения минимальной ширины контента, использовали так называемый «нуль-gif» — прозрачную GIF-картинку 1x1 пикселей, которая вставлялась внутрь контейнера. Картинке выставлялась нужна ширина и высота, таким образом контейнер не мог «схлопнуться».

Способ настолько популярен, что некоторые веб-серверы, например «nginx» (в модуле http_empty_gif) или 0W (директива EMPTY) умеют встроенные средства, чтобы её генерировать, причём 0W умеет даже менять её цвет.

В те времена, как я уже говорил, существовали только две программы, имеющие право носить звание «браузера» — это Internet Explorer и Netscape Navigator. Их различия, часто, были настолько коренными (в разнице отображения, а то и названиях тегов), что изготавливались две версии сайта — под два браузера и пользователя автоматически (или предлагая выбор) перебрасывали на одну из них. В частности, такая особенность вёрстки позволяла задействовать мощности браузеров на полную силу.

Custom tag — технология в Internet Explorer, позволяющая (в определённых пределах) «придумывать» свои теги. Что-то похожее есть сейчас в браузере «Опера» — можно использовать любое сочетание букв как тег, задав ему произвольный стиль, это хороший ход, потому что какую-то часть тегов можно описать в виде CSS-файла, не заморачиваясь над встроенной обработкой. Скорее всего, это было следствием поддержки «Оперой» WAP-сайтов (кстати, если вы не знали, то попробуйте — «Опера» отображает WAP-сайты!).

В Internet Explorer такой свободы нет, custom tag «работает» только в определённом пространстве имён, но есть и свои, очень существенные плюсы. Если вы не знаете, что такое пространство имён, не расстраивайтесь — на понимании сути это никак не сказывается. В следующем примере префикс «b:», с которого начинается тег и есть «пространство имён», а «xmlns:b» — его идентификатор.

Итак, в те далёкие времена я делал «растяжки» через специально придуманный custom tag «spacer», с появлением в 1999-м году IE 5 и expression в нём (специальные CSS-свойства, позволяющие использовать JavaScript внутри CSS) это стало делать ещё удобнее.

<html xmlns:b="/">
<style type="text/css">
b\:spacer
{
    display: inline-block;
    width: expression(this.width+'px');
    height: expression(this.height+'px');
}
</style>

Слово<b:spacer width="200" height="1"></b:spacer>Слово
</html>

В примере задан тег «spacer» в пространстве имён «b» (поэтому он используется с префиксом «b:», custom tags только так и работают). Я использовал expression в CSS, чтобы свойства новоявленного тега попадали в CSS. В «Опере» такой фокус невыполним, к сожалению, хотя свойство «attr» вполне подошло бы для такой цели, но он работает только с атрибутом «content».

В тех же рамках можно усложнить поведение — добавить значения по умолчанию, новые атрибуты, можно назвать тег для экономии «b:s» , а атрибуты — «w» и «h».

Когда я только начинал выходить в интернет (годах в 1997—1998), обе программы, который в то время считались браузерами — Internet Explorer 4.0 и Netscape Navigator 4.0 умели показывать так называемые «embeded fonts» («внедрённые шрифты», сейчас эту технологию всё чаще называют «web fonts»). IE использовал собственный формат — EOT («Embedded Font Technology»), а компания Netscape — лицензированную у Bitstream технологию.

С помощью «внедрённых шрифтов» в браузер можно было подгружать любой специально подготовленный шрифт и писать тексты им (например, в моём родном Татарстане так делали сайты на татарском языке, ещё до введения татарского алфавита на основе кириллицы в Unicode). Причём IE позволял включать в шрифт не все буквы, а только те, которые могут понадобиться. Технологию незаслуженно ругают — говорят, что из горе-дизайнеров на сайты будет больно смотреть. Запрещать инструмент только потому, что наверняка будут люди, которые не научатся им пользоваться?

Как обычно, то, что появляется в IE, со временем появляется и в других браузерах, только в другом виде. В данный момент «web fonts» является частью не вышедшей ещё спецификации CSS3 (впервые встречается ещё в CSS2) и уже есть браузер, который поддерживает часть возможностей — движок браузеров WebKit (на нём построен, например, браузер Safari) уже начал поддерживать правило «@font-face», позволяющее указывать загружаемый шрифт. Технический директор норвежской компании «Opera Software» Håkon Wium Lie обещал недавно, что «Опера» вот-вот начнёт поддерживать «@font-face», но WebKit обошёл на повороте.

В CSS это всё выглядит следующим образом:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Указывается путь до шрифта, его имя в документе и его формат («truetype»).