html

Выдержка из статьи «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 года.

Из HTML5 официально исключены форматы Ogg Vorbis и Ogg Theora (предназначенные для использования проигрывания мультимедия в тегах AUDIO и VIDEO). Против формата выступали фирмы Nokia и Apple.

Напомню корень проблемы: в HTML есть стредство для внедрения рисунков и определены форматы (GIF, PNG, JPEG), которые гарантированно будут показываться во всех графических браузерах, но нет ничего подобного для видео и аудио. Нет единых форматов и средств управления проигрыванием из браузера через JavaScript. С появлением HTML5 ситуация должна быть исправлена появлением тегов VIDEO и AUDIO и введением стандартов кодеков, которые должны поддерживаться всеми браузерами.

Возможно, вместо форматов Ogg, будут использованы H.264 (MPEG-4) для видео и AAC для звука. Аргументы — тот же H.264 выбирается из-за аппаратной поддержки, что очень критично на мобильных устройствах, тогда как для Ogg придётся писать довольно тяжеловестный по размеру кодек, кроме того, есть опасения по поводу патентов на эти форматы, опасаются, что часть формата может быть покрыта неизвестными патентами.

Так же ходят слухи, что основной причиной того, что форматы Ogg исключили, является то, что они не поддерживают DRM (средства для защиты авторских прав), это соображение возникло, большей частью из-за того, что противником форматов Ogg являются именно Nokia и Apple.

Утверждаю и буду продолжать утверждать, что 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».

На первой странице студии Артемия Лебедева сегодня была новость о сайте «Хэлплайна» с движущимся, при наведении мышки, изображением пластмассовой уточки. Сама новость мне не интересна, а решение, которое позволяло уточке двигаться я посмотрел. Как и ожидалось — сдвиг позиции фонового изображения. Но есть и кое-что новое для меня — вызов «document.execCommand(„BackgroundImageCache“,false,true)» явно для Internet Explorer.

Как оказалось, это решение застарелого бага IE6 с миганием фона, подложенного под ссылку. Подробное описание описание условий возникновения бага можно найти в статье «Minimize Flickering CSS Background Images in IE6». Баг заметен, если в настройках кеширования браузера выбрать «Every visit to the page» для параметра «Check for newer versions of stored pages».

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

try {  document.execCommand('BackgroundImageCache', false, true);} catch(e) {}

Браузер «Сафари» под «Мак», оказывается, умеет отображать PDF (и TIFF, кстати, тоже) в теге IMG. Т. е. как простую картинку. Поскольку в OSX есть встроенная поддержка PDF, такое поведение браузера, видимо, вытекает из того, что картинки в браузере отображаются через какой-то системный компонент. Причём, с отображением PDF через тег OBJECT у «Сафари» есть проблемы, если только не установить специальный плагин от фирмы Adobe.

А вот браузер «Опера», помимо стандартного набора JPEG/PNG/GIF/XBM умеет отображать ещё и ICO. Почему этого не делают остальные браузеры — загадка, ведь им всё равно приходится работать с этим форматом, чтобы отобразить favicon.ico.

Как известно — FireFox последний из браузеров, который не поддерживает мягкий перенос (shy). Explorer, как один из продвинутых браузеров (не надо смеяться, я не шучу), начал его поддерживать самым первым. Мягким переносом верстальщик может указать где в длинном слове, при необходимости, можно сделать перенос, например, если слово не умещается в колонку. Я прочитал несколько статей на эту тему, но нигде эту задачу решить не смогли. Между тем, в FireFox действует нестандартный тег WBR, который позвляет добиться того же самого, но без символа переноса. Что не совсем то. Кстати, CSS применить к WBR нельзя. Как же быть?

Проблему я решил, но, увы, с потерями: придётся подбирать один параметр для каждого вида шрифта, слово разорванно тегом и поисковые машины проиндексируют его по частям, а полный (совместимый с Opera, FF и IE6) вариант довольно громоздок.

