safari

Есть такая договорённость в вебе — псевдоссылки (которые похожи на ссылки, но не уводят со страницы) подчёркивать не сплошной чертой, а прерывистой или точечной. Обычно такую черту делают бордюром снизу тега, но если настоящие ссылки сделаны через text-decoration: underline, то черта оказывается на разной высоте: у ссылок она выше, чем у псевдоссылок.

Сейчас браузеры начинают поддерживать свойство text-decoration-line, но с переменным успехом — Хром — поддержка выключена по-умолчанию, Файерфокс поддерживает в полном объёме, Сафари как утверждает «КенАйЮз» — не поддерживает, ИЕ — тоже.

Оказалось, в данном случае — доверяй, но проверяй. «Сафари» (по крайней мере восьмая версия) всё-таки частично поддерживает это свойство, просто не все значения — отрисовываются wavy (на скриншоте), double и solid (остальные значения превращаются в solid).

Я с «Флешем» в последние годы не сталкивался, но и прежде подобного поведения не наблюдал. В общем, решил я вчера обновить в нашем продукте библиотеку ВебКамДжиЭс, она у нас для получения фотографии с камеры используется. Прежняя была 0.9, а тут я случайно обнаружил, что релиз вышел.

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

В принципе, можно было откатиться на предыдущую версию, но смущало, что на демо-сайте ВебКама в «Сафари» всё работало нормально. Я попробовал несколько вариантов, прежде чем мне пришла в голову идея посмотреть заголовки запросов. И заметил разницу, показавшуюся несущественной, но всё-таки я решил попробовать её устранить — mime type различался.

У нас сервер отдавал Флеш с типом «application/x-shockwave-flash», а в демо-примере был «binary/octet-stream». Стоило поменять этот заголовок, и всё заработало.

Беглое гугление света не пролило, но если столкнётесь с похожей проблемой, имейте ввиду, возможное решение — смена типа для отдаваемого флеш-ролика.

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

@supports (top: 0__qem) {
    .chrome-only {
        border: 1px solid #000; /* стиль только для Chrome (не Safari) */
    }
}

Работает начиная с 28-го «Хрома» и не работает на «Сафари» (включая последнюю версию 7.0.5). Принцип простой, как чихание — «Сафари», даже самый свежий, не поддерживает конструкцию «@supports», правда её поддерживает Файерфокс и зомби «Оперы».

Эта стандартная конструкция предназначена для проверки — поддерживает ли браузер указанное свойство. Недостаточно подставить туда свойство с префиксом webkit — сейчас многие браузеры читают такие свойства как свои, над что-то иное.

Чтобы отсечь лишнее, я использую нестандартную единицу измерения Вебкита — «__qem», я о ней писал несколько лет назад. Вместе получается, что стиль в «Сафари» не срабатывает, потому что тот не поддерживает «@supports», а в остальных браузерах — потому что они не поддерживают «__qem».

Естественно, обёртки над Вебкитом (новая «Опера», браузер «Яндекса» и прочее) стиль увидят — но на то они и обёртки.

В Юникоде есть несколько символов часов (не знаю, отобразятся ли они у вас, вот они): «🕐🕜🕑🕝🕒🕞🕓🕟🕔🕠🕕🕡🕖🕢🕗🕣🕘🕤🕙🕥🕚🕦🕛🕧.»

Тут, как видите, шаг полчаса. Я вчера за завтраком сделал Юникодные часы, которые «ходят» поворотом символа (через ЦСС-трансформации). Часовая стрелка очень некрасиво скачет (я только для Вебкита делал и испытывал только в Сафари), потому что мне приходится вращать символ, чтобы минутная стрелка двигалась, а потом переходить на следующий символ. В общем, просто разминка для пальцев.

Рассказать я хотел не об этом. Я и раньше встречался с тем, что часть Юникода не воспринимается многими программами нормально, особенно что касается раздела «Эмодзи, например „Яндекс.Фотки“ не так давно порадовали меня следующим (стоило переименовать картинку, всё стало в порядке):

