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

safari

text-decoration-line

Wavy (30.66КиБ)

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

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

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

Странное с Флешем

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

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

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

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

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

Chrome (but not Safari) CSS hack

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

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

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

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

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

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

Юникодные часы

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

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

Юникодные часы (3.72КиБ)

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

«Яндекс.Фотки» (52.51КиБ)

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

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

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

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

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

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

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

Способ повалить Safari 6.0

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

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

Плагины для «Сафари»

OmniBar (36.38КиБ)

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

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

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

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

2011   safari

Прозрачный фон SVG в Хроме и Сафари

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

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

<style>
    svg { -webkit-background-clip: text; }
</style>
2010   chrome   css   safari   svg   webkit   программирование

HTML5 test

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

Аппаратное ускорение в пятом «Сафари»

Safari5 vs IE9P2 (44.31КиБ)

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

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

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

2010   ie   ie9   safari   программирование
Ранее Ctrl + ↓