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

браузер

Какие ещё графические форматы поддерживает ваш браузер?

Переложил на хостинг «Гитхаба» свой проект семилетней давности — «Какие графические форматы поддерживает ваш браузер?». Я его иногда обновляю и мне было бы проще это делать через репозиторий.

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

Браузеры (сверху вниз): «Сафари» 13, «Файерфокс» 78 и «Опера» 69

Я подумал, что наверняка есть какой-то способ указать правильный тип в файле конфигурации сайта, но нет, так это не работает, такой настройки в нём нет. В принципе, известно откуда «Гитхаб» берёт свою базу типов содержимого — из проекта mime-db. Но этот путь тоже не сработал — я добавил туда тип для AVIF больше недели назад, но ничего не изменилось. Видимо синхронизация изменений происходит нечасто.

Пришлось идти другим путём — вместо того, чтобы загружать файл картинки, внедрил его внутрь при помощи протокола data:, это позволило обойти проблему. Можете протестировать на своём браузере.

Ссылка на проект: https://bolknote.github.io/detect-browser-graphics-formats/
Ссылка не репозиторий проекта: https://github.com/bolknote/detect-browser-graphics-formats

 4 комментария    344   2 мес   avif   datauri   gif   html   javascript   jpeg   pdf   png   браузер   программирование

Интернет-археология: браузер ViolaWWW

Неудачная попытка запуска (12.62КиБ)
Моя попытка запустить браузер под Линукс пока завершилась провалом

Пока читал про «Си-минус-минус», наткнулся на браузер ViolaWWW. Браузер разрабатывался с 1991 года в университете Беркли одним-единственным человеком — Вэй Пей-Юанем.

Эта вещь достойна внимания из-за примечательного факта — там реализованы таблицы стилей, за несколько лет до появления CSS, а так же первый скриптовый язык — задолго до «ДжаваСкрипта» и «Си-минус-минуса»! Причём с событиями и подобием аякса!

Автор написал несколько программ на своём языке, например — шахматы. Я пока не нашёл документацию, зато обнаружил несколько примеров. Например, скрипт выводящий синусоиду:

\class {field}
\name {wave}
\parent {}
\children {wave.sb}
\script {
    switch (arg[0]) {
    case "graph":
        f = float(arg[1]);
        xx = width();
        r  = height() / 2.0;
        theta = 0;
        for (x = 20; x < xx; x += 2) {
            theta = theta + 0.1;
            y = sin(theta * f) * r + r;
            drawLine(x, y, x, y + 1);
        }
        return;
    break;
    }
    usual();
}
\width {300}
\height {200}
\
\class {slider}
\name {wave.sb}
\parent {wave}
\script {
    switch (arg[0]) {
    case "_shownPositionV":
        usual();
        send(parent(), "graph", arg[1]);
        return;
    break;
    }
    usual();
}
\x {2}
\y {2}
\width {15}
\height {200}
\shownSizeV {10}

К сожалению, позапускать программы пока нечем. Исходный код я нашёл, но под Линуксом он компилироваться не захотел, собственно, судя по коду, он никогда под ним и не собирался. Я сделал минимально необходимые правки, код собрался, но попытка запуска завершилась крахом. Подумаю стоит ли тратить силы дальше.

Даже интересно какой бы веб мы увидели сейчас, если бы этот браузер тогда получил дальнейшее распространение! Получается в 90-х он умел больше, чем некоторые браузеры в двухтысячных. Например в скриптовом языке я заметил селекторы nthChild и даже nthWord!

Насколько я могу видеть, поддерживалось более десятка форматов графики, в том числе всем знакомый GIF, правда без анимации и в формате 1987 года, а так же сейчас уже экзотический XBM (до относительно недавнего времени поддерживался «Эксплорером», «Сафари» и «Оперой»).

 4 комментария    40   2017   браузер   программирование

Короткий способ определить есть ли поддержка dataURI

Придумал короткий способ определить поддержку data URI в браузере:

<script src="data:text/javascript,self.dataURI=1"></script>

