firefox

Вышла версия 127.0.1 браузера «Фаерфокс». Я его не использую (хотя когда-то и пытался), но мимо такого номера версии пройти не мог.

Чтобы понять что в нём интересного, надо знать две вещи.

Многие айтишники, думаю, знают о существовании локального айпи-адреса машины — 127.0.0.1. Он используется, если клиенту надо обратиться на сервер, расположенный на той же машине. Но почему-то мало кто знает, что у айпи-адресов есть сокращённая версия записи. Так если чисел, разделённых точкой, меньше четырёх, последнее число кодирует весь необходимый остаток.

Пара примеров:
5.255.65522 → 5.255.255.242
111.7303023 → 111.111.111.111

Соответственно, адрес 127.0.1 в такой нотации — это 127.0.0.1, то есть этот номер версии «Фаерфокса» вполне можно попинговать:

Константы в ЦСС (которые почему-то называются «переменными») — прекрасная штука, особенно в сочетании с вычисляемыми выражениями (calc). Я рад, что браузеры постепенно внедряют эксперементальную поддержку, с нынешними темпами обновшения есть надежда начать это использовать уже очень скоро (calc я уже использую, его ограниченно поддерживает даже IE9).

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

В 31-м Файерфоксе (он пока ещё в бете) синтаксис констант сменился и теперь будет включен по-умолчанию. Выглядит это так:

:root {
  --bgcolor: #000; 
}

body {
  background-color: var(--bgcolor);
}

Как видите, префикс «var» сменился на два минуса в полном соответствии с изменениями в стандарте. Чем не устроил предыдущий синтаксис мне не интересно, но этот префикс набирать определённо быстрее — всего-то надо нажать одну клавишу два раза.

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

Я тогда ещё подумал, что ведь уже есть один браузер, который уже это умеет — это «Файерфокс». У него есть протокол «jar», который ровно это и делает: позволяет адресоваться внутрь зип-архивов. Вообще, JAR расшифровывается как Java ARchive и предназначен для распространения программ и компонентов, написанных на языке Джава, но обычный зип-архив с файлами внутри.

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

Итак, адрес с протоколом jar выглядит следующим образом:

jar:/files/jartest.jar!/foto.jpg

Первая часть урла представляет любой адрес, по которому можно скачать архив (тут могут быть использованы протоколы http, https, file, ftp, но почему-то не data), вторая часть — путь до файла внутри архива, можете посмотреть у меня в разделе «Храню» пример как это всё работает, открывать, естественно, нужно в «Файрфоксе».

Как видите, я поместил внутрь архива часть ЦСС и две картинки, одну из которых поставил задним фоном. Причём, как и в случае обычного урла, протокол по которому загружается ресурс можно опустить (часть «http», в данном случае), будет использован текущий протокол.

Но есть и бочка дёгтя. С пустым кешем или после обновления страницы архив грузится один раз, но если сделать полную перезагрузку страницы (⇧+⌘+R или шифт+контрол+R в Виндоуз), то загружается он столько раз, сколько раз ресурсов грузится на странице. Видимо, какой-то баг.

Я как-то пропустил знаменитую (оказывается) программу для генерации фона, похожего на лабиринт из двух слешей. Несложная программа на Бейсике:

10 PRINT CHR$(205.5+RND(1));: GOTO 10

Выводит вот такой фон (скриншот с «Командора 64», поэтому цвета такие):

Для тех, кто не понимает этот архаичный язык, перепишу на Пайтоне:

import random; while 1: print random.choice(u'╱╲'),

и ПХП:

for(;;) flush(print '/\\'[mt_rand(0, 1)+.5]);

На «Хабре» статья пробегала, где автор пытался сделать то же при помощи CSS, не справился и сделал генерацию на серверной стороне — на PHP. Он высказывал мысль использовать для этого JS, но то ли не смог, то ли отбросил её по каким-то иным причинам.

В общем, решил я попробовать сделать это на стороне клиента, на «канвасе», заодно посмотреть конструкции, которые позволяют ставить «канвас» в качестве задника, давно руки чесались.

Сначала результат (в левом верхнем углу фрагмент нормального размера):

Теперь посмотрим код. Я убрал всё лишнее, подробности можно посмотреть в разделе «Храню»:

