браузеры

Вряд ли на свете много людей, которые в 2026 году добровольно пытаются выйти в интернет из ДОСа. Но меня эта идея почему-то всегда цепляла. Есть в этом что-то очень уютное: современный интернет, гигабитные сети, беспроводной доступ, — и рядом с этим чёрный экран, AUTOEXEC.BAT, CONFIG.SYS и ощущение, что если где-то ошибёшься в одной цифре IRQ, то ничего не взлетит.

Не то чтобы меня прямо сильно тянуло «пользоваться интернетом из ДОСа». Понятно, что практического смысла в этом почти никакого нет. Но как эксперимент — очень интересно. Я давно знал, что для ДОСа существуют браузеры. Наверное, даже не один. Значит, теоретически это всё можно собрать: поставить ДОС, настроить сеть, добыть TCP/IP-стек, запустить какой-нибудь браузер и посмотреть, как это вообще выглядит.

Сложностей, в общем-то, не так уж много. Главная — аккуратно собрать по всему интернету кучу старого софта, разложить его по каталогам и не перепутать, что должно грузиться в CONFIG.SYS, что — в AUTOEXEC.BAT, а что надо запускать руками. Для усидчивого человека это не проблема, но процесс очень характерный: вроде бы ты просто хочешь открыть сайт, а в итоге сидишь и думаешь, какой драйвер мыши занимает меньше базовой памяти.

Я наскоро состряпал виртуалку в 86Box, накатил туда MS-DOS 6.22, добавил драйвер сидирома, мышь, Volkov Commander и начал оживлять сеть. В качестве сетевой карты выбрал эмулируемую NE2000 — это такой классический вариант для подобных экспериментов. В 86Box удобно включить SLiRP, и тогда не надо отдельно городить мосты на хостовой машине: виртуальная ДОС-машина получает сеть как будто через маленький виртуальный роутер.

Дальше понадобились две вещи: пакетный драйвер для NE2000 и mTCP. Пакетный драйвер — это такая прослойка, которая даёт ДОС-программам доступ к сетевой карте. А mTCP уже даёт нормальные утилиты поверх TCP/IP: DHCP, ping и прочие радости цивилизации. Я делал по одной из инструкций, только с поправками под свою конфигурацию.

Софт пришлось собирать из разных мест. Почти всё нашлось на old-dos.ru, туда же сходил за Volkov Commander. Без него в ДОСе быстро становится тоскливо: можно, конечно, всё делать командами, но двухпанельный файловый менеджер сразу возвращает ощущение нормальной жизни. Для мыши поставил CuteMouse v2.1b4 — в первую очередь потому, что он маленький. В ДОСе это всё ещё имеет значение: каждый драйвер отъедает кусок базовой памяти, а её всего 640 КБ, и браузеру потом тоже где-то надо жить.

Отдельный маленький квест — освободить побольше базовой памяти. Может показаться, что 640 КБ — это просто анекдот про Билла Гейтса, но в мире ДОСа это очень важная штука. Поэтому HIMEM.SYS, EMM386 и прочее снова становятся не музейными словами, тут придётся всё настроить как надо.

Я вынес наверх всё, что получилось: драйвер сидирома, MSCDEX, клавиатуру, мышь, сетевой драйвер. В CONFIG.SYS у меня в итоге появились HIMEM.SYS, EMM386, DOS=HIGH,UMB и DEVICEHIGH для части драйверов. В AUTOEXEC.BAT — загрузка SMARTDRV, путь к mTCP, русская кодовая страница, драйвер NE2000, DHCP и CuteMouse. Всё что можно загружается командой LH.

После всех этих манипуляций mem стал показывать уже вполне приличную картину: около 609 КБ свободной базовой памяти и ДОС, живущий в HMA. Раньше с этим так много возились не потому что это было интересно, а потому что иначе программы могли просто не запуститься.

Сеть завелась неожиданно буднично. NE2000 загрузился почти сразу (в первой попытке я указал не совсем верные параметры), mTCP через DHCP получил настройки, после чего стало понятно, что ДОС-машина действительно видит внешний мир.

Самый странный момент — набирать ping в чистом ДОСе. Оно не просто запускается, а реально пингует. Мозг немного сопротивляется.

