opera

Скриншот браузера «Опера» — уютно, как дома

Когда-то я был яростным фанатом «Оперы» — охотно ею пользовался, защищал перед коллегами, знал все её особенности и писал какие-то плагинчики.

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

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

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

«Опера» устала бороться, похоже:

Все наши новые продукты будут использовать движок WebKit для рендеринга и V8 для обработки JavaScript. Они будут основаны на опенсорсном браузере Chromium и его компонентах. Конечно же, браузер — это гораздо больше, чем просто движок, поэтому все эти перемены для обычных пользователей произойдут где-то далеко под капотом. Такие пользователи заметят только улучшившуюся совместимость с сайтами, особенно мобильными, большинство из которых были как следует протестированы только в браузерах на WebKit.

Я бывший фанат «Оперы», собственно, я испытал к этому продукту всю гамму чувств: от ненависти до фанатизма. И хотя сейчас я придерживаюсь очень спокойного к нему отношения, мне всегда нравилась эта норвежская компания, которая несмотря на трудности, всё-таки пыталась завоевать своё место под солнцем. Это требовало от компании очень неординарных решений, от спорных (вроде клиента «аськи» в браузере), до гениальных находок (например, speed dial стал, фактически, стандартом).

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

В новости есть упоминание, что «Опера» будет теперь участвовать в разработке движка «Вебкит», хочу пожелать им удачи!

«Уровень один» вчерашней головоломки прошли многие, этот ларчик открывается просто — есть RFC 5988, где описан способ подключать некоторые ресурсы через HTTP-заголовок. Этот RFC поддерживают «Опера» и «Файерфокс». На скриншоте, в средстве для разработчиков «Оперы» заголовок хорошо видно.

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

Теперь главное. А картинка-то откуда взялась?

Есть такой стааааренький формат графики XMB, тестовый формат и по виду явно происходит от заголовочных файлов Си. Про него и не помнит уже никто, важно же в нём то, что когда-то его поддерживали все браузеры. Я даже когда-то библиотеку Image_XBM писал для работы с ним из ПХП.

Вот начало одного из файлов, содержащих картинку в формате XBM:

#define _width 300
#define _height 225
static char _bits[] = {
0xbd, 0xf7, 0xde, 0x7b, 0xef, 0xbd, 0xf7, 0xde, 0x7b, 0xef, 0xbd, 0xf7, 0xde, 0x7b, 0xef, 0xbd, 0xf7, 0xde, 0x7b, 0xef, 0xbd, 0xf7, 0xde, 0x7b, 0xef,
0xbd, 0xf7, 0xde, 0x7b, 0xef, 0xbd, 0xf7, 0xde, 0x7b, 0xef, 0xbd, 0xf7, 0x0e, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00…
}

Он тут, кстати, попроще, чем обычно используется, я выкинул название картинки, которое идёт перед подчёркиваниями. Браузеры, видимо, проще относятся к этому формату, работает и так.

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

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

Вот часть CSS из вчерашнего примера:

  background: 20px 20px url(bolk.css#0x5F0xBF0xFF0xDC0x530xF60x870…) no-repeat;
  width: 80px; /*_width 80px*/
  height: 80px; /*_height 80px*/
  border: 7px dashed #259;
  outline: #259 dashed 6px;
  margin: 10px; padding: 3px;
}

Читатели правильно догадались, что после хеша в свойстве «background» записана картинка, но как она оттуда попадает в HTML не догадался никто.

В гонке выкидывания лишнего из картинки в формате XBM победила «Опера», ей нужно было только оставить первую строку «#define», которую она использует в качестве «магического» значения для определения формата, где-то раскидать «_width» и «_height» (я их засунул в коментарии CSS) и оставить строку шестнадцатеричных чисел, причём, как оказалось, «Опере» и запятые не нужны!

Итак, откуда взялась картинка?

«Опера» смотрит в свойство «background» и видит там урл с картинкой, часть с хешем просто отбрасывается, в данном случае она не используется и браузер грузит картинку с адреса «bolk.css». «Опера» пытается определить в каком формате пришла картинка, тут нам помогает «магическая» строка «#define», раз она есть, стало быть это XBM.

