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

firefox

Позднее Ctrl + ↑

Попытка пересесть на Firefox. 2:0 в пользу «Оперы»

Посмотрел Firefox 3.6 beta 2, что сподвигло меня на очередную попытку пересесть на этот браузер с «Оперы»: скорость работы уже приблизилась к комфортной. Пересесть на Firefox хочется, прежде всего, из-за Firebug. Dragonfly в «Опере» — чудовищное глючное поделие, пользоваться которым некомфортно. Это совсем не похоже на ПО компании «Опера».

Неделю попользовался Firefox, не осилил. Нехватает тысячи мелочей, некоторые из которых не правятся плагинами. Например, почему при нажатии кнопки «Назад» в браузере, Firefox не показывает документ в том месте, где я остановил чтение? Мне что, на каждый чих закладку открывать?

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

Придётся, как и раньше, жить в двух программах. Это, кстати, моя вторая попытка переползти на Firefox.

2009   firefox   opera

HTML5: события offline и online

На сайте JavaScript.ru появилась статья о новых событиях в JavaScript — offline и online (реализованы в Firefox 3.5 и Internet Explorer 8.0). Цитирую выводы:

Эти события никак не связаны с подключением к сети интернет и к сайту.

Они триггерятся при переходе по клику пользователя в автономный режим и обратно.

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

Firefox глючит, в отличие от IE

Canvas в разных браузерах

Сегодня с утра, порадовавшись выходу Mozilla Firefox 3.5beta4, решил погонять её на JS-эмуляторе «Спектрума», о котором я упоминал. По скорости выходит где-то на уровне или впереди Safari4beta.

Canvas (3.77КиБ)

Плохо то, что Firefox, как оказывается, сильно размывает Canvas. Когда я играл на эмуляторе в одну из игр, мне казалось, что у меня что-то со зрением — до того размытая картинка. На скриншоте видно (слева направо): Opera 10 alpha 1456, Safari 3.2.2, Firefox 3.5beta4.

Получаем ещё один «стандарт», который ведёт себя во всех браузерах по-разному. Приехали.

Ogg и тег VIDEO, ActiveX Canvas для IE

Так-так, вот и FireFox 3.1, вслед за «Оперой» начинает поддерживать тег VIDEO и стандарт Ogg Theora для этого видео. Если так дело дальше пойдёт, то Ogg станет форматом для тега VIDEO де факто.

Из других интересных новостей — Vladimir Vukićević разработал ActiveX для IE, который повторяет функциональность этого тега пока только частично, но работа продолжается. Тот же автор обещает в будущем поддержку тегов video и audio, тоже, видимо, в формате ActiveX.

2008   canvas   firefox   html5   ie   программирование

Скруглённые углы на чистом CSS для Opera 9.5, FF 1.5, IE 5, Konqueror и Safari3

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

2008   css   css3   firefox   ie   opera   safari   программирование

Селекторы в Mozillaw

Движок Gecko содержит массу интересных селекторов. Вот несколько интересных селекторов, о которых мало кто знает:

For what it’s worth, development versions of Gecko have:

:-moz-broken (which would cover your :missing and :corrupt, which are not  exactly easy to tell apart). :-moz-user-disabled (user has turned off all images) :-moz-suppressed (images from the server involved are blocked) :-moz-loading :-moz-type-unsupported (for <object>s)

2008   css   firefox   программирование

Ещё ошибки в FireFox3

Может быть это у меня как-то с FireFox3 не складывается. Попробуйте у себя. Что показывается ваш FF по адресам «about:about» и «about:neterror»?

У меня на первый адрес сообщается, что «Firefox не может найти файл jar:file:///C:/Program Files/Mozilla Firefox/chrome/toolkit.jar!/content/global/aboutAbout.html.», на второй что «Firefox не может загрузить эту страницу по неопределённой причине».