После этого я поставил браузер «Арахна». И вот тут эксперимент стал совсем прекрасным. Потому что это уже не просто «я настроил сеть». Это настоящий интернет.

Конечно, пользоваться этим всерьёз невозможно — браузер по современным меркам совсем примитивный, поддержки HTTPS нет, но посмотреть было интересно.

Браузер «Arachne» — один из немногих, работающих под ДОС

В IE11 интересную штуку сделали — ленивую загрузку. Можно пометить картинку (включая внедрённые тегом SVG), теги для воспроизведения видео и аудио, скрипты и многое другое специальным атрибутом lazyload, который означает «начать загружать, когда загрузится всё важное».

Иногда может быть удобно, для оптимизации скорости загрузки страницы, попросить браузер не загружать пока что-то объёмное. Я, например, в одном из наших проектов поставил этот атрибут аватарам пользователей. Пример использования:

<img src="avatar-3132.png" width="200" height="200" lazyload="1">

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

Я вчера показывал вам «телевизор» про фестиваль в Самаре. Сделано очень просто — уменьшил все сделанные там снимки до 66×44 и сконвертировал их в анимированный ГИФ. Мелковато, конечно, но что делать — ГИФ не очень-то предназначен для фотографических изображений и размер анимации сильно растёт с увеличением размера кадра. Для фотографий в интернете принято использовать формат JPEG.

У JPEG есть свой формат анимации, если так можно выразиться, а точнее — скорее простенький формат видео, так как формат анимации, в моём представлении, помимо кадров должен содержать себе какую-то метаинформацию о кадре, например, задержку перед появлением следующего кадра. Этот формат — разновидность MJPEG (motion JPEG).

Мне давно хотелось посмотреть что у этого формата внутри, сегодня наконец посмотрел. Всё оказалось крайне просто.

В данном случае, MJPEG — формат стримминга (потоковой подачи) видео. Собственно, это даже не формат, а простое соединение JPEG и специального заголовка «multipart/x-mixed-replace», которым может применяться для стриминга чего угодно. Можно, например, подавать не JPEG, а PNG и «изобрести» формат видео MPNG, а то и M(JPEG+PNG+GIF), картинки разных форматов можно перемешивать в любых пропорциях.

Смысл этого заголовка — содержимое которое пришло раньше заменяется тем, что пришло позже. То есть MJPEG — это просто последовательность картинок, у которых этим заголовком указано — когда приходит следующая картинка, ею надо заменить предыдущую. Внутри выглядит это вот таким образом.

Content-type:  multipart/x-mixed-replace;boundary=СТРОКАРАЗДЕЛИТЕЛЬ

--СТРОКАРАЗДЕЛИТЕЛЬ
Content-type: image/jpeg
Content-length: 232311

…бинарное содержимое первой картинки…

--СТРОКАРАЗДЕЛИТЕЛЬ
Content-type: image/jpeg
Content-length: 47474

…бинарное содержимое второй картинки…

СТРОКУРАЗДЕЛИТЕЛЬ надо выбирать так, чтобы она не встретилась в бинарных данных изображения.

Браузерам этот заголовок достался от фирмы Нетскейп, которая когда-то (ещё в версии 1.1) добавила её поддержку в свой браузер. «Микрософт», будучи конкурентом «Нетскейпа», поддержку заголовка в браузер не внедрила. Остальные браузеры заголовок понимают, но каждый немного по-разному.

Например для «Оперы», нужно выдавать данные с задержкой, то есть показали один кадр, ждём пару секунд, ничего с сервера не отдаём, потом следующий. Иначе, «Опера» «хитрит» — показывает следующий кадр, не дожидаясь загрузки предыдущего. Если канал хороший, то мы увидим только последний кадр.

«Файрфокс» единственный, кто хорошо справляется с тем, что кадры могут быть разных размеров — он отображает их правильно, «Опера» масштабирует по первой картинке, «Хром» и «Сафари» глючат — иногда пропускают кадр, иногда ничего не показывают, иногда показывают нормально.

Самое приятное в этом формате — что все современные браузеры считают его картинкой, то есть тег IMG его преспокойно показывает.

Любопытно, что браузеры позволяют сжимать содержимое всего файла и даже каждого кадра отдельно, то есть можно в заголовке кадра поставить «Content-encoding: gzip» и сжать кадр гзипом. Это полезно, если захочется сделать MSVG, например. Ведь SVG-изображения хорошо сжимаются.