Дальше браузер ищет в полученном файле «_width» и «_height» с цифрами и находит, считая цифры размерами картинки, после чего ищет первое вхождение «0x…» и двигается по ним, пока не находит их все, это и есть тело картинки, которую надо отобразить.

Хотите голову поломать? Вот вам тест на знание всякого странного, откройте следующий урл в «Опере»: /files/opera-mystery/ (именно в «Опере») и попробуйте догадаться как это сделано.

Ответ завтра. Кажется, во всём интернете так ещё никто не делал.

Выше снимок того что вы должны увидеть на экране, я испытывал под «Оперой» последней версии (12.12) для «Мака», не факт, что под другими ОС всё так же будет.

Вот что видно в консоли, если попытаться скачать этот файл:

bolk@Bolk ~$ wget -O- --user-agent="Opera/9.80 (Macintosh; Intel Mac OS X 10.8.2) Presto/2.12.388 Version/12.12" /files/opera-mystery/
--2013-01-22 00:24:09--  /files/opera-mystery/
Resolving bolknote.ru... 91.230.61.15
Connecting to bolknote.ru|91.230.61.15|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 0 [text/html]
Saving to: ‘STDOUT’

    [ <=>                                                                                                                                                   ] 0           --.-K/s   in 0s      

2013-01-22 00:24:09 (0.00 B/s) - written to stdout [0/0]

Когда догадаетесь где тело страницы, переходите на уровень два — догадайтесь откуда берётся картинка.

Ребята из «Оперы» уже трудятся над весьма интересной версией 12.50 и у меня уже готов ЦСС-хак для неё:

@media (-o-min-device-pixel-ratio: 1/100) {
    @media all {
         body {
            background: red; /* Opera 12.50+ */
        }
    }
}

И ещё вариант:

_:-o-prefocus:fullscreen, body {
    background: red; /* Opera 12.50+ */
}

Вместо body надо подставить нужный вам селектор.

Вышла первая ночная сборка «Оперы» 12.50. Из горько разочаровавших меня вещей — теперь все свойства поддерживаются не только с «оперовским» префиксом „-o-“, но и с префиксом «Вебкита» — „-webkit-“:

As previously announced, a subset of widely used -webkit- prefixed CSS properties are now mapped to their -o- counterpart. The supported properties include -webkit-box-shadow, -webkit-transform, -webkit-transform-origin, -webkit-border-radius, -webkit-border-top-left-radius, -webkit-border-top-right-radius, -webkit-border-bottom-left-radius, -webkit-border-bottom-right-radius, -webkit-transition, -webkit-transition-delay, -webkit-transition-duration, -webkit-transition-property, and -webkit-transition-timing-function. You should, however, not rely solely on -webkit- prefixes!

С этого дня «Хром» — новый «Эксплорер» времён «войны браузеров» и «Опера» ему в этом потакает! Расшифровываю: «Опера» первая свыклась с мыслью, что всё больше сайтов делают только под «Хром» (как когда-то делали только под «Эксплорер»). Насколько я знаю, «ФФ» тоже собирается сдаться, но ссылки под рукой у меня нет.

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

Насколько я помню, такое уже случалось, кажется, «Опера» поддержала что-то с префиксом «Вебкита», но это был разовый случай, а теперь — система.

Эх, «Опера» как же ты так?

Вышла «Опера» 12, многое поменялось, на некоторых моих сайтах едут стили. В частности, на «Маке» «Опера» поменяла поведение стиля «font-size: 0» — теперь он отображается шрифтом какого-то минимального размера.

Пришлось придумывать ЦСС-хак для этой версии. Я не могу себе позволить искать новое решение и заново тестировать его во всех браузерах, мне проще оставить всё как есть, сделав исключение.

Хак получился вот такой:

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, body { /* стиль только для Opera 12.00+ */
        background: red;
    };
}

Соответственно, на место «body» надо поставить требуемый тег или селектор.

Существует плагин «DivX web player», который отлично подменяет тег «VIDEO», в случае, если должен быть использован кодек H.264, но браузер его не поддерживает.

К сожалению, в «Опере» он почему-то не работает. Я сделал UserJS, который, пользуясь этим плагином, подменяет видеотег, если у него указан тип «video/mp4». Все атрибуты он не переносит (я просто пока не столкнулся с тем, что это нужно), буду добавлять, если столкнусь. Кроме того, я подменяю метод «canPlayType», чтобы показать, что браузер H.264 поддерживает.