Во-первых, я сразу отказался от тега WBR, потому что любой HTML-валидатор укажет на то, что тег нестандартный. В FireFox действует Zero-width space, символ с кодом 8203, «пробел нулевой ширины». Он позволяет добиться того же самого — разорвать слово в определённом месте.

С идеей как это всё реализовать, я определился сразу — строка при переносе должна открывать концевой символ. А, если переноса нет, вставать поверх него. Вдоволь помучавшись с перекрытием через «position: absolute», и селектором «:after», я вдруг вспомнил о теге «Q», где можно указать текст перед и после этого тега (вообще-то указываются там открывающая и закрывающая кавычка, но сути-то это не меняет). Стало значительно проще. Для того, чтобы один символ затёр другой без остатка, я применяю «background: inherit» — наследуя фон из тегов выше.

Итак, один из минусов — это размер символа переноса в вашем экранном шрифте. Задаётся он в стиле (см. ниже) в параметре «margin-right» и для выбранной мной Tahoma равен 0.36em. Полный пример, работающий в FireFox таков (я выбрал «заброшенный» тег «VAR», чтобы реализовать задуманное):

<!-- Soft hyphen emulation in FireFox -->
<style type="text/css">
    body { background: white }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
</style>

<var><q>оченьдлинноеслово&#8203;<var>продолжениеоченьдлинногослова</var></var>

Стоит браузеру разорвать слово в месте, где стоит пробел нулевой ширины и из-под второй половины слова появляется символ переноса. С полным вариантом всё немного сложнее — в Opera всё будет работать и так, в IE — нет. Там масса проблем — символ не будет перекрываться фоном, даже если вынести символ переноса из «Q» в текст, но можно заставить работать «shy». Для этого придётся убрать нулевой пробел, если его оставить в IE рядом с «shy», эффект будет непредвиденным.

Поэтому мы его убираем (кстати, можно попытаться вставить его через атрибут «content» селектором «var>var:before», если текст у нас в Unicode):

<!-- Soft hyphen in FireFox, Opera, IE6 -->
<style type="text/css">
    body { background: gray; font-size: 20px; font-family: Tahoma }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
    * html var b { display: none }
</style>
<var><q>оченьдлинноеслово<b>&#8203;</b>&shy;<var>продолжениеоченьдлинногослова</var></var>

Разбирая заметки сайта за 2000—2003 гг. (всё думаю — конвертировать их или не нужно), наткнулся на старую заметку, где я пытался разобраться с недокументированными тегами браузеров. На тот момент актуальными были Internet Explorer и, почивший ныне, Netscape Navigator (другой браузер под тем же именем зачем-то до сих пор выпускает AOL). Оказалось, что, по меньшей мере, один из «секретных» тегов браузера от Netscape дожил до наших дней — это HYPE.

Его до сих пор можно найти в исходниках ядра Gecko и, соответсвенно, он работает в браузерах, основанных на этом ядре. Основное его назначение туманно, по всей видимости, он должен выводить какую-то картинку и играть мелодию, но только на платформах Unix и Mac:

The hype tag is just for fun. It only effects the UNIX version which can affor to have a sound file compiled into the binary. If we have the memory, create a fake image tag to replace the <HYPE> tag and process it.

Легко убедиться, что тег присутствует, если попробовать в FireFox повесить на него любой CSS стиль. Кстати, тег таким же образом «работает» и в Опере, потому что (и это оказалось для меня большим сюрпризом) в Опере можно использовать любое сочетание букв в качестве тега. Самая старая Опера, которая у меня есть на компьютере — 8.02 прекрасно отобразила красный бордюр вокруг свежеизобретённого мной тега «REDBORDER» со стилем «background: 1px solid red».

Я думаю, что тег, возможно, не совсем бесполезен, так как Internet Explorer за тег его не считает. Возможно, таким образом можно применять CSS к какому-то блоку, незаметно для Internet Explorer или скрывать от него часть контента (применяя «display: none» на тег HYPE).

Самые внимательные, наверное, заметили, что в прошлых заметках у меня на картинке использовалась эмуляция эффекта наведения на ссылку — посмотрите, если навести на картинку мышку, «ссылка», выделенная синим, на картинке подчеркнётся. И это не JavaScript.