Так что, если вы задумались сделать аналог какого-нибудь хостинга анимированных ГИФ и вам наплевать на «Эксплорер» (я посмотрел, девятая версия не поддерживает), сделайте ещё и поддержку MJPEG/MPNG.

Большинство разработчиков сайтов уже знают, что число соединений к серверу у браузеров лимитированно. Старые версии браузеров используют только два соединения на сервер, более свежие побольше (например, «Опера» 11.10 — аж 16).

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

Между тем, это не всегда хорошо, ведь если все соединения заняты, то браузер ждёт данных по ним, не инициируя новые, даже если канал до сервера позволяет загрузить что-то ещё.

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

Выглядеть это может так: static1.example.org, static2.example.org и так далее. «Яндекс», к примеру, грузит свои данные с домена yandex.st. Как видите, подходит другой домен любого уровня.

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

Ничего страшного, чаще всего у пользователя такого хостинга аж четыре домена, просто мало кто об этом подозревает. Первые два достаточно очевидны — хостер часто, кроме какого-нибудь example.org, заводит ещё и www.example.org. Но ведь это два разных домена!

Ещё два не так очевидны— это домены «example.org.» и «www.example.org.». Обратите внимание на точку в конце домена.

Мои эксперименты (проверял на сервисе BrowserShots, операционные системы Linux, Windows XP, Mac OS X) говорят о том, что браузеры умеют с ними работать, то есть картинки с URL, где имя домена кончалось на точку, грузились нормально.

Для того, чтобы проверить считают ли браузеры домены с точкой в конце и без различными, я создал небольшой скрипт, который отдаёт картинку без кеширования с секундной задержкой.

В эксперименте я выставил максимальное количество соединений к серверу в единицу («Опера» и «FireFox» позволяют это сделать, где это делается в браузерах на WebKit я не знаю, подскажите, если знаете) и создал две HTML-страницы: одну, где две картинки из моего скрипта грузятся с одного домена, вторую, где одна из них грузится с домена с точкой.

На скриншоте хорошо заметен результат и видно где какой эксперимент (по колонке «Домен»). По скриншоту видно, что я использовал хорошо всем знакомый FireBug, но на Dragonfly из «Оперы» картина такая же.

Почти никто не помнит, но в прошлом веке, в браузере Netscape Navigator (который позже стал Communicator) был ещё один способ задавать таблицы стилей — JSSS.

Вообще, сейчас принято с теплотой вспоминать поделие Netscape и осуждать Microsoft за самоуправство в стандартах, но тогда время было такое. Кто такие были W3C и кто — Microsoft с Netscape. В Netscape придумывали «стандартов» никак не меньше (а то и больше), чем в Microsoft. И где сейчас LAYER, MULTICOL или тот же JSSS? Впрочем, фирма Netscape в 1996 году отправила JSSS в W3C.

Выглядел JSSS примерно так (даже функции поддерживались!):

<style type="text/javascript">
 tags.p.fontSize = "14pt";
 with(tags.H2)
 {
   color = "red";
   fontSize = "16pt";
   marginTop = "2cm";
 }
contextual(tags.H1, tags.EM, ids.x78, classes.foo.all).color = evaluate_color();
tags.P.firstLine.fontStyle = "small-caps";
tags.IMG.width = .50 * document.width;
if (visual.colorDepth > 2) {
  body.bgColor = "white";
  body.color = "blue";
} else {
  body.bgColor = "black";
  body.color = "white";
}
</style>

И иногда, перебирая в голове ушедшие технологии, я задумываюсь — а не было бы принятие JSSS вместо CSS более удачным шагом? Нужно было бы учить на один язык меньше (JS уже есть в браузере), да и последние тенденции в CSS3 показывают, что он медленно двигается в сторону какой-то странного скриптового языка.

Вот пример:

@media only screen and (max-width: 1024px) {
    div {
        width: -moz-calc(100% - 2 * 3px);
        height: -moz-max(50%, 18px);
    }
}

@-webkit-variables {
   step: -1;
}

ol {
    counter-reset: list -webkit-var(step);  
}
li:before {
    counter-increment: list;
    content: counter(list) ". ";
}