Редактор „Сублиме Текст 2“ часто падает, если в тексте программы встречаются эти символы, а вот „Сафари“ удивил больше всех. Он их, вроде бы, понимает, но как-то не до конца:

"🕐".length; // 2
'🕐'[0]; // строка со «сломанным» символом
escape('🕐'); // "%uD83D%uDD50"

То есть, он считает символы Эмодзи не одним символом, а двумя. Такой вот баг. Мне пришлось в коде на ДжаваСкрипте это учитывать.

Дополнение: в комментариях подсказывают, что вроде так и задумано. Так как этим символы представлены четырьмя байтами (суррогатной парой), ДжаваСкрипт, который не умеет работать с такой парой как с одним символом, разделяет его на два.

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

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

Случайно нашёл способ как повалить браузер «Сафари» шестой версии (под «Мак»), другие версии не пробовал — не у меня их. Падает от такого HTML-кода:

<style>
* {
   background: -webkit-image-set(url(BOLK!) 1x), url(BOOM!)
}
</style>

Пока очень доволен «Сафари», более чем. Установил три плагина, пока всего хватает.

«AdBlock» блокирует рекламу и добавляет в браузер подобие интерактивного блокировщика из «Оперы».

«ClickToFlash» поставил бо́льшей частью даже не из-за блокировки «Флеша», а из-за побочного эффекта функции замены «Флеша» на отображение видео через HTML5 (для знакомых плагину сервисах) — теперь я не вижу рекламу на «Ютубе».

Ну и конечно, «SafariOmnibar», спасибо читателю. Помню, Бирман с грустью смотрел как я в «Опере» (я тогда ещё ей пользовался) с лёгкостью ищу по «Википедии» и прочему, пользуясь настроенными сокращениями прямо из строки адреса. Илья, в «Сафари» такое тоже есть, надо только плагин поставить! Настраивается не так удобно, как в «Опере», правда. Надо кликнуть правой кнопкой на адресной строке, там в меню выбрать «Edit Omnibar Search Providers», дальше уже разобраться просто.

Владислав Шкодин написал статью на «Хабре», где рассказал как ему удалось победить старый баг в движке WebKit — если вставить SVG с прозрачным фоном в тег OBJECT, что «Сафари» и «Хром» (до 8-й версии) зальют фон белым цветом.

Решение очень простое. Прямо внутри файла SVG, после тега svg нужно написать следующее:

<style>
    svg { -webkit-background-clip: text; }
</style>

Автор теста 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 очков.

На «Хабре» сравнили вышедший вчера Safari 5 и Internet Explorer 9 Preview 2. Оба браузера обладают аппаратным ускорением (на скриншоте — результаты теста «Flying Images»).

Видно крайне низкий показатель FPS у «Сафари». Странно, но под «Мак» таких проблем нет, похоже под Windows аппаратное ускорение неполное, если оно вообще там есть.

У меня на машине «Сафари» 5 показывает в том же тесте 1…2 fps, тогда как «Опера» 10.60a — около 35. Заметьте, у «Оперы» аппаратное ускорение не заявлено.

Если у кого-то есть Safari или Chrome (Chromium), проверьте, пожалуйста, CSS-хак, который я сейчас изобрёл:

<head>
<style type="text/css">
   /* содержимое этого стиля увидит только WebKit-браузер */
    body:not([x|x]) div {
        background: red;
        width: 100%;
        height: 100%;
    }
</style>
<body><div></div></body>

Хочется узнать для каких версий браузеров он действует. Можно в почту написать: imbolk@gmail.com

P.S. Должна быть красная страница с белой рамкой.

P.P.S. В WebKit-браузере «Андроида» 2.2 тоже работает.

P.P.P.S. Для Konqueror 3.5 и выше этот CSS hack тоже работает. То есть это, скорее всего, особенность ещё KHTML-движка, из которого появился WebKit.