Объяснение очень простое — картинка сделана с прозрачностью, далее при помощи CSS под неё подставлен белый фон, а при наведении (селектор «:hover») фон меняется на голубой. Такой же эффект использован на картинке с пистолетом слева (наведите мышку). Ссылка на картинке обязательна — без неё в Internet Explorer (версии ниже 7-й) фон менять не будет, «:hover» просто не сработает. Таблица стилей для этой картинки выглядит вот так:

a.gun:hover img { background: black } /* стиль при наведении мышкой */
a.gun img { margin: 0px; background: white } /* убираем поля в Opera и подкладываем белый фон */

HTML, соотвественно:

<a href="#" class="gun"><img src="gun.gif" /></a>

Если вам не ясно, почему пистолетик «стреляет» (т. е. почему изображение движется, когда наводишь мышку), то тут всё просто — прозрачная область движется (это animated GIF), на белом фоне этого не видно, когда фон меняется, создаётся эффект движущейся пули.

Ещё интересные эффекты можно получить, если использовать альфа-канал (полупрозрачность) в формате PNG, но, к сожалению, об анимации тут придётся забыть.

На хабре есть крайне полезный, но малоизвестный материал «Изучаем наличие layout»:

Множество несоответствий (стандартам) Internet Explorer’а при визуализации веб-страниц может быть устранено путем присвоения конкретным элементам свойства layout. John Gallant и Holly Bergevin называют эти несоответствия «пространственными ошибками», подразумевая, что они часто могут быть исправлены, если задать элементу ширину или высоту. Это ведет к справедливому вопросу: каким образом layout может менять визуализацию одного элемента и совместное отображение нескольких?

Что такое layout в Internet Explorer, почему работает «хак» «height: 1%» и тому подобное — в этой статье. Крайне рекомендую к прочтению и пониманию всем, кто так или иначе занимается вёрсткой сайтов.

Оказывается, в HTML 3.0 должен был войти тег INPUT TYPE=RANGE, но его, по каким-то причинам, не включили в HTML 3.2, который стали поддерживать браузеры. Но тег поддерживается современными браузерами Opera и Safari, насколько я понимаю, как часть стандарта WebForms. FireFox даже последних версий (не говоря уже об IE) этот тег не понимает.

Лично для меня событие недели — появление Opera 9.0 Technology Preview 1. Помимо поддержки XSLT, появления аналога настроек FireFox, только сделанных для человека, а не робота, поддержки Canvas, некоторых селекторов CSS3 и прочего, несомненный интерес представляет поддержка стандарта WebForms 2 — обратносовместимого расширения HTML для разработки различных интерфесов ввода. В частности, картинка на скриншоте делается одним-единственным тегом:

<input type="datetime" step="120" name="start">

и это далеко не самая впечататляющая демострация — просмотрите стандарт, хотя бы по диагонали. Жаль, что это всё удасться использовать не ранее чем лет через пять, прежде всего из-за абсолютного главенства Internet Explorer, уверен, что Gecko/Safari подтянутся, а вот от Microsoft такой резвости ожидать не приходится.

Рисунок ниже отобразится в IE и Mozilla одинаково. Но вот в чём загвоздка: в IE он отобразится даже если выключены картинки, а Mozilla его загрузит прямо с HTML страницы, а не извне.

Почему так происходит? Для IE я вместо атрибута SRC применил аттрибут DYNSRC. Этот специальный атрибут, который понимает только IE, заставляет отображать браузер «динамическое» содержимое — фильмы, музыки и тд. Обрабатывается, он, похоже, так же как тег OBJECT — происходит внедрение ActiveX, который отвечает за показ содержимого. Поэтому картинка показывается и при отключенной графике — ведь IE отображает ActiveX, а уж что там показывает ActiveX браузера не касается.

Что касается Mozilla, то люди, которые устанавливают себе такой браузер вполне могут глянуть в код. Вкрадце: используется протокол data, который позволяет внедрять произвольные данные в HTML-код.

Читать дальше