Уже похоже на какой-то язык программирования, не так ли? Переменные, какие-никакие циклы, функции (min, max), условия, арифметические действия.

Так вот, нужно ли это всё было городить? В JavaScript это уже есть. Впрочем, нужны, конечно, ограничения, чтобы JSSS не превратился в труднопроходимую кашу, CSS более лаконичен и строг. Но вопрос в том, удобно ли уже сейчас читать CSS больших проектов? Я пробовал, мой ответ — вряд ли. Это чудовищно сложно.

В общем, мне кажется, что Netscape был в чём-то прав. В этом направлении стоило двигаться.

Я рад, что явился катализатором в «Яндексе» появления визуальных закладок для «Оперы» (для плагина FireFox «SpeedDial» тоже будет работать).

Проект «Погоды» я даже поменеджерил.

К сожалению, пока нет технической возможности делать то же самое для «Хрома» и «Сафари», так как использовать media queries (как для «Оперы» и FF) не получится, браузеры на WebKit ведут тут себя нелогично, нужно проверять особый HTTP-заголовок, а это противоречит техническому решению сервиса.

Как известно, около года назад в WebKit появилась поддержка атрибута «rel» у ссылки со значением «noreferrer». Если указать это значение, то браузер не будет передавать заголовок «referer», в котором указано с какого адреса браузер осуществил переход.

Это прекрасная вещь, которая позволяет защищать, к примеру, информацию из интранета. У нас (в «Яндексе») стоят специальные скрипты для скрытия заголовка «referer» специальными ухищрениями, чтобы предотвратить утечку (так как некоторые сервисы у нас с ЧПУ) данных. Этот атрибут, если он был бы реализован везде, решил бы эту задачу более изящно.

К сожалению, с его распространением, думаю, будет расти его параноидальное использование, что сильно повлияет на статистику. Сейчас можно быть до какой-то степени уверенным, что если «referer» не выставлен, то человек пришёл из закладок в браузере или набрал адрес руками, скоро такое предположить будет неверно. Так же было удобно по тому же заголовку искать обсуждения своих статей (впрочем, я уже довольно давно делаю это, подписавшись на RSS сформированного мной запроса к «Яндекс.Блогам»).

Ну и ещё один показатель бардака — HTTP-заголовок называется «referer», а значение атрибута — «noreferrer».

P.S. Возможно поддержка «noreferrer» и ещё где-то реализована, я не интересовался.

Пришло в голову попробовать использовать «картинку» (я продолжаю считать, что это видео) в формате MotionJPEG в качестве favicon. Ну забавно же — в favicon на сайте не примитивная анимация (через animated GIF или APNG), а что-то долгое, а то и бесконечное.

Да, понимаю, бесполезно и трафик жрёт, это just for lulz.

Смотрел в последних браузерах. IE9PP2 ничего не показал (он MJPEG не понимает), Opera 10.70a ждёт завершения скачивания и ничего не показывает, не дождётся, поток-то бесконечный, «Хром» 6.0.466.0 dev ничего не показал и не попытался, а вот FireFox 4.0b1 показывает стримминг на месте favicon.

Вот ещё пример бардака в браузерах — стало быть favicon выводится (почему?) не как обычная картинка. Ну, я понимаю, в DOM favicon выглядит совсем иначе, ну и что? Внедрённое изображение через тег OBJECT тоже выглядит в DOM иначе, но выводится наверняка тем же куском кода, который использует и тег IMG.

Я тут понял, что CSS Unit «__qem» вполне себе подходит на роль CSS-хака для браузеров на основе WebKit. Правда, мне неизвестно в какой версии эта единица измерения появилась. Подходит, правда не во всех случаях и с некоторыми оговорками.

Во-первых, лучше всего применять этот хак в режиме совместимости со стандартами, иначе Internet Explorer не обращает на хак никакого внимания и не отфильтровывается (впрочем, это обходимо, но неудобно).

Во-вторых, подходят свойства где есть что указать в численных единицах. Для того, чтобы хак сработал, нужно поставить на место числового параметра, например, «0__qem», а на место остальных — то, что необходимо. В некоторых случаях, есть возможность подправить потом и числовой параметр.

К примеру:

div {
    background: #000; /* фон будет чёрным везде, кроме… */
    background: 0__qem #fff; /* …WebKit, тут он будет белым */

    border: 0; /* бордюра не будет, кроме… */
    border: 0__qem solid black; border-width: 10px; /* …WebKit, тут будет чёрный толстый бордюр */

    position: relative; /* блок будет виден везде, кроме… */
    top: -100000_qem; /* …WebKit, тут его видно не будет */
}

Я попробовал поиграть с Media Queries, скомбинировать с «__qem» не удалось, но зато выяснилось, что браузеры и тут стандарт нарушают:

@media (color: 0!) {
     /* работает в «Хроме», по крайней мере, в 6-м */
}

@media (color: 0_) {
    /* работает в «Опере», по крайней мере, в 10.60 */

@media {
   /* работает в «Опере» 10.60, «Хроме» 6, не работае в FF4, IE8, IE9PP2 */
}
}

Судя по всему, эта нестандартная единица измерения не распознаётся в медиа-запросах, а жаль, получились бы хорошие хаки.

В FireFox4 входит новый селектор — «:-moz-any». Позволяет задать на любом уровне несколько селекторов сразу. Например:

:-moz-any(ol, ul) li {
    list-style-type: none
}
a:-moz-any(:hover, :visited) {
    color: black;
}

В это связи легко получается CSS-хак для FireFox 4 и выше:

:-moz-any(x), .class_for_ff4 {
    color: red; /* стиль только для FF 4+ */
}

Только мне стало интересно как со скоростью JavaScript у флагманов современной мобильности, как оказалось, что добрые люди уже всё оттестировали.

На «Хабре» интересная статья о вреде алкоголя — «Происхождение тега <blink>»:

Субботним утром я направился в офис за чем угодно, но точно не за мигающим текстом. Он мигал на мониторе во всей своей красе и в браузере. Вы спросите, как такое случилось? Выяснилось, одному инженеру так понравилась моя идея, что выйдя заполночь из бара, он вернулся в офис и реализовал тег мигания. Поутру он всё еще был там, крайне гордый собой.

Надо бы узнать историю тега «marquee», возможно там тяжёлые наркотики виноваты.

Некоторые ребята почему-то подумали, что я предлагаю M-JPEG как универсальный формат видео в вебе. Ничего такого я не имел ввиду. Вероятно, я написал как-то слишком туманно.

Я лишь хотел обратить внимание на два факта:

• на бардак, когда формат видео не поддерживается тегом VIDEO ни в одном браузере, но поддерживается браузерами
• на то, что говорить «в браузерах нет единого формата видео» некорректно

И только.

Автор теста HTML5 обновил свой тест, теперь максимальное количество очков, которое может набрать браузер — 300, а не 160. Кроме того, теперь поддержка браузером кодеков для тегов VIDEO/AUDIO не влияет на основные очки, а даёт бонусные. Это правильно, так как стандартном HTML5 кодек так и не выбран.

Результаты по браузерам выглядят так:

«Сафари» 5 — 208 (ночная сборка — 220) «Хром» 5 — 197 (ночная сборка — 217) FireFox 3.6 — 139 (ночная сборка — 176) «Опера» 10.50 — 129 (10.60a 3422 — 159) Internet Explorer 8 — 27 (IE9PP2 — 32)

То есть лидером, по результатам этого теста, является пока пятый «Сафари», при этом тот же пятый «Сафари» под Windows набирает только 165 очков.

Пока я тут ною, что «Опера» не поддерживает CSS1 в полном объёме, новый билд «Оперы» (10.60а build 3419) стал поддерживать кодек WebM для тега VIDEO (у которого есть все шансы стать стандартом), HTML5 offline web applications, Geolocation API (что давно было известно), Web Workers и Cross-Document Messaging.

Круто, ребята, очень круто. Но сделайте поддержку CSS1 уже наконец.

В комментариях к одному из постов, меня попросили сделать кнопку добавления RSS комментариев в «Google Reader» (если я правильно помню суть просьбы).

Мне эта идея не нравится, потому что я не знаю какое количество моих читателей пользуется «Google Reader», остальным, понятно, эта кнопка ни к чему. Я тут подумал — хорошо было бы ставить эту кнопку тем, что этим сервисом «Гугла» пользуется. Но как узнать кто пользуется, а кто нет?