!function(c) {
    var ctx = document.getCSSCanvasContext ? 
        document.getCSSCanvasContext("2d", "maze", c.width, c.height):
        c.getContext("2d");

    ctx.font      = "10px monospace";
    ctx.fillStyle = '#36f';
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = '#068';

    for (var y = 7, ly = c.height; y < ly; y += 8) {
        for (var x = -1, lx = c.width; x < lx; x+= 4) {
            ctx.fillText("/\\".charAt(Math.random() + .5), x, y);
        }
    }

    if (!document.mozSetImageElement && !document.getCSSCanvasContext) {
        document.getElementsByTagName('body')[0].style.backgroundImage='url(' + c.toDataURL("image/png") + ')';
    }

}(document.getElementById('maze'));

Внутрь функции у меня передаётся объект «канваса» (размером 99×96, подогнан под шрифт).

В первой строке проверяется наличие метода «getCSSCanvasContext», он работает только в браузерах, основанных на Вебките (Хром, Сафари) и позволяет напрямую использовать «канвас» для задника, нужно только в CSS указать идентификатор:

body { background: -webkit-canvas(maze); }

Если этот метод недоступен, то я рисую в скрытый тег «канваса», который есть у меня на странице. Вывожу те же самые символы, которые использовались в Бейсике.

Связь «канваса» и задника для браузеров на «Геко» (ФайрФокса и менее известных) в Джаваскрипте не видна, она полностью на стороне CSS:

body { background: -moz-element(#maze); }

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

В последних строках я проверяют доступен ли метод для указания «-moz-element», нет ли метода для рисования «канвасом» прямо в задник, если нет, то перевожу картинку из «канваса» в dataURI и добавляю её в таком виде на фон тега BODY. Таким образом, этот код работает и для «Оперы» с «Эксплорером» (начиная с девятого).

.selector, _:-moz-meter-optimum {
    background: red;
}

ЦСС-хак для Файрфокса 16, который выйдет сегодня вечером. Вместо «.selector» надо поставить нужный вам селектор.

Меня тут попросили сделать CSS-хак для шестого Файрфокса. Пожалуйста:

x::-moz-progress-bar, body {
    background: orange; /* FF 6.0+ */
}

@-moz-document regexp(".*") {
    body {
        background: orange; /* FF 6.0+ */
    }
}

Проверено на Firefox 6.0 и 7.0.1.

Решил посмотреть производительность финальной версии новой «Оперы», по сравнению с последними альфами и бетами других браузеров. На момент выхода финальной версии 10.50 это был самый производительный браузер. Поменялась ли ситуация?

Тест «V8» не показал ничего неожиданного: этот тест придуман «Гуглом» оптимизирован под браузер «Хромиум». Но я всё равно сожалею, «Опера» ничего не сделала, чтобы догнать «Хромиум» в этом тесте.

Тест «Sunspider» (версии 0.9) показал, что последние версии «Хромиума» уже потихоньку сдвигают «Оперу» с престола. В этом тесте, в отличие от остальных, чем меньше показатель, тем лучше.

Увы, тест «Peacekeeper показывает то же самое: „Хромиум“ сдаваться не собираться и наращивает производительность семимильными шагами.

FireFox сейчас аутсайдер и в гонке не участвует.

В комментариях на «Хабре» попросили придумать CSS-хак для FireFox 3.5. Пожалуйста:

<style type="text/css">
x:-moz-any-link:nth-child(0), body { background: red; } /* FF 3.5+ */
</style>

Проверил в Firefox 2.0.0.19, Firefox 3.0.3 и в Firefox 3.5.5.

Сегодня написал небольшой user.js для «Оперы» и решил его переписать под плагин «Greasemonkey», под «Firefox». Оказалось, что есть немаловажные различия.

Во-первых, объект window браузера напрямую недоступен — нужно пользоваться «unsafeWindow», но руководство не рекомендует его использовать. Мне в user.js window браузера нужен был для доступа к jQuery, который был подгружен на странице, где работает скрипт, мне было удобно использовать этот framework. Объект «window» тоже есть, это внутренний объект Greasemonkey и выглядит как настоящий, только не радует на него, например, рекомендуется вешать все события.

Во-вторых, обращаться к функциям, определённым на странице, рекомендуется через

location.href="javascript:void(pageFunc(123))"

, утвержается, что это более безопасно, видимо, чтобы не передавать контекст выполнения наружу. Говорят, что в Chrome 4 это единственный способ добраться до «window».

В-третьих, из скриптов, выполняющихся из Greasemonkey, можно использовать функции «GM_xmlhttpRequest» (XHR с возможностью делать запросы на любые адреса), «GM_log» (логгирование, как можно догадаться) и так далее.

Ну и можно использовать localStorage (FF 3.5+) и globalStorage (FF 2.0+) для сохранения данных user.js.

По мотивам предыдущего поста. Чтобы Opera 9+ (а так же 3.5—6.05), Firefox 3.6+, Chrome 3.0.191.0+ и Safari 4.0.1+ позволили выбрать несколько файлов в диалоге загрузки файлов, нужно написать вот такой код:

<form enctype="multipart/form-data" method="post">
   <input type="file" min="1" max="9999" name="file[]" multiple="true" />
   <input type="submit" name="submit" />
</form>

Я указал «file[]» для того, чтобы PHP сразу разложил полученные файлы по массиву $_FILES. К сожалению, запрос от «Оперы» PHP понимает неверно, так как «Опера» шлёт такой запрос в формате multipart/mixed. К счастью, PHP в этом случае положит содержимое файлов одним MIME-куском прямо в $_POST[’file’][0], а там его уже можно разобрать (надеюсь, директива magic_quotes_gpc у вас отключена).

Я попробовал, это несложно. Для того, чтобы разобрать MIME-секцию, я использовал PECL-модуль mailparse (есть версия для Windows):

if (isset($_POST['file'], $_POST['file'][0])) {

    if ($idx = strpos($_POST['file'][0], "\n")) {
        $bound = substr($_POST['file'][0], 2, $idx-2);

        $body  = "MIME-Version: 1.0\nContent-type: multipart/form-data; boundary={$bound}\n\n".
                 $_POST['file'][0];

        unset($_POST['file'][0]);
        $f = &$_FILES['file'];

        $f['name'] = $f['type'] = $f['tmp_name'] = $f['error'] = $f['size'];

        $msg = mailparse_msg_create();

        if (mailparse_msg_parse($msg, $body)) {
            $i = 0;

            foreach(mailparse_msg_get_structure($msg) as $st) {

                $section = mailparse_msg_get_part($msg, $st);

                $data = mailparse_msg_get_part_data($section);

                if ($data['content-type'] == 'multipart/form-data') {
                    continue; 
                }
            
                ob_start();
                if (mailparse_msg_extract_part($section, $body)) {
                    $tmp = tempnam(sys_get_temp_dir(), 'php');
                    file_put_contents($tmp, ob_get_clean());

                    $f['name'][$i] = $data['disposition-filename'];
                    $f['type'][$i] = $data['content-type'];
                    $f['tmp_name'][$i] = $tmp;
                    $f['error'][$i] = 0;
                    $f['size'][$i] = filesize($tmp);

                    $i++;
                } else {
                    ob_end_clean();
                }
            }
        }
        unset($f);

        mailparse_msg_free($msg);
    }
}

var_dump($_FILES); // результат помещатся в $_FILES, не забудьте удалить временные файлы после обработки!

У меня ожидается, что содержимое файлов будет передано как параметр «file[]» (в $_POST это будет $_POST[’file’][0]), но пример несложно переделать на любое другое имя или сделать это имя параметром.

Я как-то пропустил, хотя сам участвовал в голосовании за эту фичу, что бете FF 3.6 появилась возможность выбрать несколько файлов при загрузке (это часть стандарта WebForms 2). Простой пример использования:

<input type="file" name="input" multiple="true" />

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

Попробовал посмотреть как выгдядит прикрепление нескольких файлов со стороны PHP, оказалось всё просто — достаточно сказать PHP, что из входящих данных нужно сделать массив и всё работает (например, указать name=«input[]»): в каждом поле каждого элемента массива $_FILES содержится массив значений. Вот как это выглядит для двух файлов:

array(1) {
  ["input"]=>
  array(5) {
    ["name"]=>
    array(2) {
      [0]=>
      string(14) "2009.09.23.jpg"
      [1]=>
      string(14) "2009.08.25.jpg"
    }
    ["type"]=>
    array(2) {
      [0]=>
      string(10) "image/jpeg"
      [1]=>
      string(10) "image/jpeg"
    }
    ["tmp_name"]=>
    array(2) {
      [0]=>
      string(18) "Z:\tmp\php3740.tmp"
      [1]=>
      string(18) "Z:\tmp\php3741.tmp"
    }
    ["error"]=>
    array(2) {
      [0]=>
      int(0)
      [1]=>
      int(0)
    }
    ["size"]=>
    array(2) {
      [0]=>
      int(35005)
      [1]=>
      int(63030)
    }
  }
}

Конструкция работает в Chrome с версии 3.0.191.0 и в Safari с версии 4.0.1. К сожалению, в Opera 10.20 alpha 1 поддержки нет, в IE8 — тоже.

Добавлено 29 ноября 2009 23:08: оказывается, «Опера» поддерживала с версии 3.5 загрузку сразу нескольких файлов в обычном, «однофайловом» диалоге, но в 7-й версии эту возможность открутили. Так что «Опера» первый браузер, где это реализовали.

Добавлено 29 ноября 2009 23:14: «Опера» 9.0 и выше поддерживает загрузку множества файлов в одном контроле, достаточно указать параметры min и max:

<form enctype="multipart/form-data" method="post">
   <input type="file" min="1" max="9999" name="file" />
   <input type="submit" name="submit" />
</form>

Плохие новости заключаются в том, что PHP такой запрос от «Оперы» разбирать не умеет.

Добавлено через год: в «Опере» 11 атрибуты «min» и «max» удалили, но зато работает «multiple».

Посмотрел Firefox 3.6 beta 2, что сподвигло меня на очередную попытку пересесть на этот браузер с «Оперы»: скорость работы уже приблизилась к комфортной. Пересесть на Firefox хочется, прежде всего, из-за Firebug. Dragonfly в «Опере» — чудовищное глючное поделие, пользоваться которым некомфортно. Это совсем не похоже на ПО компании «Опера».

Неделю попользовался Firefox, не осилил. Нехватает тысячи мелочей, некоторые из которых не правятся плагинами. Например, почему при нажатии кнопки «Назад» в браузере, Firefox не показывает документ в том месте, где я остановил чтение? Мне что, на каждый чих закладку открывать?

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

Придётся, как и раньше, жить в двух программах. Это, кстати, моя вторая попытка переползти на Firefox.

На сайте JavaScript.ru появилась статья о новых событиях в JavaScript — offline и online (реализованы в Firefox 3.5 и Internet Explorer 8.0). Цитирую выводы:

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

Они триггерятся при переходе по клику пользователя в автономный режим и обратно.

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

Firefox глючит, в отличие от IE

Сегодня с утра, порадовавшись выходу Mozilla Firefox 3.5beta4, решил погонять её на JS-эмуляторе «Спектрума», о котором я упоминал. По скорости выходит где-то на уровне или впереди Safari4beta.

Плохо то, что Firefox, как оказывается, сильно размывает Canvas. Когда я играл на эмуляторе в одну из игр, мне казалось, что у меня что-то со зрением — до того размытая картинка. На скриншоте видно (слева направо): Opera 10 alpha 1456, Safari 3.2.2, Firefox 3.5beta4.

Получаем ещё один «стандарт», который ведёт себя во всех браузерах по-разному. Приехали.

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

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

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

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

<![endif]-->

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

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

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

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

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


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

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

</head>

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

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

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

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

Движок Gecko содержит массу интересных селекторов. Вот несколько интересных селекторов, о которых мало кто знает:

For what it’s worth, development versions of Gecko have:

:-moz-broken (which would cover your :missing and :corrupt, which are not  exactly easy to tell apart). :-moz-user-disabled (user has turned off all images) :-moz-suppressed (images from the server involved are blocked) :-moz-loading :-moz-type-unsupported (for <object>s)

Может быть это у меня как-то с FireFox3 не складывается. Попробуйте у себя. Что показывается ваш FF по адресам «about:about» и «about:neterror»?

У меня на первый адрес сообщается, что «Firefox не может найти файл jar:file:///C:/Program Files/Mozilla Firefox/chrome/toolkit.jar!/content/global/aboutAbout.html.», на второй что «Firefox не может загрузить эту страницу по неопределённой причине».

Кстати, бонус, откройте: «about:neterror?d=%D0%A1%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B5» у меня открывает полупустую страницу, где написано «Или же вы можете добавить исключение» с кнопкой «Попробовать снова».

FireFox3 хорошеет на глазах. Не знаю насколько он хорош как средство для сёрфинга (выйдет — обязательно скачаю и посмотрю), но как браузер он, безусловно, становится всё лучше. На днях FireFox 3.1 стал проходить тесты селекторов CSS3. Хорошие новости, теперь все три основных браузера — Opera, Safari и FireFox поддерживают CSS3.

Как вы думаете, на фоне Mini Cooper «копейка» является автомобилем? С этого дня я называю «Оперу», FireFox и «Сафари» «основными браузерами», поскольку именно они и являются браузерами, а IE — «альтернативным», поскольку это политкорректное название для «куска говна с окошками», да и понимание новых стандартов у него «альтернативное». При этом я не умаляю заслуг специалистов из компании Microsoft, создавших IE6 — шедевр для тех лет, и положивших начало многим современным стандартам. Спасибо, ребята, надеюсь IE9 будет достоин тех же похвал.

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

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

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

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