22 заметки с тегом

chrome

Опции просмотрщика PDF в Chrome

Многие, наверное, знают что у плагина Эдоуби для просмотра ПДФ есть специальные параметры, которые передаются фрагментом в урле. Эдоуби публиковала эти параметры в разных документах, а теперь они собраны в специальном ЭрЭфСи под номером 3778.

Я для интереса попробовал эти параметры в «Хроме» (там собственный просмотрщик, поэтому я не удивился бы, если бы они не сработали) и оказалось, что три из них всё же работают:

# увеличение на 50%
http://example.org/sample.pdf#zoom=50
# переход к странице №2
http://example.org/sample.pdf#page=2
# переход к главе «Chapter»
http://example.org/sample.pdf#nameddest=Chapter

Подробнее можно прочитать ЭрЭфСи (в частности, в «zoom» можно указать ещё два параметра). Так же параметры можно комбинировать, это тоже работает — если указать их через амперсанд.

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

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

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

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

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

Ёперный театр :-(

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

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

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

2011   chrome   opera

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

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

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

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

Хром → Опера

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

Но. Недавняя неприятная история, когда в код «Хромиума» (это «Хром», но без «жучков») попал один из «шпионских» модулей, заставляет задуматься — что ещё, по небрежности или умышленно, могла забыть выключить корпорация «Гугл» в своём браузере? Тем более, что ещё на слуху история о том, что «Гугл» собирал данные WiFi-трафика при помощи автомобилей Street View.

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

Перехожу обратно на «Оперу», других вариантов нет. «Сафари» под Windows — это какой-то чёрный юмор, FireFox похож на обросшую ракушками баржу, IE9 пока ещё сырой чуть более, чем полностью. Так что, при всё богатстве выбора, другой альтернативы нет.

2010   chrome   ie   ie9   программирование

Прощай, «Опера»

Прощай, «Опера», мне было хорошо с тебой, но это невыносимо. С версии 10.50 ты обрастаешь багами, как баржа ракушками. Сегодня я увидел, что на твоём FTP лежит релиз версии 10.60, а в нём три критичных для меня бага, два из которых делают жизнь в нашем интранете для меня труднее. Я терпел, сколько мог, но больше не могу.

Научите меня пользоваться «Хромом», ещё лучше — «Хромиумом», он, говорят, быстрее развивается, что немаловажно для молодого браузера. Что ставить? Откуда скачать уже собранные версии «Хромиума»?

Браузеры и стандарты: Ахиллес и черепаха

На «Хабре» кто-то в очередной раз кто-то наткнулся на статью полугодовой давности и понеслось — сделаны далекоидущие выводы.

Упомянутая статья за полгода не обновлялась (о чём говорит отсутствие упоминания об SVG в IE9), так что предпосылки неверные. Предпосылки неверные, но вывод, впрочем, правильный. В плане стандартов будущее крайне далеко.

Должен сказать, что любые тесты браузеров — это сферические кони в вакууме. Какие, нахрен, ACID3, какие SunSpider? «Опера» до сих пор не поддерживает CSS1! Ибо сказано:

The format of a percentage value is an optional sign character (’+’ or ’-’, with ’+’ being the default) immediately followed by a number (with or without a decimal point) immediately followed by ’%’.

CSS1, раздел 6.2, проценты могут быть указаны с десятичной точкой. Мне кажется, это означает, что я могу указать дробные проценты и всё будет хорошо. Во всех браузерах так и есть. Во всех, кроме «Оперы». Самая распоследняя «Опера» округлит их вниз.

CSS3-селекторы. Уже все основные браузеры хвастаются их поддержкой. На сайте CSS3.info есть даже специальный тест, на который часто ссылаются. Ну, хорошо «Хром» этот тест проходит. И начал проходить едва ли не раньше всех.

Если этот браузер заявляется поддержку селекторов CSS3, то для меня, как разработчика, это должно, видимо, означать, что работает и любая их комбинация, не так ли? Иначе, что толку от поддержки селекторов по одному в строке?

И вот реальная задача — делал я галереи на сайте без использования JavaScript, на голом CSS (спасибо селектору «:target», это самое крутое, что появилось в CSS за последние годы). Простая задача — если «:target» не указывает ни на один из тегов в текущей галерее, нужно указать, что выбрано первое изображение.

Да, пожалуйста (у меня первое изображение это последний элемент списка):

.gallery li:not(:target) ~ li:last-child a {
    background: #fff;
    color: #000;
}

.gallery li:target ~ li:last-child a {
    background: #aaa;
    background: rgba(170, 170, 170, 0.5);
    color: #fff;
}

Несложно же. «Опера» и «Файерфокс» чудесно с этим справляются, почему бы и нет, все селекторы им знакомы. Но это не работает в «Хроме» и «Сафари» (5-й «Сафари» я ещё не тестировал), точнее, это работает, но глючит — срабатывает только на следующем элементе, а не каждом. Чтобы исправить проблему, мне пришлось изобрести CSS hack для «Safari» и Chrome.

Так повсюду, в блоге IE авторы как-то показывали, что «border-radius» и «box-shadow» поддерживаются браузерами с глюками или имеют серьёзные различия в рендере. Всюду так — заявлена поддержка SVG1.1, но чего-то нехватает, Canvas, но текстом писать нельзя, тег VIDEO, но нельзя открывать на весь экран.

Конечно, тут ещё сказывается тот факт, что большинство этих спецификаций находятся в стадии черновика, вот реализовала «Опера» четыре года назад в браузере Server-sent Events, а черновик изменился и тег «event-source» теперь оказался не нужен.

В общем, к этим стандартам нам ещё всем идти и идти, много лет. Это основной вывод. А теперь другие мысли.

Селектор «:target» хоть и самое чудесное, но, в то же время, почти самое недодуманное в CSS за последние годы. Это уже ощутили мои читатели. Конечно, «:target» добавляет интерактива в CSS, но хотелось бы, чтобы этот интерактив не касался напрямую HTML, т. е. был какой-то флаг, указал его и страница не прокручивается к целевому тегу. Придётся переделать галерею на JavaScript.

Предыдущая моя заметка о conditional comments. Я уже когда-то говорил и ещё раз скажу — W3C делает большую ошибку, что не включает их в стандарт, причём на уровне и HTML, и CSS. W3C заявляет, что конечная цель — стандартное счастье у всех браузеров. Увы, в свете сказанного, туда идти ещё очень долго, учитывая все баги, недоделки, несделанное и просто ещё не дописанное самим W3C. А сейчас-то что делать? Как мне для «Сафари» и «Хрома» такой-то версии что-то выключить? Использовать CSS-хаки?

И ещё, как я уже писал W3C вряд ли когда-нибудь вообще остановится. Будут всё новые и новые стандарты, улучшения существующих. Это значит, что браузеры никогда не достигнут всего, что описано. И поэтому тоже нам нужны conditional comments.

CSS hack для Safari 2, 3, 4 и Chrome (Chromium) 1, 2, 3, 4, 5 и 6

Если у кого-то есть 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 работает.

Ранее Ctrl + ↓