Сейчас меня осенило (впрочем, скоро это не будет работать в Firefox, когда выйдет версия 3.7). Всё просто — надо найти URL по которому заходит только авторизованный пользователь «Google Reader», причём URL этот должен быть инвариантен пользователю, может это какая-то картинка или CSS/JS. Далее, на моей странице делается ссылка на этот URL и через псевдоселектор «:visited» ей ставится какое-то свойство CSS, которое я смогу проконтролировать через JavaScript.

Далее всё просто — у данной ссылки есть то свойство, значит пользователь недавно логинился в «Google Reader», если нет, не логинился. На основании этого можно ставить или убирать кнопку добавления RSS в этот сервис. Можно ещё выставить куку, чтобы в дальнейшем основываться уже на её наличии (если есть — пользователь пользуется «Google Reader», нет — ничего не значит).

Что я хочу сказать по поводу статьи «Хитрая тень» в блоге Олега Мохова?

<html>
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
.vml {
    behavior: url(#default#VML);
    -ms-behavior: url(#default#VML);
    font: 12px Tahoma, sans-serif;
}
#bar1 {
    width: 400px;
    height: 60px;
    color: white;
    padding: 12px;
    display: block;
}

#bar2 {
    width: 20px;
    height: 22px;
    padding: 12px;
    color: white;
    position:absolute;
}
</style>
</head>

<body>

  <v:roundrect class="vml" id="bar1" fillcolor="navy" strokecolor="navy" strokeweight="1px" arcsize="0.1">
  Привет, ребята из W3C! Отсталый Internet Explorer уже много-много лет умеет смешивать векторный язык и
  HTML, а в 2010 году не все продвинутые браузеры так умеют.
  <v:shadow class="vml" on="true" opacity="0.3" color="navy" offset="7px,5px" />
  </v:roundrect>

   <v:shape class="vml" id="bar2"
   fillcolor="red" strokecolor="red"
   coordorigin="0 0" coordsize="200 200"
   path="m 1,1 l 800,1, 800,400, 1800,400, 1800,1500, 1,1500, x e">
   <v:shadow class="vml" on="true" opacity="0.3" color="red" offset="7px,5px"  />
    <p>Привет<br />ещё раз!</p>
    <p>Вы знаете, уже Internet Explorer 5.0 умеет делать непрямоугольные блоки.</p>
    <p>Причём, делает это непринуждённо.</p>
   </v:shape>
</body>

</html>

Что IE умеет круче ещё с пятой версии.

Добавлено позднее: в комментариях мне подсказывают, что в IE8/9 надо либо включать режим эмуляции, либо использовать «-ms-behavior» и позиционировать элементы абсолютно.

На «Хабре» кто-то в очередной раз кто-то наткнулся на статью полугодовой давности и понеслось — сделаны далекоидущие выводы.

Упомянутая статья за полгода не обновлялась (о чём говорит отсутствие упоминания об SVG в IE9), так что предпосылки неверные. Предпосылки неверные, но вывод, впрочем, правильный. В плане стандартов будущее крайне далеко.

Должен сказать, что любые тесты браузеров — это сферические кони в вакууме. Какие, нахрен, ACID3, какие SunSpider? «Опера» до сих пор не поддерживает CSS1! Ибо сказано:

The format of a percentage value is an optional sign character (’+’ or ’-’, with ’+’ being the default) immediately followed by a number (with or without a decimal point) immediately followed by ’%’.

CSS1, раздел 6.2, проценты могут быть указаны с десятичной точкой. Мне кажется, это означает, что я могу указать дробные проценты и всё будет хорошо. Во всех браузерах так и есть. Во всех, кроме «Оперы». Самая распоследняя «Опера» округлит их вниз.

CSS3-селекторы. Уже все основные браузеры хвастаются их поддержкой. На сайте CSS3.info есть даже специальный тест, на который часто ссылаются. Ну, хорошо «Хром» этот тест проходит. И начал проходить едва ли не раньше всех.

Если этот браузер заявляется поддержку селекторов CSS3, то для меня, как разработчика, это должно, видимо, означать, что работает и любая их комбинация, не так ли? Иначе, что толку от поддержки селекторов по одному в строке?