Потом просто проверяете у window свойство dataURI, если оно есть, то есть и поддержка. Способ не работает в IE8 и IE9 — тот и другой не умеют загружать Джаваскрипт этим образом. Собственно, меня это не волнует — мне как раз и нужно определить, что Джаваскрипт так работает, но если вам нужно не это, то должен работать вот такой способ:

<link rel="stylesheet" href="data:text/css,html{font-size:99px}">

То есть устанавливаем у тега HTML какое-нибудь свойство, которое потом в BODY перекроем, а позже, чтобы убедиться, что поддержка дата-ури есть, смоторим что вышло (тут я при помощи jQuery это делаю):

/99/.test($('html').css('font')); // true, если есть поддержка dataURI

Use SVG

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

Одним из главных помощников в такой вёрстке является, без сомнения, формаг СВГ — формат векторной графики, который на данный момент поддерживают все распространённые браузеры (включая ИЕ, с девятой версии). Особенно приятно, что его можно включать прямо внутрь ХТМЛя, это очень удобно — если СВГ используется для кучи мелких значков на странице, то не будет лишних соединений с сервером — ведь всё грузится вместе с основным кодом.

Но встаёт другая проблема — проблема повторного использования. Если одни и те же значки присутствуют на странице в изобилии, страница будет распухать, что печально.

К счастью, есть выход. СВГ — гибкая штука, в этом формате есть возможность использования частей изображения повторно. Первым шагом нужно определить тег-контейнер с необходимыми нам изображениями, по одному в теге symbol. У каждого из них будет собственный идентификатор, по которому мы ниже будем на них ссылаться:

<svg style="display:none">
    <symbol id="folder" viewBox="0 0 49.833 67.167">
        <!-- код не рабочий, только для примера -->
        <path d="M15.938,67.…"/>
        <path d="M3.59,30.531c…"/>
    </symbol>
    <symbol id="file" viewBox="0 0 49.833 67.167">
        <path d="M12.233c0.…"/>
        <path d="M3.28C2.76…"/>
    </symbol>
</svg>

Тут у нас два изображения — folder и file, на которые мы можем сослаться следующим образом:

<svg width="28" height="37">
    <use xlink:href="#folder"/>
</svg>

<svg width="28" height="37">
    <use xlink:href="#file"/>
</svg>

Таких вставок может быть сколько угодно и все они будут использовать одни и те же изображения, описанные в теге-контейнере. Остаётся даже возможность лёгкой настройки под себя, например, можно задать парочку классов и раскрасить часть изображения в разные цвета:

svg.green {
    fill: green;
}

svg.red {
    fill: red;
}

Классы можно повесить на ссылающиеся теги СВГ, жаль только этот способ полон ограничений. Кроме как в ФФ более избирательные селекторы использовать не удаётся — всё, что ниже тега use для таблицы стилей как будто не существует. Если и есть какой-то способ это починить, я его не нашёл.

 5 комментариев    87   2014   css   svg   браузер   программирование

IE9 и таблицы

IE9 и таблица (18.31КиБ)

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

Наткнулись на странную проблему в этой версии Эксплорера — некоторые таблицы выглядят как на снимке выше — ячейки в строках иногда выпирают вправо безо всякой видимой причины.

Дело оказалось в пробелах между ячейками — верстальщик отформатировал шаблон, чтобы он лучше читался, и все браузеры всё показали правильно, один девятый Эксплорер сошёл с ума. Лечится проблема запросто — либо убираем форматирование в шаблоне, либо убираем его прямо в браузере.

Я выбрал второй путь. Пусть лучше шаблон выглядит читаемо, а костыль для девятого Эксплорера всегда можно будет убрать лёгким движением руки. Выглядит он вот так, кстати (используется jQuery, само собой):

$("table tr").contents().filter(function() {
    return this.nodeType == 3;
}).remove();
 16 комментариев    13   2014   css   html   ie   браузер   программирование

ICC-профили в GIF