Самая засада — это тег «VIDEO» без размеров. Мне для поддержки этого приходтся запускать проигрывание и когда становятся доступны медиаданные, останавливать воспроизведение и переписывать размеры видео.

// ==UserScript==
// @name        XVid patch
// @author      Evgeny Stepanischev aka Bolk
// @version     1.00
// @namespace   /files/opera-xvid-patch.js
// @modified    2012-04-14
// @include     http://*
// ==/UserScript==

!function () {
    var htmlif = function (attr, attrname) {
        return attr ? attrname + '="' + attr + '" ' : '';
    }

    var patchtag = function (o, src) {
        var html = '<embed type="video/divx" '+
        'custommode="none" ';

        if (o.preload == 'auto') html += 'bufferingMode="full" '; else
        if (o.preload == 'none') html += 'bufferingMode="null" ';

        html += htmlif(o.poster, 'previewImage')+
                htmlif(o.id, 'id')+
                htmlif(o.name, 'name')+
                htmlif(src || o.src, 'src')+
                htmlif(o.controls ? 'full' : 'null', 'mode')+
                htmlif(o.width, 'width')+
                htmlif(o.height, 'height');

        if (!o.height || !o.width) {
            html += 'onloadedmetadata="this.width=this.videoWidth;this.height=this.videoHeight" ';
            html += htmlif(!o.autoplay && 'if (!this._sized) {this.pause(); this.currentTime=0; this._sized=1}', 'onplay');

            html += 'autoPlay=true ';
        } else {
            html += htmlif(o.autoplay ? 'true' : 'false', 'autoPlay');
        }

        html += 'pluginspage="http://go.divx.com/plugin/download/"></embed>';

        o.outerHTML = html;
    };

    var patch = function () {
        window.opera.addEventListener('BeforeScript', function() {

            with (window.HTMLVideoElement)
            if (prototype._canPlayType === undefined) {
                prototype._canPlayType = prototype.canPlayType;

                prototype.canPlayType = function (type) {
                    if (type.substr(0, 9) == 'video/mp4') {
                        return 'probably';
                    }

                    return this._canPlayType(type);
                }
            }

            !function() {
                var videos = document.getElementsByTagName('VIDEO');

                for (var i = 0, vl = videos.length; i<vl; i++) {
                    if (!videos[i]) continue;

                    if (videos[i].type && videos[i].type.substr(0, 9) == 'video/mp4') {

                    } else {
                        var sources = videos[i].getElementsByTagName('source');

                        var foundSupported = false, foundMP4 = false;

                        for (var j = 0, sl = sources.length; j < sl; j++) {
                            if (videos[i]._canPlayType(sources[j].type) !== '') {
                                foundSupported = true;
                                break;
                            }

                            if (sources[j].type.substr(0, 9) == 'video/mp4') {
                                foundMP4 = sources[j].src;
                            }
                        }

                        if (!foundSupported && foundMP4) {
                            patchtag(videos[i], foundMP4);
                        }
                    }
                }
            }();
        });
    };

    for (var i = 0, l = navigator.plugins.length; i < l; i++) {
        if (navigator.plugins[i].filename == 'DivXBrowserPlugin.plugin') {
            return patch();
        }
    }
}();

Добавлено: в комментариях справдливо указали на недостаток — перехватывать надо не только BeforeScript. Исправлять не буду до первого реального случая, когда где-то этого события не будет достаточно.

Я вчера заморочился на отличненько. Мне показалось скучным и грустным вводить цифры счёта за квартиру в окошко «Госуслуг» и решил сделать автоматическую распознавалку чисел, попутно изучив работу с камерой из браузера.

Доступ к камере — эксперментальный стандарт, поэтому мало кто из браузеров может им похвастаться, я использовал специальный билд «Opera-Labs-Camera», который можно взять с сайта снапшотов «Оперы». Работать мой пример, соответственно, будет только там.

АПИ оказалось несложным. Всё, что нужно сделать — соединить специальным образом тег VIDEO с источником стримового видео; потом я 10 раз в секунд забираю кадр с видео и кладу в CANVAS (на скриншоте он цветной), оттуда вырезаю небольшую область, перевожу в градации серого, беру за порог 75% от усреднённого цвета и перевожу всё в ч/б.

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

