26 заметок с тегом

firefox

CSS variables

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

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

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

:root {
  --bgcolor: #000; 
}

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

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

2014   css   firefox   программирование

Протокол «jar» в FireFox

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

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

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

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

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

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

Код работы с jar (33.53КиБ)

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

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

Ресурсы грузятся заново (10.46КиБ)

Генерируемый задний фон

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

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

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

Фон из слешей (27.66КиБ)

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

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

и ПХП:

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

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

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

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

Фон в виде лабиринта (31.46КиБ)

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

!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. Таким образом, этот код работает и для «Оперы» с «Эксплорером» (начиная с девятого).

2012   canvas   chrome   css   firefox   safari   webkit   программирование

Firefox 16 CSS hack

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

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

2012   css   firefox   программирование

CSS hack for FireFox 6

Меня тут попросили сделать 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.

2011   css   firefox   программирование

Производительность «Оперы» 10.50

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

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

V8 (2.76КиБ)

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

Sunspider (2.77КиБ)

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

Peacekeeper (2.83КиБ)

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

CSS hack для Firefox 3.5

В комментариях на «Хабре» попросили придумать 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.

2009   css   firefox   программирование

User.js и FF

Сегодня написал небольшой 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.

Input multiple-2

По мотивам предыдущего поста. Чтобы 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]), но пример несложно переделать на любое другое имя или сделать это имя параметром.

2009   chrome   firefox   html   opera   php   safari   программирование

Input multiple

Я как-то пропустил, хотя сам участвовал в голосовании за эту фичу, что бете 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».

2009   firefox   html   программирование
Ранее Ctrl + ↓