ff

Для «Файерфокса» есть простой, не то чтобы даже CSS-хак, а просто метод «обнулить» свойство специальным значением, если именно для этого браузера это и требуется. В CSS3 для этого придумано значение «initial», которое «Файерфокс» поддерживает должным образом с версии 3.5 (для некоторых свойств это значение поддерживается аж с первой версии). Значение поддерживается с префиксом, что и позволяет его использовать как своеобразный CSS-хак:

body {
    background-color: red;
    background-color: -moz-initial; /* для FF — значение свойства по-умолчанию */
}

.blk {
    display: none; /* для всех браузеров блок скрыт, */
    display: -moz-initial; /* кроме FF */
}

Браузеры на основе «Вебкит» так же поддерживают это значение (со 125 сборки), правда безо всякого префикса.

В CSS3 есть хорошее свойство tab-size, оно контролирует размер, в пробелах, отображаемой табуляции. Оно пока в стадии черновика; например, неизвестно будет ли введена новая единица измерения (скажем «sp») и можно ли будет указать размер в процентах, пикселях и т. п.

Тем временем, свойство уже реализовано в некоторых браузерах, с собственным префиксом. Свойство первым поддержала «Опера» (с версии 10.60, именно от этой компании и было выдвинуто предложение добавить это свойство в CSS3), затем оно было реализовано в четвёртой версии FireFox. Остальные браузеры пока не подтянулись.

Вот как выглядит CSS-код:

body {
    -o-tab-size: 4; /* размер табуляции — 4 (для Оперы 10.60+) */
    -moz-tab-size: 4; /* размер табуляции — 4 (для FireFox 4+) */
    -webkit-tab-size: 4; /* для будущих версий Safari и Chrome */
     tab-size: 4; /* размер табуляции — 4, на будущее */
}

Значение по-умолчанию для этого свойства — 8 (пробелов), так же можно указать специальное значение «inherit», в этом случае значение будет унаследовано от родительского элемента.

Добавлено позднее: для WebKit уже есть патч для поддержки свойства «-webkit-tab-size».

Как-то, много лет назад, партнёр по бизнесу показал исходник первой страницы сайта студии Лебедева. Он был очень озадачен остроумной шуткой — исходник представлял из себя одну строку HTML-комментария и, на первый взгляд, больше ничего. Я быстро догадался, что надо было всего лишь прокрутить текст вниз — за переводами строки прятался остальной код.

Если бы мне сегодня показали исходник страницы (будет видно только в «Опере» и «FireFox»), который я встретил сейчас на «Хабре», я был бы озадачен куда больше.

Кода у этой страницы просто нет. Ларчик открывается (в «Опере» и FF) просто: есть такой RFC 5988, озаглавленный «Web Linking», где описан способ подключать в документ различные ресурсы прямо через HTTP-заголовок.

Идея проста: подключаем через заголовок CSS для пустой страницы и внутри CSS уже формируем то, что нужно (текст можно писать через свойство «content»). HTTP-заголовок может выглядеть, например, так:

Link: </pathto/magic.css>;rel=stylesheet

Сижу сейчас на семинаре Михаила Черномордикова из Microsoft «HTML5, CSS3 и новый Internet Explorer 9». На экране — известный тест Flying Images, который Михаил демонстрирует в IE9 бета1 и FF 4 (неизвестной) бете.

У IE9, судя по всему сильное преимущество. Я как-то засомневался, помню на «Хабре» был материал, из которого следовало прямо обратное — как только в FF4 появилось аппаратное ускорение, IE9 остался далеко позади.

Скачал FF 4 beta7pre, включил в конфигурации всё, что относится к аппаратному ускорению, потестировал. В общем, Microsoft… вводит нас в заблуждение (как и статья на «Хабре»). FireFox явно впереди, хоть и незначительно.

Пришло в голову попробовать использовать «картинку» (я продолжаю считать, что это видео) в формате 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.

В 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+ */
}

Помимо GIF, JPEG, PNG и SVG в браузерах есть ещё один «общий» формат графики — XBM. Не сказать чтобы сильно полезный, скорее забавный. Формат текстовый и очень простой, как раз его использует Wolf5k для отображения графики.