В итоге, лучше всех распознаёт следующий алгоритм.

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

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

На скриншоте в большом текстовом поле записаны получившиеся комбинации. Первое — номер по порядку, далее (через двоеточие) — количество переходов по вертикали и потом описанная последовательность. Например, «ноль» записывается как «2:11» (два перехода по вертикали, потом одинаковые переходы по разу слева и справа разделительной линии).

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

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

Сначала попробую первый. Посоветуйте плагины? Это не «Опера», тут надо всё обвешать плагинами, чтобы начать работать.

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

Как я уже писал, «Опера» иначе показывает MJPEG, не как остальные браузеры. Если открыть какую-нибудь веб-камеру, использующую этот формат, в десятой версии, то «Опера» сначала задумается, потом покажет какой-то кадр, 11 и 12 версии показывают ещё хуже — подобие потоковой передачи уже есть, но кадры лепятся один на другой и ничего разглядеть невозможно.

А мне хочется смотреть в веб-камеру на микрорайон, где у нас с женой квартира в Москве, через любимый браузер.

Вдохновившись библиотекой добавляющей нативную поддержку APNG в браузер, я подумал, что я ничем не хуже и смогу добавить поддержку MJPEG в «Оперу». Получился небольшой userjs, который я, естественно, выложил на «Гитхаб».

Идея такая — находим картинку во всех тегах IMG, у которой расширение «mjpg». Через XHR получаем с сервера видеопоток, копим кадр, подменяем найденную картинку и так далее.

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

Больше всего я бился с декодированием бинарных данных. Последняя версия «Оперы» поддерживает тип ответа arraybuffer (а вот blob не поддерживается), но если его выбрать, то данные в цикле почему-то перестают накапливаться, вероятно какой-то баг браузера. Я долго мучался, прежде чем придумал следующий хак — если сделать overrideMimeType(’image/jpeg’), то данные приходят в двухбайтовой кодировке UCS-2, которую несложно декодировать.

Кстати, быстрее всего у меня получилось декодировать не циклом, а регулярными выражениями, дальше тормозит уже не мой код, а способ получения отдельного кадра — каждый раз я соединяюсь с сервером заново. Можно бы накапливать кадры пачкой и потом их сбрасывать, но у меня нет задачи смотреть трансляции футбола, у меня дом, который не бегает и полученной скорости мне вполне хватает (где-то 2-3 кадра в секунду).

В общем, получился довольно небольшой код — 94 строки.

// ==UserScript==
// @name        MJPEG+Opera - Add to Opera MJPEG support
// @author      Evgeny Stepanischev aka Bolk
// @version     1.00
// @namespace   /files/opera-mjpeg.js
// @modified    2011-10-09
// @include     *
// ==/UserScript==