Дополнение:Оказывается, картика покажется не во всех IE, закономерность пока не установлена.

Оказывается, Internet Explorer воспринимает любые буквы после «#» в HTML-коде как правильный цвет. Так например «#bolk» даст красный цвет, а «#juliet» — синий. Кстати, тут он попал в точку — я люблю красный цвет, а ▉▉▉▉▉▉ — синий. А вот «#spectator» получается зелёным. Дим, ты любишь зелёный цвет?

Дополнение: странно, но работает и в Mozilla и в Opera.

После появления на свет WebICQ, я получил множество писем с просьбами рассказать, что такое HTA и WScript. О WScript как-нибудь в другой раз, а сегодня я расскажу о том что такое HTA.

HTA (или HTML Application) — так называемые «безбраузерные приложения», выполнение которых — одна из возможностей браузера Internet Explorer 5.0. С точки зрения пользователя, такая программа ничем (кроме, разве что, расширения) не отличается от любой другой: имеет заголовок окна, свою иконку, отображается в панели задач и т. п.

С точки зрения программиста, HTA — обычная Веб-страничка: для ее создания используются все те же HTML, CSS, JScript и VBScript. Единственное, что ее отличает от всего того, что можно увидеть на любом сайте, это наличие заголовочного тега (в общем случае он может отсутствовать) и полное отсутствие системы безопасности (как и в любом нормальном приложении).

Тег заголовка позволяет программисту управлять некоторыми параметрами созданного приложения. Выглядит он, как простой XML-тег, расположенный внутри тела программы (обратите внимание пробел перед «/>» обязателен!): <HTA:APPLICATION... />.

Параметры перечисляются внутри тега, например, так, как это показано ниже:

<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="myApp"
VERSION="1.0"
WINDOWSTATE="maximize" />

Хотя параметров довольно много (все они перечислены в Таблице 1), мне, например, очень не хватает еще двух: WIDTH и HEIGHT, которые позволили бы задавать размер окна, не вызывая методов JScript или VBScript.

Таблица 1

Параметр	В JavaScript	Назначение	Значения
APPLICATIONNAME	applicationName	Имя приложения	строка
BORDER	border	Тип бордюрa	thin, dialog, none, thin
BORDERSTYLE	borderStyle	Стиль бордюра внутри HTA	normal, complex, raised, static, sunken
CAPTION	caption	Наличие заголовка	yes, no
	commandLine	Содержимое командной строки
CONTEXTMENU	contextMenu	Управляет наличием меню правой кнопки мыши	yes, no
ICON	icon	Задает иконку приложения	URL (строка)
INNERBORDER	innerBorder	Внутренний бордюр	yes, no
MAXIMIZEBUTTON	maximizeButton	Управляет кнопкой «развернуть»	yes, no
MINIMIZEBUTTON	minimizeButton	Управляет кнопкой «свернуть»	yes, no
NAVIGABLE (только для IE 5.5)	navigable	Переход по ссылке произойдет в окне HTA	no, yes
SCROLL	scroll	Наличие scroll bars	yes, no, auto
SCROLLFLAT	scrollFlat	Управление стилем scroll bars	no, yes
SELECTION	selection	Управляет возможностью выделения текста внутри HTA	yes, no
SHOWINTASKBAR	showInTaskBar	Отображать ли в панели задач	yes, no
SINGLEINSTANCE	singleInstance	Запретить запуск второго экземпляра?	no, yes
SYSMENU	sysMenu	Управляет наличием системного меню	yes, no
VERSION	version	Версия HTA	строка
WINDOWSTATE	windowState	Начальный размер окна	normal, minimize, maximize

Как видно из таблицы, все параметры приложения (большинство в режиме read-only) доступны из скриптовых языков. Что бы было понятно, как это делается, приведу небольшой пример для applicationName: oHTA.applicationName (oHTA — ID, заданный в заголовке).

Отсутствие системы безопасности означает, что разработчику предоставлена полная свобода доступа к ActiveX, а значит файловой системе и WScript. Кроме того, программист имеет возможность, при помощи атрибута APPLICATION, явно указать содержимое какого из внутренних фреймов может получить доступ к объектам приложения: <IFRAME SRC=content.htm APPLICATION=yes>.

