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» можно указать ещё два параметра). Так же параметры можно комбинировать, это тоже работает — если указать их через амперсанд.

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

@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», поэтому цвета такие):

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

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

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

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

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

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

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

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

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

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

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

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

Появился Chromium 7 с аппаратным ускорением и сразу порвал в клочья Internet Explorer 9 TTP4. Пятнадцатого сентября выходит уже бета 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.

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

alexleo: Вот оно — наше будущее… Хром, конечно, старается вовсю… 70-80% загрузки двухъядерного p9500/2.5G для рисования простейшей анимации… Жесть.

Meroving: и еще эти люди запрещают адобе ковыряться в носу))

Из обсуждения на «Хабре» CSS-анимации в «Our Solar System» (работает в «Хроме» и «Сафари»), сделанной почти на голом CSS3 (неясно только почему пояс астероидов сделан PNG-картинкой, а не веб-шрифтом, было бы круче).

Забавная тенденция — несколько лет назад я бы сказал, что это Флеш (апплет Джавы можно распознать), теперь я теряюсь что это. SVG+SMIL? SVG+JavaScript? Canvas? CSS3? Flash? Silverlight?

Скоро, видимо, внутри браузера будет столько всякого, что программисты разойдутся на несколько лагерей. Как сейчас с бакэндом — есть те, кто пишет на PHP, те, кто на Python, те кто на Perl и т. д. Кстати, сейчас есть ещё более мелкое деление — по CMS и фреймворкам. Всякие там Django, Twisted, Drupal, Plone, Zend Framework, Catalyst и прочее.

По фреймворкам в браузере разделение уже есть. Я, например, пишу с использованием jQuery и считаю Dojo ересью.

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

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

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

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

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

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

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

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

Игорь Сысоев написал интересную статью «Почему Google V8 пока не подходит для встраивания в сервера», краткая выжимка:

Поскольку V8 разрабатывается в первую очередь для Chrome, то это наложило на него существенный отпечаток и, перефразируя высказывание Генри Форда о цвете машины, можно сказать, что V8 будет хорошо работать в любой программе, при условии, что эта программа называется Chrome. (…) Подытоживая вышеописанное, можно сказать, что на данный момент (версия 2.0.6.4, февраль 2010 года) V8 не подходит для серьёзного встраивания в сервера.

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

Бобук рассказывает про количество людей, имеющих отношение к появлению Chrome:

Итого, представь себе что 10 миллионов долларов в акциях размазывается между разработчиками проекта. Такие небольшие проекты как Chrome в гугле затрагивают очень небольшую группу, скажем всего 500-600 человек разработчиков, 50-100 дизайнеров, 200-300 маркетологов, под сотню админов, сотня менеджеров. Итого на нос получается в пике 10 тысяч на лицо. Теперь подумай, что такое в Калифорнии 10 тысяч долларов _В АКЦИЯХ_, т. е. после реализации акций и уплаты налогов — у тебя на руках 5 тыщ долларов.

В ответ на вопрос откуда информация и по поводу численности:

Про команду разработки? Есть некотрые инсайдеры. Не, вообще команда разработки там примерно в 3 раза меньше, но есть же масса людей, которые учавствуют в проекте «парттайм», а доля будет такая же, как и у тех кто работал только над ним.

После недавней фразы Брина «мы ведем исследования небольшими группами по 200-300 человек», я уже ничему не удивляюсь.

Почти тысяча человек даже в самом минимальном случае!

Ребята из Google выпустили плагин Google Chrome Frame для Internet Explorer (поддерживаются IE6+), который позволяет переключать движок этого браузера со стандартного на WebKit. Если плагин установлен, то следующая конструкция в HTML-коде сайта переключит его отображение в режим WebKit:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Google обо всём побеспокоился, можно даже показать пользователю окно с просьбой установить Google Chrome Frame, если он ещё не установлен.

P.S. Говорил же Стив Балмер, что в Internet Explorer возможно будет WebKit! Никак пророчествовал? :)

P.P.S. Строка user-agent браузера меняется, даже если Chrome не включен: появляется слово «chromeframe».

P.P.P.S. Google Chrome Frame добавляет специальную схему «cf», например, этот сайт можно открыть плагином, если написать следующий адрес: «cf://bolknote.ru».

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