opera.addEventListener('BeforeEvent.DOMContentLoaded', function() {
    if (opera.version() < 12) return;

    var BolkMJpeg = function (url, img) {
        var req = new XMLHttpRequest(); 
        img.src = 'about:blank'; // Сброс картинки, чтобы прекратить передачу

        // Асинхронно забираем кадр при помощи XHR, нам придёт видеопоток
        var start = function (url) {
            req.open("GET", url, true);
             // Свежепридуманный хитрый хак, позволяет получить данные в UCS-2
            req.overrideMimeType('image/jpeg');
            req.send(null);
        }

        // Хитрыми путями восстанавливаем порядок байт в reponse, там сейчас UCS-2,
        // получаем просто последовательность байт
        var reqbytes = function (n, l) {
            return escape(req.response.substr(n, l)).
                replace(/([^%]|%[^u].|%u....)/g, '<$1>').
                replace(/<%u(..)(..)>/g, '%$2%$1').
                replace(/<%(..)>/g, '%$1%00').
                replace(/<(.)>/g, '$1%00');
        }

        // заменяем картинку на бинарные данные
        var draw = function (bin) {
            img.src = 'data:image/jpeg,' + bin;
        }

        // На изменение состояние входных данных собираем по частям JPEG
        req.onreadystatechange = function () {
            // состояние «3» — данные пошли, но ещё не кончились
            if (req.readyState === 3) {
                var hnd = setInterval(function () {
                    // по заголовку получаем размер данных
                    var header = unescape(reqbytes(0, 300)).toLowerCase();

                    var idx = header.indexOf('content-length:');

                    if (idx > -1) {
                        // 15 — длина заголовка
                        var len = parseInt(header.substr(idx + 15), 10);
                        var headend = header.indexOf("\r\n\r\n");

                        // дожидаемся конца заголовка
                        if (headend > -1) {
                            var resp = reqbytes(0, len);
                            // умножаем всё на три, так как reqbytes даёт esc-последовательность
                            // вида %XX%XX…
                            len *= 3;
                            headend = (headend + 4) * 3;

                            // если собрали весь JPEG, обрываем соединение
                            // и начинаем новый цикл. Мы могли бы собирать кадры и дальше, но
                            // это съест всю память со временем
                            if (resp.length >= len + headend) {
                                req.abort();
                                resp = resp.substr(headend, len);

                                draw(resp);
                                clearInterval(hnd);

                                start(url);
                            }
                        }
                    }
                }, 100);
            }
        }

        start(url);
    };

    // ищем картинку, у которой расширение mjpg
    var imgs = document.getElementsByTagName('IMG');
    for (var i = 0, len = imgs.length; i<len; i++) {
        if (/\.mjpg$/.test(imgs[i].src)) {
            BolkMJpeg(imgs[i].src, imgs[i]);
            break;
        }
    }
}, true);

В 1997 году, когда я впервые увидел веб через графический браузер (до этого у меня был опыт выхода в интернет через терминал на базе i80286 через текстовый браузер Lynx), у меня была выделенка, дело было в Казанском Государственном Университете и ещё очень долго я не знал что такое диалап и оплата за трафик.

Сейчас выделенки у большинства, но нередко встречается и такое, что клиент приходит на сайт через «дохлый канал» или с оплатой по трафику (например, через сотовый телефон).

Хорошо было бы об этом как-то узнать и не грузить клиенту лишние подробности в этом случае. Браузеры такое API не предоставляют (ещё бы, они и сами ничего не знают про канал), такую обобщённую информацию получить неоткуда. Но можно попытаться об этом догадаться. Эта запись — сборник моих сырых мыслей на эту тему.

Я вижу несколько путей.

• можно замерить время за которое страницу удалось отдать клиенту целиком. У меня пока нет оформившихся мыслей о том как это делать и есть недостаток — когда мы узнали о том, что у клиента плохой канал, содержимое уже выдали, ничего поменять нельзя. Можно выдавать chunked-контент, как предлагал Сергей Чикуёнок, но первый кусок должен быть значительным
• после загрузки страницы «пропинговать» хост. То есть обратиться через XHR на свой же сайт и замерить время ответа. Опять же, что делать с этими данными? Есть возможность в следующий раз показать более бедное содержимое, но следующий запрос может идти через другой канал. Возможное решение — сохранять IP-адрес запроса
• смотреть с какого браузера клиент приходит, если это «Опера Мини», вероятнее всего, канал плохой или с оплатой
• опять же «Опера», если включена функция «Опера Турбо» (определяется по IP-адресу клиента), клиент экономит трафик, значит канал с оплатой
• проверить грузятся ли картинки, способов много, но данные получаем постфактум, после загрузки страницы. Логика та же — выключил картинки, экономит. Загрузку Flash контролировать смысла не имеет — многие выключают, чтобы не видеть рекламы
• проверять не пришёл ли человек через канал сотового оператора (по IP-адресу). Безлимиток, которые бы не деградировали по скорости после какого-то лимита пока исчезающе мало, так что имеет смысл отдавать в этом случае «обеднённый» контент. Мобильные браузеры определять смысла не имеет — клиент может прийти через WiFi
• в комментариях подсказали, что в «Андроидах» 2.2 и выше есть специальное
  API, чтобы определять способ подключения
• ещё вариант из комментариев — определять модель телефона/планшета и по базе смотреть есть ли у него GSM/3G или WiFi
  Кто-нибудь ещё какие-то пути видит?