Исходя из концепции безбраузерного приложения, Microsoft исключила из HTA функцию автозаполнения (AutoComplete of form) и закрыла доступ к объекту external.

Более подробно о HTA (на английском языке) можно почитать на сайте Microsoft MSDN.

Заметка была впервые опубликована на сайте «Цитфорум» в 1999-м году, дата публикации примерно восстановлена из «Веб-архива»

Использование встроенных в NC картинок.

Однажды вечером, из любопытства просматривая файл NETSCAPE.EXE, я наткнулся на странный текст:

<IMG SRC=internal-attachment-icon BORDER=0>

Словечко internal наталкивало на определенные мысли и я решил их проверить. Набрав эту строку в виндовом блокноте я посмотрел на результат в NC. И вот что я увидел:

Wow! Я решил отыскать другие встроенные картинки, получился довольно приличный список, но уникальных оказалось не очень много, всего 22 штуки. Не ручаюсь, что я нашел все:

А вот список имен:

<IMG SRC=internal-attachment-icon>
<IMG SRC=internal-icon-insecure>
<IMG SRC=internal-icon-show-all-mail-recipients>
<IMG SRC=internal-gopher-binary>
<IMG SRC=internal-gopher-unknown>
<IMG SRC=internal-gopher-movie>
<IMG SRC=internal-gopher-sound>
<IMG SRC=internal-gopher-image>
<IMG SRC=internal-gopher-text>
<IMG SRC=internal-gopher-menu>
<IMG SRC=internal-gopher-index>
<IMG SRC=internal-gopher-telnet>
<IMG SRC=internal-smime-encrypted-bad>
<IMG SRC=internal-smime-signed-bad>
<IMG SRC=internal-smime-encrypted-signed-bad>
<IMG SRC=internal-edit-unsupported-end-tag>
<IMG SRC=internal-edit-unsupported-tag>
<IMG SRC=internal-edit-form-element>
<IMG SRC=internal-edit-named-anchor>
<IMG SRC=about:security?banner-secure>
<IMG SRC=internal-attachment-dl-all-icon>
<IMG SRC=internal-sa-encrypted-bad>
<IMG SRC=internal-sa-signed-bad>
<IMG SRC=internal-news-followup-and-reply>
<IMG SRC=internal-icon-delayed>

Использование встроенных рисунков позволяет ненамного, но все же уменьшить размер страницы. Жаль только, что способ непригоден для Internet Explorer’a. В идеале хорошо бы при просмотре страницы Netscape’ом загружался встроенный рисунок, а при использовании IE, нууу… хотя бы картинка из внешнего файла.

И тут я вспомнил о введенном еще в IE 2.0 атрибуте DYNSRC тега IMG.

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

С помощью пресловутой кнопки PrintScreen и Adobe Photoshop я изготовил GIF-файл, содержащий первый в моём списке рисунок: internal-attached-icon, потом при помощи досовской утилиты VFD я сконвертировал его в AVI-файл, содержащий один-единственный кадр и сохранил его под именем 1.avi. Создав следующий HTML-файл:

<BODY BGCOLOR=WhiTE>
<IMG SRC=internal-attachment-icon DYNSRC=1.avi WIDTH=27 HEIGHT=27>
</BODY>

я посмотрел результат попеременно в NC и IE. Как и следовало ожидать в обоих браузерах я увидел одинаковую картинку:

Как любил говаривать герой игрушки Duke Nukem 3D «piece of cake!». Напоследок я решил просмотреть страничку в браузере Opera 3.51 и тут меня постигло жестокое разочарование: картинка появилась… и иcчезла, я смотрел на абсолютно белую страничку. Проблема решилась добавлением параметра LOOP=-1 в тег IMG. Если вы не рассчитываете, что вашу страницу будут смотреть пользователи браузера Opera, этот параметр лучше убрать, иначе при наведении курсора на картинку он будет мерцать.

Web-программист казанского центра Интернет Степанищев Евгений.