Формат ГИФ почему-то окружён каким-то нереальным количеством мифов, хотя до недавнего времени он был очень популярен, а для анимации до сих пор остаётся единственным универсальным форматом.

Например, считается, что анимация появилась только в версии 89a (неправда, она была уже в версии 87a, в 89а её возможности были расширены), что ГИФ может использовать не более 256 цветов (не совсем так — не более 256 цветов на кадр, кадры могут накладываться друг на друга, давая любое отображаемое компьютером количество цветов).

Другое распространённое заблуждение — что ГИФ не поддерживает цветовые профили (ICC).

В самом деле, если посмотреть спецификацию формата, то слово «ICC» там не найдётся, но не найдётся там и слова «loop» (здесь: количество повторов), тем не менее, вы видели анимации, где указано определённое количество повторений и браузеры как-то это понимают.

Дело в том, что формат ГИФ поддерживает расширения. Расширения в спецификацию формата не входят.

Упомянутое количество повторов анимации задаётся в расширении, которое было когда-то предложено фирмой «Нетскейп» и потому имеет заголовок «NETSCAPE2.0», у расширения, которое содержит цветовой профиль заголовок другой — «ICCRGBG1012». ГИФ всегда разбит на блоки, и блок расширения (любого) помечен специальным флагом; заголовок расширения позволяет просмотрщику (в нашем случае — браузеру) решить с каким из расширений формата он имеет дело.

Вот начало файла ГИФ с внедрённым профилем:

00000000 47 49 46 38 39 61 01 00 01 00 f0 00 00 fe 00 02 |GIF89a..........|
00000010 00 00 00 21 f9 04 00 00 00 00 00 21 ff 0b 49 43 |...!.......!..IC|
00000020 43 52 47 42 47 31 30 31 32 ff 00 00 03 f0 55 43 |CRGBG1012.....UC|
00000030 43 4d 02 40 00 00 6d 6e 74 72 52 47 42 20 58 59 |CM.@..mntrRGB XY|

Пока не все браузеры умеют поддерживать цветовые профили ГИФ (как и профили любого другого формата), так ФФ не научился делать это до сих пор, а «Опера» научится это делать в новой версии 12.50.

Проверить поддерживает ли браузер цветовые профили можно и через Джаваскрипт. Принцип такой: я загружаю ГИФ-изображение 1×1 с цветовым профилем в тег CANVAS, потом проверяю цвет точки, он должен быть определённого цвета. Проверить поддерживает ли ваш браузер цветовой профиль четвёртой версии ГИФ можно у меня на сайте, в разделе «Храню».

Opera 12 CSS hack

Вышла «Опера» 12, многое поменялось, на некоторых моих сайтах едут стили. В частности, на «Маке» «Опера» поменяла поведение стиля «font-size: 0» — теперь он отображается шрифтом какого-то минимального размера.

Пришлось придумывать ЦСС-хак для этой версии. Я не могу себе позволить искать новое решение и заново тестировать его во всех браузерах, мне проще оставить всё как есть, сделав исключение.

Хак получился вот такой:

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, body { /* стиль только для Opera 12.00+ */
        background: red;
    };
}

Соответственно, на место «body» надо поставить требуемый тег или селектор.

 36 комментариев    65   2012   css   opera   браузер   программирование

Warez. WinAmp3a2, Opera 5.02, WinRAR 2.8b4

WinAMP3alpha2. Внешний вид

Хе-хе… Оказывается фирме, выпускающей WinAMP, надоело выпускать версии с двойкой. Ничего никому не сказав, они начали, в тайне от всех, разрабатывать WinAMP версии три. На скриншоте, честно передранном с сайта «Правый щелчок», вы можете видеть альфа-2-версию этого монстра. Судя по обилию «шашочек» на пресловутом скриншоте, нас ждет скачкообразное увеличение дистрибутива еще на порядок. Вот сейчас сижу и думаю — а оно мне надо?

P.S. Подробности — на сайте «Правый щелчок».