Кстати, бонус, откройте: «about:neterror?d=%D0%A1%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B5» у меня открывает полупустую страницу, где написано «Или же вы можете добавить исключение» с кнопкой «Попробовать снова».

2008   firefox

CSS3 и FireFox3, IE — «копейка» среди браузеров

FireFox3 хорошеет на глазах. Не знаю насколько он хорош как средство для сёрфинга (выйдет — обязательно скачаю и посмотрю), но как браузер он, безусловно, становится всё лучше. На днях FireFox 3.1 стал проходить тесты селекторов CSS3. Хорошие новости, теперь все три основных браузера — Opera, Safari и FireFox поддерживают CSS3.

Как вы думаете, на фоне Mini Cooper «копейка» является автомобилем? С этого дня я называю «Оперу», FireFox и «Сафари» «основными браузерами», поскольку именно они и являются браузерами, а IE — «альтернативным», поскольку это политкорректное название для «куска говна с окошками», да и понимание новых стандартов у него «альтернативное». При этом я не умаляю заслуг специалистов из компании Microsoft, создавших IE6 — шедевр для тех лет, и положивших начало многим современным стандартам. Спасибо, ребята, надеюсь IE9 будет достоин тех же похвал.

2008   css   css3   firefox   firefox3   программирование

Фильтрация CSS по браузеру

Я как-то уже писал о том как подключить целый блок CSS только для FireFox, но чаще нужно подключить не блок, а всего один-два стиля. В этом случае удобно воспользоваться тем фактом, что браузер обязан игнорировать стиль, если в селекторе встречается что-то незнакомое.

Способ для FireFox мне подсказали в комментариях на «Хабре», для Internet Explorer я придумал его самостоятельно. Вот пример, иллюстрирующий идею:

.class { color: black } /* для всех остальных браузеров */
.class, noindex:-moz-any-link { color: blue } /* стиль только для Mozilla FireFox */
.class, v\:* { color: red } /* стиль только для Internet Explorer */

Можете попробовать самостоятельно — фильтрует идеально. В примере класс «class» даст тегу, к которому его применят, в FireFox — голубой цвет текста, в IE — красный, а в остальных браузерах — чёрный.

2008   css   firefox   ie   программирование

Dictatorship IE vs. Open Source Dictatorship

Удивительная избирательная слепота у людей. На «Хабре» опубликовали статью «Новые возможности HTML и CSS в Safari 3.1», где народ восторженно обсуждает возможности, появившиеся в браузере «Сафари». Этим возможностями сто лет в обед — те же яйца, только боком уже давным-давно реализованы в Internet Explorer, причём в версиях 4.xx—5.5.

Это вообще какое-то чудо — все стандарты от Internet Explorer называются «мировым злом» (например, «фильтры»), а стандарты от других производителей — охренительными фичами (вроде тех же «transforms» или CANVAS от Apple). При этом последние шесть лет целая куча функционала была скомуниҗҗена с IE, а сколько там ещё можно утащить (самый известный пример, конечно же, HttpRequest, который придумали в Microsoft и на котором работает AJAX)!

Я составил небольшую таблицу соответствий технологий IE и их реализаций в других браузерах:

Internet Explorer

Остальные браузеры

HTML+TIME

Safari CSS transforms

Persisting Session Information

HTML5 Client-side Database Storage

Font Embedding

CSS3 Web Fonts

VML

SVG

Filters

CSS свойство «opacity»

Filters

CSS свойство «text-shadow»

VML

Тег CANVAS

Свойство «writing-mode»

CSS свойство «writing-mode»

Microsoft IXMLHTTPRequest

W3C XMLHttpRequest

Filters

WebKit gradient

Таблицу можно продолжать. Учтите, что всё, что перечислено в ней слева, появилось ещё шесть лет назад.

Мне интересно, кто первым реализует «data binding» из IE, при помощи этой технологии я написал «Песню о пиве» на HTML.

2008   firefox   ie   opera   safari   программирование
Ранее Ctrl + ↓