Хочу похвалить «Оперу» за галочку в настройках, которая недавно появилась. С ней стало удобнее. Теперь можно выключить плагины (Flash, Java, Silverlight и остальное, в куче) для всех сайтов разом, а потом включить их для определённых сайтов (YouTube, RuTube, video.yandex.ru и так далее) в отдельных «Настройках для сайта» (открывается по клику правой на странице).

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

Очень удобно. Спасибо, ребята!

По всей видимости, «Опера» немного неправильно обрабатывает анимированные «гифы».

Анимированный GIF устроен очень просто — поверх первого кадра через заданное время лепится следующий. Задержка задаётся в сотых долях секунды и, согласно спецификации, поля для её хранения имеет размер беззнаковое слово (2 байт), то есть максимальное значение — 655,35 секунд или почти 11 минут.

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

Вот я и проверил — не содержат ли кодеки популярных браузеров эту ошибку. На картике — число «1», если оно через пять-шесть минут сменится на «2», значит ошибки нет. Я выставил задержку между кадрами в 33000 (330 секунд или 5,5 минут). Кодек с ошибкой будет трактовать это число как -233 (отрицательное), поэтому кадр не сменится.

У меня на ноуте на FF 5, Safari 5.0.5, Chrome 12.0.742.122 цифра меняется, а на «Опере» 11.50 — нет. Сейчас попробую найти ноут с Windows 7 и попробую там. Попробуйте тоже на своих браузерах.

Добавлено: меняются ещё цифры на Андроиде 2.3.4, на FF 4.0.1 (Windows), а так же под Internet Explorer 9.0 и 10PP2 (Windows 7).

Добавлено ещё позднее: всё в порядке у «Оперы», разъяснил один из читателей — «Опера» начинает анимацию заново, если GIF не было видно. Дожидаясь, я переключал табы, поэтому анимация стартовала всегда сначала и «2» не появлялась. Так что ложная тревога, но любопытный факт.

В 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».

Ребята из «Оперы» экспериментируют с возможностями SpeedDial в своём браузере. Помните, я писал о специальных версиях некоторых сервисов «Яндекса» для SpeedDial?

К сожалению, «Опера» их разломала в свежей альфе, зато добавила новую возможность, которой очень нехватало: специальным заголовком или мета-тегом можно указать время обновления страницы в speeddial.

Preview-refresh: 10

или

<meta http-equiv="preview-refresh" content="10" />

Время указывается в секундах. Кстати, теперь можно надёжно узнать через media queries, что «Опера» показывает страницу в SpeedDial: достаточно проверить, что «view-mode» в значении «minimized»; помимо этого есть возможность указать произвольное изображения для миниатюры (об этом лучше почитать подробнее в блоге «Оперы»).

Случайно выяснилось, что «Опера» с какой-то версии не умеет показывать некоторые JPEG (и считает, что в них 0 бит на пиксель). Попытаюсь выяснить с какой версии это началось.

Добавлено: «Опера» 9.00, 9.27, 9.63, 10.00, 11.00, 11.01а и Opera Mini 5.1 не показывает. «Опера» 8.54 — показывает. Значит сломали в девятой версии.

Артемий Трегубенко написал расширение для «Оперы» «У всех работает».

Смысл в том, что если ваша «Опера» показывает экран с ошибкой «Невозможно найти удалённый сервер», это расширение при помощи сервиса «Down for everyone or just me» проверяет доступность того же сайта для других пользователей.

Полезно, можно узнать проблема с сайтом или у вашего провайдера.

А картинка, которая в этом посте, только в моей «Опере» не показывается или в вашей тоже?

Добавлено: картинка не открывается под любой платформой в последней «Опере», сейчас потестирую в других.

Чуть позже: «Опера» 8.54 показывает, 9.63 — уже нет. Я заменил картинку на такую, которую «Опера» понимает.

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

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

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

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

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

Это очень хорошая новость — вышла 11-я «Опера» с поддержкой расширений. Например, уже появилось расширение «Opera to Phone», к которому я привык на «Хроме».

Оно позволяет одним нажатием кнопки открыть в телефоне (на «Андроиде») ту же страницу, что сейчас открыта в браузере на компьютере, чтобы, например, продолжить её чтение уже с мобильника.

Из других хороших новостей — появилась поддержка WebSockets.

Добавлено: а ещё можно добавить сервисы «Яндекса» — пробки, погоду и отзывы о текущей странице.