Пока Фар-тим всей огромной командой выпускает раз в полгода по бете, великий Евгений Рошаль, в одиночку, неустанно выпускает вот уже четвертую бету своего WinRAR’a. Пофиксены пара проблем в SFX-модуле, исправлена пара-тройка багов. Ничего особенного, но, если вы, как и я, пользуетесь бета-версиями — качайте.

Птичка. Эмблема Парсера

Сайт «Парсера» студии Лебедева растет и пухнет. Парсер обзавелся довольно симпатичной эмблемой, со времени моего последнего появления появились разделы «FAQ», «жаргон», «в действии» и «куда говорить». Вообще-то развитие сайта закономерно, даже если на него снаружи никто не будет ходить. Почему? Парсер активно используется студией и на этот сайт, в случае затруднений, можно отправлять своих собственных сотрудников. Это что-то вроде красиво оформленной документации, выложенной на всеобщее обозрение.

Вообще, я думаю, любая более или менее крупная фирма, занимающаяся разработкой Веб-сайтов, рано или поздно обзаводится сайтом или местом, где свалена в кучу или красиво разложена по полочкам какая-то документация, необходимая для повседневной работы сотрудников. У нас, например, там лежит документация по Perl, PHP, JavaScript, HTML, mSQL, MySQL, PostgreSQL, ну и так далее. Если у вас ничего подобного нет — очень советую завести.

Фирма Opera буквально на днях порадовала нас выходом новой подверсии своего одноименного браузера. В списке «WhatsNew» 5.02 в основном «шашечки»: изменения в мыль-клиенте, Instant Messaging, File Transfer и прочее. Список довольно обширный, но изменения мелкие. Из «ехать» имеются: оптимизация использования памяти, обновления в opera.jar и модели безопасности JavaScript. Как сказано в конце этого документа, «имеется куча обновлений, исправлений и добавлений слишком мелких для упоминания». Я скачаю.

 Нет комментариев    10   2001   opera   браузер

Наши браузеры. Какие они?

Пару дней назад мне пришлось поспорить с одним человеком по поводу того, какие браузеры существуют и что они из себя представляют. Похоже, разветвление проекта Netscape сразу на три направления, внесло некоторую путаницу в головы веб-мастеров. И мне бы хотелось это положение исправить. Я хочу рассмотреть здесь всех серьезных игроков на (если можно так сказать) рынке браузеров и дать им краткие характеристики.

Internet Explorer

Explorer. Внешний вид

Начну я со своего любимого браузера — детища фирмы Microsoft. Internet Explorer (текущая версия — 5.5SP1) — пожалуй самый навороченный браузер из всех нижеописанных. Выпускается под Windows, Mac, я так же слышал о версиях под Unix.

Из стандартов поддерживает: HTML 4.0, со своими расширениями; CSS 1, (почти полностью) CSS 2, плюс специальные эффекты — фильтры; DirectAnimation; VML (векторный язык); VRML; JScript (как составляющую — JavaScript и ECMAScript); W3C DOM; VBScript; XML; ActiveX; Java; динамическое связывание в HTML; behaviors и многое другое.

В данный момент — это самый популярный браузер в российском Интернете, его доля составляет около 70%—80%, по данным SpyLog. Что, в общем-то, неудивительно — с момента появления версии 4.0 и до определенного времени серьезных конкурентов у него не было. Обладает огромным набором очень ценных для Веб-мастера возможностей, которые, к сожалению, не поддерживаются другими браузерами, так что используются они, в основном, в интранете.

Netscape 4

Netscape. Внешний вид

Точнее Netscape 4. Выпускается одноименной компанией, текущая версия — 4.75. В прошлом — основной конкурент Explorer, ныне — отмирающая тупиковая ветвь. Совокупная с Netscape 6 доля, по данным SpyLog, — примерно 9—19%. Выпускается под Windows, Unix и Mac.

Сейчас уже практически не развивается, хотя время от времени появляются новые версии с незначительными или некому не нужными (типа добавления к пакету WinAmp) изменениями. Поддерживает HTML 3.2, со своими расширениями; частично CSS1 и CSS2; Java; VRML; JavaScript (в его рамках — EMCAScript). Браузер расширяется в основном за счет так называемых «плагинов» — модулей расширений от сторонних производителей. Был любим среди пользователей Unix, как практически единственный графический браузер в этой среде.