Несколько лет назад его поддержку прекратил браузер IE, с версии IE6.0SP1 XBM больше не поддерживается. Причина проста — IE падал, если подсунуть ему неправильно сформированную картинку. Поэтому поддержку формата просто отключили (сделали ключ в реестре («BlockXBM»), если очень хочется, поддержку можно вернуть). В общем-то, правильно, формат совершенно гиковский и его использование большая редкость (хотя и встречается).

И вот сегодня я, поставив Firefox 4.0b2pre, увидел, что в нём нет поддержки XBM. Стал разбираться. Оказывается его поддержку выключили в версии 3.6:

It doesn’t seem like anyone uses XBMs on the web these days (microsoft dropped support for them in ie6), and we no longer use them anyone in the platform. Each additional image decoder makes it more time consuming to maintain imagelib, because changes have to be replicated. Thus, unless somebody has a reasoned opinion to the contrary, I’ll remove XBM support in a week or two.

Увы. Из исходников выкинули совсем, никакого ключа в реестре.

На FTP Mozilla в папке релизов появился релиз Firefox 3.6. На самом сайте анонса пока нет.

Для интереса написал на PHP небольшой скрипт для анализа сколько соединений открывают браузеры и в каком порядке они грузят данные. Создал HTML-файл, внутри 30 включений: по 10 на CSS, GIF и JavaScript. Favicon включён и как «icon» и как «shortcut icon».

Вот что получилось (считаются одновременные соединения):

• Opera 10 alpha (build 1355) — 4 соединения к серверу, порядок загрузки: js, ico, css, gif; особенности: 0.css почему-то загружен два раза.
  — Internet Explorer 8 — 6 соединений к серверу, порядок загрузки: js, css, gif, ico
  — Internet Explorer 5.5 и 6 — 2 соединения к серверу, порядок загрузки: js, css, gif
  — Google Chrome 1.0.154.53 — 6 соединений к серверу, порядок загрузки: js, css, gif, ico
  — FireFox 3.0.7 — 6 соединений, порядок загрузки: js, ico, css и gif вперемешку; особенности: почему-то ico загружен два раза, gif и css грузились вперемешку
  — Safari 4 beta (528.16) — 4 соединения, порядок загрузки: js и css вперемешку, gif; особенности: js и css грузились вперемешку
  — Safari 3 (526.27.1) под Maкинтош — 3 соединения, порядок: js и css вперемешку, gif; особенности: js и css грузились вперемешку
  — FireFox 2.0.0.20 под Макинтош — 2 соединения, порядок: js, ico, css, gif; особенности: ico загружен три раза

Google добавил отличнейшую штуку в Google Gears: определение географических координат пользователя по различным сетям (wi-fi, сотовые сети, GPS, что доступно). Например, на ноуте будет использованы идентификаторы wi-fi сетей, которые есть вокруг.

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

Способ использования до смешного прост: на страницу подключается gears_ini.js, а далее координаты доступны как свойства latitude и longitude объекта, который попадает в callback-функцию обновления координат.

Документация небольшая и полна понятных примеров.

Врёт API пока сильно (я на Таганке, меня показало на Охотном ряду) и под FF (хм…) у меня не заработало, пробовал под 3.0.3 и 3.1beta1.

Есть у меня такой любимый синтетический тест браузеров — запускать на своём древнем интерпретаторе языка Brainfuck вычисление числа Пи (программа есть на том же сайте).

Для интереса запустил его на браузерах, которые нашлись у меня на машине. Итог:

FireFox 3.1b1pre — 693 + JIT (410) = 1103 Opera 9.60 — 1141 + JIT (828) = 1969 Safari 3.1 — 1719 + JIT (547) = 2266 IE8 beta 2  — 2422 + JIT (843) = 3265 Chrome 0.2.149.30 — 7731 + JIT (950) = 8681

«1719 + JIT (547) = 2266» означает, что браузер проработал чуть больше двух секунд, из них полсекунды заняла внутренняя оптимизация кода на Brainfuck, которую делает мой интерпретатор, а 1.7 секунды выполнялся код на Brainfuck.

Как видно у Chrome не всё хорошо с JavaScript.

Итак, у нас, оказывается, есть надёжные 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>