И вот реальная задача — делал я галереи на сайте без использования JavaScript, на голом CSS (спасибо селектору «:target», это самое крутое, что появилось в CSS за последние годы). Простая задача — если «:target» не указывает ни на один из тегов в текущей галерее, нужно указать, что выбрано первое изображение.

Да, пожалуйста (у меня первое изображение это последний элемент списка):

.gallery li:not(:target) ~ li:last-child a {
    background: #fff;
    color: #000;
}

.gallery li:target ~ li:last-child a {
    background: #aaa;
    background: rgba(170, 170, 170, 0.5);
    color: #fff;
}

Несложно же. «Опера» и «Файерфокс» чудесно с этим справляются, почему бы и нет, все селекторы им знакомы. Но это не работает в «Хроме» и «Сафари» (5-й «Сафари» я ещё не тестировал), точнее, это работает, но глючит — срабатывает только на следующем элементе, а не каждом. Чтобы исправить проблему, мне пришлось изобрести CSS hack для «Safari» и Chrome.

Так повсюду, в блоге IE авторы как-то показывали, что «border-radius» и «box-shadow» поддерживаются браузерами с глюками или имеют серьёзные различия в рендере. Всюду так — заявлена поддержка SVG1.1, но чего-то нехватает, Canvas, но текстом писать нельзя, тег VIDEO, но нельзя открывать на весь экран.

Конечно, тут ещё сказывается тот факт, что большинство этих спецификаций находятся в стадии черновика, вот реализовала «Опера» четыре года назад в браузере Server-sent Events, а черновик изменился и тег «event-source» теперь оказался не нужен.

В общем, к этим стандартам нам ещё всем идти и идти, много лет. Это основной вывод. А теперь другие мысли.

Селектор «:target» хоть и самое чудесное, но, в то же время, почти самое недодуманное в CSS за последние годы. Это уже ощутили мои читатели. Конечно, «:target» добавляет интерактива в CSS, но хотелось бы, чтобы этот интерактив не касался напрямую HTML, т. е. был какой-то флаг, указал его и страница не прокручивается к целевому тегу. Придётся переделать галерею на JavaScript.

Предыдущая моя заметка о conditional comments. Я уже когда-то говорил и ещё раз скажу — W3C делает большую ошибку, что не включает их в стандарт, причём на уровне и HTML, и CSS. W3C заявляет, что конечная цель — стандартное счастье у всех браузеров. Увы, в свете сказанного, туда идти ещё очень долго, учитывая все баги, недоделки, несделанное и просто ещё не дописанное самим W3C. А сейчас-то что делать? Как мне для «Сафари» и «Хрома» такой-то версии что-то выключить? Использовать CSS-хаки?

И ещё, как я уже писал W3C вряд ли когда-нибудь вообще остановится. Будут всё новые и новые стандарты, улучшения существующих. Это значит, что браузеры никогда не достигнут всего, что описано. И поэтому тоже нам нужны conditional comments.

Это таблица показывает насколько успешно проходят разные браузеры тесты SVG с сайта W3C (таблица с сайта CodedRead). В таблице, на мой взгляд, примечателен уровень поддержки SVG браузером IE 9 preview. Несмотря на уверения Microsoft о 100% уровне поддержки SVG, видно, что до идеала ещё делековато.

Я, правда, не понимаю что происходит и где правда. С одной стороны, таблица как бы говорит нам, с другой, на сайте IE9 написано следующее:

I want to thank the members in the W3C working groups that helped us develop these tests, the community members for providing valuable feedback on the tests, as well as the engineers on the IE team that made these possible

То есть тесты придуманы не самим Майкрософтом и наверняка в W3C их видели и одобрили. Где правда?

Ну что, дождались! Можно скачать Preview Internet Explorer 9 и посмотреть что получилось у Microsoft (потребуется Vista SP2 или Windows 7).

Получился, кстати говоря, очень неплохой браузер: 55% ACID3, проходит все 578 тестов селекторов CSS3, тест SunSpider на уровне FireFox 3.7a2, поддержка SVG 1.1 2nd edition и прочее.

Некоторые вещи поддерживаются лучше, чем в остальных браузерах (например, тот же SVG или селекторы CSS3).

Впечатляет. Не забудьте, что это только preview. Кстати, user-agent у браузера пока прежний — от 8-й версии. Браузер не затирает предыдущую версию IE, а запускается отдельно.