P.P.P.P.S. В комментариях проверили Safari 2 и Chrome 4, CSS hack работает.

P.P.P.P.P.S. Проверил под Chrome 1.0.154.59, работает.

P.P.P.P.P.P.S В комментариях проверили Chromium 6.0.424.0 (48800), CSS hack работает.

В Ванкувере на встрече хакеров (…) демонстрировалась масса способов хакнуть Mac через Safari — там штук 20 эксплойтов было уже заготовленных — известный специалист по безопасности Чарли Миллер намекнул, что он сам использует браузер Opera, но и то, только потому что он (кроме России) пока не так популярен, как остальные и особо за него никто еще не брался.

Цитата с «Кулера». В очередной раз убеждаюсь, что всё дырявое, просто в непопулярном дырки никто не ищет.

Так вот, оба браузера построены на библиотеке Webkit и оба грешат тем, что не передают HTTP_REFERER.

На самом деле передают, но не всегда, что еще больше запутывает ситуацию. Если человек просто нажмет на ссылку, то реферер будет передан серверу, если откроет новое окно или вкладку «альтернативным» нажатием (на Маке это cmd-click или нажатие средней кнопки), то тоже передастся, а вот если нажать правой кнопкой (или ctrl-click), то нет.

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

The result, according to the Norwegian company, would be a browser up to six times faster than the iPhone’s default Web tool, Safari.

«Опера» для Айфона готова и, как следует из цитаты, она в шесть раз быстрее встроенного «Сафари». Если Эпл разрешит, то это приложение станет доступным через две недели.

У браузеров на движке WebKit какое-то своё, фашисткое отношение к «решётке» (#), после которой указывается локальный якорь в URL.

Во-первых, когда устанавливаешь location.hash, где более одной «решётки», Safari и Chrome иногда перезагружают страницу (зачем?).

Во-вторых, вторая и последующие «решётки» кодируются как «%23» (ни один браузер больше так не делает).

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

Иногда я верю, что один браузер это хорошо.

Иногда.

Добавлено 13 декабря 0:40: в комментариях мне подсказываю, что, кодируя «решётку» как «%23», WebKit поступает по RFC. То есть, формально, претензий никаких. По смыслу же, мне кажется, что «решётку» тут кодировать не надо.

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

Как говорится «хозяйке на заметку».

У WebKit (браузер Safari) есть CSS-свойство «-webkit-text-security», которое позволяет установить на что заменять введённые в текстовое поле символы. Может принимать следующие значения: «none», «disk», «circle» и «square». Переводить не надо, думаю.

Это помогает обойти не очень (на мой взгляд) удобное ограничение Mac OS, что в поле пароля нельзя вводить русские буквы. У меня некоторые пароли содержат символы в двух раскладках.

Для интереса написал на 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 загружен три раза

Век живи, век учись. Оказывается, конструкцию «-webkit-min-device-pixel-ratio:0» понимает Opera 9.2x. Какое безобразие. На «Хабре» появилась статья, где описаны популярные хаки для браузеров и, в частности, есть решение этой проблемы:

/* Первая конструкция — против Opera 9.5, которая понимает вторую, а вторая — против Opera 9.2, которая
понимает первую. Верх извратства :) Вобщем-то безопасная конструкция, т. к. 9.2 уже не будет
эволюционировать и явно не сможет обработать :first-of-type, а -webkit- — проприетарное свойство и 
обрабатывается Opera 9.2 скорее по ошибке, что следует из отсутсвия поддержки в 9.5 */

/* Safari понимает обе, поэтому хак работает */
@media all and (-webkit-min-device-pixel-ratio:0) {
   
   body:first-of-type #lightSF3 { display: block }
   /* вместо :first-of-type можно еще использовать :nth-of-type(1) — он для Safari 3.1 */
   
}

Есть у меня такой любимый синтетический тест браузеров — запускать на своём древнем интерпретаторе языка 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.