Кстати, о версии HTML. HTML 4.0 не поддерживается этим браузером. Достаточно взглянуть на стандарт от W3C, что бы это понять.

Netscape 6

Netscape6. Внешний вид.

Надежда всех любителей браузеров от Netscape. Время показало, что ожидания оказались напрасными. Релиз оказался на удивление сырым и с массой глюков.

Ничего о нем сказать не могу, поскольку, с момента появления этого самого релиза, более я им не интересуюсь. Проект развивается настолько вяло, что, думаю, все, включая разработчиков, махнули на него рукой.

Отличительная его особенность — браузер позволяет менять свой внешний вид, т. е. устанавливать так называемые скины. Эта способность, как и новой Мозилле, досталась ему от Netscape 5, так называемом Gecko, который в чистом виде в уже природе не встречается.

Mozilla

Mozilla. Внешний вид

Текущая версия — 0.7. По внешнему виду — брат-близнец Netscape 6, поскольку отпочковался от одной из ранних версий Netscape 5. Нет, это не тот самый Mozilla, на коде которого основаны Explorer и Netscape 4, это совсем другой браузер. Выпускается под Windows, Unix, Mac, планируется портирование под BeOS, Rhapsody и OS/2.

О его доле я сказать ничего не могу, но проект, в последнее время (а ему уже 3 года), стал очень динамично развиваться и стремительно завоевывать сердца и мониторы пользователей Unix. Эта хорошая альтернатива, для противников продуктов от Microsoft, морально устаревшему Netscape 4. Насколько я знаю, поддерживает HTML 4.0, CSS 1, частично CSS 2, EMCAScript, W3C DOM, частично DOM II, XML, Java, есть экспериментальная поддержка ActiveX.

Lynx

Lynx. Внешний вид.

Этот браузер в данном ряду необычен тем, что он полностью текстовый. Текущая версия — 2.8.3. Выпускается под Unix, Windows, VMS, DOS, OS/2 и Mac. Процент его использования невелик — порядка одной десятой процента, используется, в основном, под текстовой консолью Unix и распространяется вместе операционными системами этого типа, чем и жив.

Поддерживает HTML в рамках разумного. Т. е. практически все, что можно реализовать в текстовом режиме, в нем реализовано. Поддержки CSS, скриптовых языков и XML нет. Зато, в силу невеликих возможностей браузера, за все время существования была найдена только одна дыра в безопасности. :) Вот и все, что можно о нем сказать.

Opera

Opera. Внешний вид

Очень хороший браузер. Быстрый, относительно легкий. Урезанный дистрибутив умещается на одной дискете. Текущая версия для Windows — 5.02. Выпускается для платформ Windows, EPOC, Unix, Mac и BeOS.

Его доля близка к одному проценту, браузер еще относительно молодой. Жаль, только его создатели так увлеклись накручиванием «шашечек». Но, не смотря на это, Opera — потенциально, довольно серьезный конкурент MSIE и Mozilla.

Из возможностей — поддержка HTML 4.01 с собственными расширениями, CSS 1,2 (по-моему наиболее полная), плагинов от Netscape, Java, EMCAScript, XML, частично — DOM. Что интересно — поддерживается WAP (WML). Отличительная особенность — высокая скорость отрисовки и получения контента.

***

P.S. Я не включил в обзор экспериментальные браузеры (например Arena) и браузеры, не получившие широкого распространения. Их время еще не пришло или не придет никогда. В любом случае, пока серьезно я их не воспринимаю. Докажите мне, что я ошибаюсь и я охотно помещу здесь описание любого из них. :)

P.P.S. Спасибо моему другу, Сергею Шишкину, за время, потраченное на попытки сделать скриншот с Mozilla. К сожалению, я так и не смог его забрать.

 Нет комментариев    12   2001   браузер