Эмуляция свойства автофокус для старых браузеров


Содержание

Поддержка и эмуляция HTML5 в старых браузерах IE

Я обнаружил, что excanvas и flashcanvas — это общие библиотеки, используемые для поддержки функций холста в Internet Explorer (ниже 9). Но оба из них не реализовали все технические характеристики холста.

Например, функция drawImage() принимает только изображение в качестве источника. Он не поддерживает ни холст, ни видео. Также нет реализации для getImageData(), putImageData()

Что является лучшей и правильной библиотекой JavaScript для поддержки возможностей холста в браузерах IE? У нас есть какая-либо другая библиотека для IE, которая точно имитирует собственные свойства холста?

Поддержка FlashCanvas Pro getImageData() и putImageData() : http://flashcanvas.net/docs/canvas-api

но я предлагаю вам не пытаться использовать холст, т.е.

Невозможно получить полную поддержку холста для старых браузеров IE (IE6 — IE8)

Производительность Javascript не достаточно хороша для эмуляции всех собственных операций

Внешние плагины, такие как Flash, ограничены тем, как они могут взаимодействовать с элементами страницы, такими как или другие

Google Chrome Frame обеспечивает единый клик, не требуется никаких привилегий администратора, плагин, который заставит старших интернет-исследователей использовать механизм рендеринга Google Chrome, когда запрос на страницу будет таким. Он будет внутренне обозревать Chrome Internet Explorer, и пользователь не видит разницы. Недостатком является установка и время загрузки одного клика.

Не поддерживайте старые браузеры

Не используйте если вам нужно поддерживать старые браузеры

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

Эмуляция функциональности «плейсхолдеров» — адаптация кода под старые браузеры

Нужна ваша помощь. Написал плагин, эмулирующий функциональность placeholders HTML 5. Не для того, конечно же, чтобы переопределять нативные, а для имплементации данной функциональности в старые браузеры и прежде всего, конечно, Internet Explorer (интересует в том числе поддержка в IE 8). При написании постарался учесть, насколько мог, особенности IE, однако проверка показала, что в IE 8 плагин фактически неработоспособен, при этом в консоли чисто и в других бразурах (современных версий) все работает.

Просьба помочь кто-чем может (советами, кодом, конкретными отсылами в интернет) в адаптации моего кода для старых браузеров (IE 8 в том числе). Спасибо.

Verstaka.net

Блог фронтендера

Опубликовано 25 июня 2012

Коллекция багов и решений для IE

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

Для тестирования проектов в IE7-9 можно использовать 10-ую версию в режиме эмуляции — так удастся выловить большинство ошибок. Однако если нужно тестировать в IE6, придется использовать виртуальную машину с Windows XP, в которой установлен данный браузер. Из бесплатных вариантов могу порекомендовать виртуалку VirtualBox . В качестве альтернативы, но несомненно менее лучший вариант, можно рассмотреть IE Tester .

Содержание статьи

Тестирование верстки

Сами понимаете, что браузер от Microsoft отдельный случай — в нем приходится тестировать проекты, начиная с 7-ой версии по 10-ую, и иногда, как я рад вписать это слово, с 6-ой. Для этого удобно использовать последнюю версию браузера в режиме эмуляции, выбрав необходимую версию. Зайдем в средства разработчика (прим. — F12) и выберем режим браузера:

Режимы браузера IE

Этого хватит для исправления 95% процентов багов, например в режиме эмуляции вы не увидите ошибок в JS-коде, свойственных оригинальным браузерам. Для остальных 5% случаев или в случае тестирования в 6-ой версии придется воспользоваться другими вариантами:

  • использование виртуальной машины с Windows XP и установленным оригинальным Internet Explorer 6
  • использование IETester . Программа позволяет одновременно проверять свой проект в IE6-10. Однако иногда в ее работе возможны ошибки — результат в окне может выглядеть криво, а на деле все нормально. Подойдет как альтернативный вариант
  • portable-версии браузеров, отличная подборка здесь , однако недостаток тот же, что и в IETester’е — бывает неверным отображение верстки, хотя в оригинале все может работать корректно
  • существуют онлайн-сервисы, которые позволяют проверить проект в целой кучи браузеров посредством снятия скриншота. Один из таких сервисов browsershots.org

Стоит отметить, что тестировать верстку в оригинальном браузере лучше всего. И не забываем, что правила для IE подключаем через отдельный файл.

IE , , и другие, и показывает их так, будто им назначен display: inline . Решить проблему обычным присвоением display: block для новых элементов не получится, хотя это необходимо для других браузеров, не поддерживающих новые теги (кстати входит в reset.css и normalize.css). Чтобы исправить это небольшое недоразумение, через Сonditional comments перед новыми тегами подключим небольшой скрипт html5shiv Реми Шарпа.

Практически все разработчики включают поддержку HTML5 тегов этим способом, так что есть большая вероятность того, что при посещении вашего ресурса скрипт уже будет в кэше браузера.

Существуют и альтернативные варианты подключения html5shiv — например через библиотеку Modernizr.

Поддержка свойств CSS3 border-radius, box-shadow и linear-gradient

Как известно Internet Explorer ниже 9-ой версии не поддерживает новые CSS3 свойства, которые хочется использовать уже здесь и сейчас. Конечно самый лучший принцип — придерживаться правила graceful degradation для старых браузеров, т.е. оставлять доступным содержание сайта при его менее приглядном виде. Но все-таки некоторые свойства можно имитировать. Для этого нам пригодится скрипт PIE (Progressive Internet Explorer), с помощью которого мы можем имитировать border-radius , box-shadow и linear-gradient через VML-объект.

Из архива с плагином необходимо вытащить файл PIE.htc , залить его в проект и в стилях для Internet Explorer свойством behavior указать путь к этому файлу.

Однако не все так здорово, как кажется — у PIE есть два серьезных недостатка: первый — при множестве PIE-подключений на странице он значительно тормозит браузер, второй — при масштабировании окна браузера могут наблюдаться артефакты изображений. Поэтому каждый должен решить для себя — использовать его или нет, и соответственно дальше делать скругления, градиенты и тени для IE картинками, или следовать парадигме graceful degradation.

Поддержка media queries

Internet Explorer ниже 9-ой версии не поддерживает media queries, чтобы исправить это, подключим скрипт от Google:

Canvas для IE — explorercanvas

Вместе с приходом HTML5 пришла возможность рисовать прямо в браузере, делается это с помощью нового элемента . Разумеется старые браузеры IE не поддерживают этот элемент, но можно воспользоваться расширением explorercanvas от Google, который позволяет эмулировать некоторые основные возможности холста через VML. Подключение скрипта через Conditional comments:

Фон на всю ширину окна браузера

В CSS3 появилось чудесное свойство background-size для того чтобы можно было растянуть фон на всю ширину окна:

Для старых браузеров IE это свойство не работает, применим другой прием — вставим изображение тегом перед закрывающим

Как использовать функцию эмуляции устрйств браузера Google Chrome

Октябрь 28, 2015

Из этого туториала Вы узнаете, как использовать функцию эмуляции устройств браузера Google Chrome (Google Chrome Device Emulation). Эта функция поможет вам протестировать адаптивный дизайн вашего сайта путём имитации разных размеров и разрешений экрана.

Для того чтобы активировать Режим устройства

Откройте ваш сайт, используя браузер Google Chrome.

Нажмите на кнопку F12, для того чтобы получить доступ к Инструментам разработчика Chrome (Chrome DevTools).

Включите режим устройства, нажав на значок Переключение в режим устройства (Toggle device mode). Когда режим устройства включен, значок становится синим (blue) и режим отображения переключается на эмуляцию устройства:

Вы можете также включить/отключить (on/off) этот режим, используя сочетание клавиш:

Ctrl+Shift+M (или Cmd+Shift+M на Mac).

Использование Эмуляции экрана:

Эмуляция экрана поможет Вам проверить адаптивность (test the responsiveness ) вашего сайта. Вы найдёте множество заранее установленных режимов эмуляции.


Выберите модель (Select a model) из выпадающего списка заранее установленных режимов, для того чтобы эмулировать определённое устройство:

Каждый заранее установленный режим автоматически настраивает параметры эмуляции (такие как разрешение экрана устройства (device resolution ) и Пиксельное соотношение (pixel ratio), а также включает эмуляцию сэнсорного экрана (touch emulation) и т. д.).

Переключайтесь между книжным (portrait) и альбомным (landscape) видом, нажав значок «Изменить размеры». Выберите кнопку «Соответствовать размеру экрана», для того чтобы убедиться, что экран устройства, которое эмулируется, остается полностью видимым внутри окна браузера:

Для того чтобы эмулировать пользовательский размер экрана (custom screen size), задайте разрешение экрана устройства в пикселях в полях ширина (width) и высота (height):

Для того чтобы работать с медиа-запросами:

Благодаря Режиму устройства легко исследовать действие медиа-запросов.

Для того чтобы включить инструмент работы с медиа-запросами, нажмите на значок ‘Медиа-запросы’ ( Media queries) в верхнем левом углу окна. Инструменты разработчика (DevTools) найдут медиа-запросы в вашем файле стилей и отобразят их как цветные полосы в верхней части окна:

Медиа-запросам соответствуют такие цвета:

Синий: Запросы для максимальной ширины экрана;

Зелёный: Запросы для определённого диапазона значений ширины экрана;

Оранжевый: Запросы для минимальной ширины экрана.

Для того чтобы предварительно просмотреть стили для определённого разрешения экрана (preview screen styles), нажмите на панель медиа-запросов ( media query bar), для того чтобы настроить разрешение окна эмулятора и предварительно просмотреть стили (preview styles) для нужного диапазона размеров экрана:

Нажмите правой кнопкой мышки на панель, для того чтобы найти, в каком месте дается определение медиа-запроса (view where the media query is defined) в CSS и перейти к этому определению (jump to the definition) в исходном коде:

Для того чтобы отключить (turn off) эмуляцию мобильных устройств, не покидая Режим устройства, нажмите на значок ‘Сбросить все переопределения’ (Reset all overrides) и обновите страницу:

Вы можете даже изменить Операционную систему (Operation System) мобильного устройства.

Откройте панель Инструментов разработчика, нажав на значок ‘Больше переопределений’ (More overrides) в правом верхнем углу окна браузера. Затем, выберите ‘Сеть’ (Network) в окне, которое откроется:

Мы надеемся что этот туториал был Вам полезен. Вы можете также ознакомиться с детальным видео-туториалом ниже.

Эмуляция свойства автофокус для старых браузеров

С помощью средства эмуляции можно проверять, как веб-страницы будут работать с разными режимами документов, агентами пользователя, размерами и разрешениями экрана, а также координатами расположения GPS.

Своевременное и частое тестирование

Проектирование и разработка для современного Интернета подразумевают создание веб-страниц, которые будут работать на множестве различных устройств и платформ. Средство эмуляции в средствах разработчика F12 позволяет эмулировать различные среды, в которых можно просмотреть веб-страницы. Благодаря этому средству легче выполнять поиск и отладку ошибок на ранней стадии цикла разработки.

Средство состоит из трех разделов: «Режим», «Экран» и «Географическое положение».

  • Режим: проверка режима документов, профили классического браузера и браузера в Windows Phone, а также использование эмуляции строки агента пользователя для выполнения отладки ошибок, вызванных пробной проверкой браузера.
  • Экран: эмуляция разных размеров и разрешений экрана для проверки отображения веб-страниц.
  • Географическое положение: имитация GPS-приемника и ввод координат GPS для проверки компонентов, связанных с определением расположения, на веб-странице.

Новые возможности в Накопительном пакете обновления для Internet Explorer (KB2976627): каждый раз, когда установленное по умолчанию значение какого-либо параметра изменяется, поверх значка Средство эмуляции на боковой панели F12 отображается значок информационного оповещения, который сообщает об эмуляции поведения некоторой части браузера.

Режим

Режим документов

Средства разработчика F12 в Internet Explorer 11 упростили сложную матрицу браузера и режимов документов, которая использовалась в более ранних версиях, сократив ее до одного элемента: режим документов.

Доступны шесть параметров. Edge (по умолчанию) представляет все последние стандарты и компоненты, поддерживаемые в IE11. Оставшиеся пять параметров представляют Internet Explorer версий 5 (также называемой версией с режимом совместимости), 7, 8, 9 и 10. При выборе отличной от IE11 версии браузер IE11 отображает веб-страницы так, как если бы вы открывали их в данной версии браузера. Он даже меняет строку агента пользователя по умолчанию, отправляемую браузером. Вы можете вручную настроить другую строку с помощью меню Строка агента пользователя в разделе Режим.

Стоит отметить, что режим документов является эмуляцией браузеров более старых версий. Он может быть очень полезен, но если вам требуется точный попиксельный макет или если вы хотите быть уверенными, что страницы отображаются и работают определенным образом в более старых версиях IE, рекомендуется перейти на сайт Modern.ie и скачать виртуальные машины с более старыми версиями IE. Виртуальные машины работают со средами виртуализации для Windows, Mac и Linux, и вы сможете получить самые точные и надежные платформы для тестирования и отладки в более старых версиях IE и Windows.

В Windows 8.1 с обновлением, когда режим документов меняется со стандартного, будет показана причина изменения. Краткий список причин с пояснениями.

  • С помощью панели инструментов разработчика F12: вы изменили режим документов с помощью раскрывающегося списка Режим документов.
  • С помощью метатега X-UA-Сompatible: разработчик веб-страницы использовал метатег, чтобы задать режим документов прежних версий.
  • С помощью заголовка HTTP X-UA-Compatible: веб-сервер запросил режим документов прежних версий через заголовок HTTP.
  • С помощью локальных параметров просмотра в режиме совместимости: сайт был вручную добавлен в разделе Параметры просмотра в режиме совместимости.
  • С помощью списка просмотра в режиме совместимости: сайт находится в списке просмотра в режиме совместимости корпорации Майкрософт.
  • С помощью параметров совместимости для интрасети: установлен флажок «Отображать сайты интрасети в режиме совместимости» в разделе Параметры просмотра в режиме совместимости.

Новые возможности в Накопительном пакете обновления для Internet Explorer (KB2976627): режим документов доступен в виде раскрывающегося меню во всех средствах.

Если веб-страница не отображается в режиме документа как ожидалось, вы удалили все изменения из Средства эмуляции и ни одна из причин, связанных с режимом документов, из списка выше не отображается, возможно, ИТ-отделом вашего предприятия был назначен другой режим документов. См. сведения о Режиме предприятия ниже.

Профиль браузера

Если вы хотите проверить, как веб-страницы работают на устройстве Windows Phone 8, выбрав профиль браузера, вы сможете изменить множество настроек для простой и быстрой эмуляции устройства Windows Phone 8 и так же просто вернуться к профилю классического браузера по умолчанию.

В Windows 8.1 с обновлением добавлен вариант Предприятие для профиля браузера. Этот вариант будет отображаться только для пользователей корпоративных версий Windows 8.1 с обновлением и только при посещении веб-страниц, указанных ИТ-администраторами. Если выбран этот вариант, то IE11 работает аналогично Windows Internet Explorer 8.

Подробнее см. в разделе Режим предприятия.

Строка агента пользователя

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

Иногда внешние и внутренние сценарии пытаются обнаружить, какой браузер вы используете. Даже если вы не включили обнаружение браузера в собственный код, вы можете использовать стороннюю библиотеку JavaScript или сценарий на стороне сервера, который использует эту функцию.

Илон Маск рекомендует:  Что такое код ncurses_define_key

Проблема с функцией обнаружения браузера заключается в том, что она часто используется для уменьшения числа или для изменения функций на веб-странице на основании предположений разработчика сценария о возможностях браузера, а не на определении его фактических возможностей с помощью функции обнаружения возможностей. Это может привести к неожиданному поведению, поскольку код, предназначенный для Microsoft Internet Explorer 6, в IE11 выполняется иначе, или функция, которую полностью поддерживает ваш браузер, может быть отключена на основании предположения разработчика.

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

Режим предприятия

Начиная с обновления до Windows 8.1, в IE11 добавляется режим предприятия.

Режим предприятия включается ИТ-администраторами для определенных доменов и страниц с помощью параметров групповой политики. Он похож на параметры просмотра в режиме совместимости, но обеспечивает совместимость с Internet Explorer 8. В Internet Explorer 8 веб-страницы в режиме предприятия работают отлично, за исключением незначительных известных ограничений.

При отображении страницы в режиме предприятия IE11 отображает значок режима предприятия рядом с адресной строкой.

Чтобы отключить режим предприятия на веб-странице, в инструменте эмуляции выберите в раскрывающемся списке Профиль значение Классические или отключите параметр Режим предприятия в меню Сервис.

IE11 в режиме предприятия по умолчанию представляет серверам строку агента пользователя Internet Explorer 8.

Подробнее о настройке групповой политики или параметров реестра для включения режима предприятия для конкретных веб-страниц или доменов см. в документации по режиму предприятия для ИТ-специалистов.

В Накопительном пакете обновления для Internet Explorer (за ноябрь 2014 г.) расширены функциональные возможности списка сайтов режима предприятия. Новый раздел списка позволяет ИТ-менеджерам предприятия назначать любой доступный режим документов определенному сайту, поддомену или подкаталогу.

Если веб-странице назначен режим документов данным новым способом, значок режима предприятия рядом с адресной строкой не отображается. ИТ-менеджерам предприятия, использующим данную функцию, рекомендуется оповестить разработчиков-владельцев этих страниц, чтобы предотвратить возникновение путаницы. Подробно об этой функции см. в документации для ИТ-специалистов.

Экран


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

Ориентация

Доступны следующие стандартные параметры.

  • Книжная: высота экрана больше ширины экрана. Эта ориентация экрана используется на большинстве мобильных устройств.
  • Альбомная: ширина экрана больше высоты экрана. Эта ориентация экрана используется на большей части полноразмерных ноутбуков и на настольных компьютерах.

Разрешение

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

Поддерживаются размеры до 80 дюймов и 3820 x 2160.

Географическое положение

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

Доступны три параметра имитации GPS: Выкл., Вкл. и Включено, но сигнал отсутствует, которые можно использовать для проверки различных состояний устройств. Если выбран параметр Вкл., веб-страница получает сведения о вводимых значениях широты и долготы.

Аппаратное ускорение в браузерах

Одной из характеристик, по который браузеры сравнивались в прошлом обзоре, была скорость работы с графикой. Тогда это был всего лишь один показатель среди прочих, сегодня же ему будет уделено основное внимание, и вот почему. Контент веб-страниц постепенно становится сложнее и насыщеннее. С одной стороны, этому способствует развитие и продвижение HTML5, который напрямую поддерживает видео () и графику (), а с другой — постепенное наступление облачных вычислений.

Хорошим примером является Chrome OS — работать в ней можно только с веб-приложениями, которые в идеале должны заменить все привычные нам программы. При этом должна быть обеспечена и возможность их локальной работы, для чего большая часть функциональности реализуется непосредственно в браузере (в противном случае ее можно было бы переложить на серверную сторону, что сняло бы часть проблем). Среди таких приложений если не сегодня, то завтра, очевидно, появятся и достаточно сложные игры (казуальные уже прочно укрепились в вебе), и фоторедакторы, и другие графические программы. Естественно, чтобы завоевать признание пользователей, они должны работать сравнимо с обычным ПО, в том числе и в вопросах производительности — обратное поставит под сомнение саму идею облачных вычислений, что, похоже, сегодня уже никого не устраивает. Именно для этой цели совершенствуются JavaScript-машины и, что особенно важно в контексте данной статьи, обеспечивается аппаратное ускорение вывода графики.

К тому же, браузер становится системообразующим компонентом, и не только в Chrome OS: его роль, к примеру, расширяется и в более традиционной Windows. Так, новый интерфейс Metro в Windows 8 визуализируется именно ядром Internet Explorer 10, и потому аппаратное ускорение в этом браузере играет особенно важную роль. При этом Metro-вариант Internet Explorer 10 не поддерживает никаких плагинов, включая Adobe Flash и Microsoft Silverlight, и соответственно, использующие графику и анимацию приложения для него должны создаваться исключительно средствами HTML5.

Постепенно снижающееся значение Adobe Flash-плеера — еще одна современная тенденция. До недавнего времени стандарт де-факто для анимационных интерактивных веб-приложений, сегодня он постепенно вытесняется из этой сферы, хотя, по оценкам самой Adobe, по крайней мере 70% онлайновых игр реализуется именно на Flash. Однако и Apple, и теперь Microsoft подают однозначные сигналы. Google, вроде бы, более лояльна, раз включила поддержку Flash в Chrome OS, однако именно Google (а даже не сам пользователь) контролирует обновление плеера, и компания в любой момент может пойти на попятную, т. к. очевидным приоритетом все же является HTML5. Тем не менее Adobe продолжает развитие своих технологий, и Flash Player 11 также обещает повысить эффективность вывода графики. Поэтому, хотя в контексте статьи основной интерес представляют именно браузеры, они будут, где это возможно, сравниваться с Flash. Тем более, что было бы полезно не только сопоставить между собой сами браузеры, но и понять, насколько серьезное оборудование уже в ближайшем будущем потребуется для комфортной работы с вебом.

Итак, под аппаратным ускорением понимается переложение части операций с центрального процессора на GPU, который, в отличие от x86 CPU, адаптирован для специфических вычислений — кстати, не только для обработки графики, но и, скажем, для криптографии. Впрочем, лучше всего эффект от использования GPU известен на примере компьютерных 3D-игр: сегодня уже невозможно представить, чтобы в них использовался программный рендеринг. Веб-приложениям, конечно, еще долго выходить на подобный уровень, но уже сейчас аппаратное ускорение в браузерах может касаться сразу нескольких аспектов:

  • воспроизведения видео;
  • рендеринга страниц, использующих , CSS3 и пр.;
  • 3D-графики, создаваемой с помощью WebGL.

Браузеры: текущее состояние

Если обращать внимание на номера версий, то за время, прошедшее с момента прошлого теста, два из пяти ведущих браузеров продемонстрировали завидный прогресс. На самом деле, такое частое обновление версий отражает, скорее, особенности процесса разработки, чем уровень реальных усовершенствований, однако изменения есть, и они заметны. Особенно у Chrome, который существенно расширил свою функциональность — к примеру, стал поддерживать исполнение машинного кода (Native Client). В интересующем нас контексте в браузере Google было реализовано графическое ускорение и 3D CSS, ряд экспериментальных функций перекочевали в базовые, так что теперь этот браузер — в одном ряду с Firefox и Internet Explorer. Разработчики Firefox также уделяли внимание совершенствованию (в основном, экстенсивному) производительности. Ну а оптимизацией JavaScript-машин озабочены все — правда, Microsoft это делает уже в контексте будущего Internet Explorer 10. Поскольку JavaScript играет заметную роль в работе с графикой, предварительно имеет смысл обновить результаты прошлых тестов (на том же оборудовании):

Табл. Производительность браузеров в JavaScript

Браузер SunSpider 0.9.1, мс
(меньше — лучше)
V8 Benchmark (v6)
(больше — лучше)
Kraken v1.1, мс
(меньше — лучше)
Futuremark Peacekeeper
(больше — лучше)
Chrome 14.0.835.186 508 4580 8335 4857
Firefox 6.0.2 492 2208 11584 2671
IE 9.02 420 1425 25005 2620
Opera 11.51 536 2065 26064 4522
Safari 5.1 586 1638 34568 3584

Прогресс Chrome особенно заметен: в частности, теперь именно он лидирует во Futuremark Peacekeeper, слегка опередив Opera. Этот тест стои́т несколько особняком от прочих, так как учитывает и работу с графикой в , и рендеринг «типичных» элементов веб-страниц. Если признать, что он отражает текущее состояние веба, то понятно, почему Opera воспринимается как «быстрый браузер» — жаль только, что его разработчики не слишком реагируют на современные тенденции.

Оборудование

Тесты проводились в следующей конфигурации:

  • CPU Pentium D 3 ГГц;
  • 3 ГБ памяти;
  • референсные видеокарты AMD Radeon HD 6450, 6670, 6790;
  • монитор с разрешением 1680×1050;
  • ОС Windows 7 Ultimate SP1 x32;
  • Catalyst Software Suite 11.8.

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

Видео

Воспроизведение видео непосредственно средствами браузера стало возможным благодаря появлению в HTML5 тега . В нем можно описывать различные доступные форматы, а уж браузер выберет тот, который ему больше подходит. На самом же деле реальных претендентов на широкое распространение в вебе всего два: H.264/MPEG-4 AVC и VP8/WebM. Первый поддерживается исторически, в том числе в Adobe Flash, и сегодня его главными сторонниками являются Microsoft и Apple. Второй продвигается усилиями Google, которая в свое время приобрела разработчика этого формата, а кроме того, поскольку VP8 не требует лицензионных отчислений (хотя пока они и за H.264 не взимаются), на его стороне также Mozilla и Opera. Впрочем, Microsoft предлагает плагины H.264 для Chrome и для Firefox на Windows 7, а Google — WebM-плагин для Internet Explorer 9 и для Safari на Mac OS X. Проверить поддержку этих форматов можно, к примеру, на специальной странице сайта Microsoft.

Очевидно, что в данном случае соревнуются не столько браузеры, сколько кодеки. Сравнение их с точки зрения качества изображения — отдельный вопрос. Хотя некоторое преимущество H.264 зафиксировано в Wikipedia, при прочих равных большинство пользователей вряд ли увидят разницу в картинке. С производительностью проще — за свою более длинную историю H.264 сумел приобрести дивиденды в виде оптимизации декодирования с помощью GPU фактически всех распространенных марок; сегодня этот бонус автоматически достается большинству пользователей. VP8 пока таким похвастать не может, его декодирование все еще в значительной степени возлагается на CPU, со всеми вытекающими последствиями. Соответственно, главный критерий нашей оценки — именно загрузка CPU.

Для теста воспроизведения видео использовался ролик Wonders of the Solar System — Trailer, доступный в различных разрешениях и форматах. С недавних пор YouTube стал не только поддерживать раздачу видео в HTML5, но и активно кодировать его в WebM (традиционно для этого использовались форматы Flash V >Табл. Средняя загрузка CPU при воспроизведении видео (оконный/полноэкранный режимы, %). Видеокарта Radeon HD 6790.

Браузер Формат 360p 720p 1080p
Chrome 14.0.835.186 WebM 19,0/20,5 43,7/48,6 69,3/69,9
Firefox 6.0.2 WebM 26,0/19,8 44,6/38,5 н/д
IE 9.02 (HTML 5) MPEG-4 19,2/13,9 19,8/16,5 22,1/18,4
IE 9.02 (Flash 11.0.1.129 RC) MPEG-4 9,5/9,5 18,6/9,9 29,9/9,9
Opera 11.51 WebM 29,6/65,4 70,7/83,5 н/д
Safari 5.1 (QuickTime 7.7) MPEG-4 15,2/15,4 49,5/53,8 87,5/89,7

Табл. Средняя загрузка CPU при воспроизведении видео (оконный/полноэкранный режимы, %). Видеокарта Radeon HD 6450.

Браузер Формат 360p 720p 1080p
Chrome 14.0.835.186 WebM 22,2/21,5 43,7/48,7 69,5/70,0
Firefox 6.0.2 WebM 23,5/21,3 44,5/41,5 н/д
IE 9.02 (HTML 5) MPEG-4 20,7/14,1 22,3/18,7 23,9/19,9
IE 9.02 (Flash 11.0.1.129 RC) MPEG-4 10,5/10,0 20,6/10,1 31,3/9,9
Opera 11.51 WebM 31,9/67,0 74,0/84,1 н/д
Safari 5.1 (QuickTime 7.7) MPEG-4 15,8/16,0 51,3/55,5 89,2/90,1

Цифры, в общем-то, говорят сами за себя и подтверждают вышесказанное. Поддержке HTML5-видео еще есть куда развиваться, так как лучшие результаты по-прежнему демонстрирует Flash-плеер, хотя можно сделать вывод, что декодер Adobe лучше оптимизирован именно для небольших разрешений, тогда как Microsoft больше внимания уделила HD. Firefox и Opera даже не предлагают воспроизводить HD 1080p, хотя Firefox выглядит лучше Chrome, и оба, судя по всему, начали оптимизировать свои WebM-декодеры (Google объявляла об этом еще в Chrome 10). У Opera на 720p и Safari на 1080p загрузка центрального процессора периодически зашкаливала, и соответственно, они пропускали кадры. Вероятно, Safari/QuickTime лучше функционирует в Mac OS X, а декодер Apple для Windows, очевидно, не оптимизирован. Масштабирования аппаратного ускорения в зависимости от используемой видеокарты практически не наблюдается, поэтому третья модель видеокарты даже не тестировалась.

Условно отображение веб-страниц можно разбить на три основных этапа:

  • рендеринг отдельных элементов;
  • компоновка страницы;
  • вывод на экран.

Все три могут полностью или частично обслуживаться GPU. На первом, к примеру, обрабатываются элементы и SVG, на втором применяются преобразования 3D CSS и т. д. В свое время Microsoft первой объявила о реализации «полного» аппаратного ускорения вывода веб-страниц в Internet Explorer 9. Учитывая, что ее браузер работает только в Windows Vista/7, это, видимо, было сравнительно просто: Direct2D и DirectWrite для рендеринга, Direct3D для компоновки и вывод стандартными средствами ОС, т. е. также через DirectX. На самом деле остальные «ускоренные» браузеры обеспечивают примерно всё то же самое, с той лишь разницей, что вынуждены использовать средства и API, доступные на каждой конкретной платформе. К примеру, в Windows XP нет Direct2D, чем Microsoft и аргументировала отсутствие для нее Internet Explorer 9. Остальные разработчики решили превратить это в свое конкурентное преимущество, т. к. половина пользователей и до сих пор не перешла на более новые версии Windows. Соответственно, архитектура аппаратного ускорения в Chrome и Firefox сложнее, чем в Internet Explorer 9:

Табл. Реализация аппаратного ускорения в Firefox на различных платформах.

Операция Linux Windows XP Windows Vista/7 Mac OS X
Рендеринг контента XRender нет Direct2D Quartz (CPU)
Компоновка страницы OpenGL Direct3D Direct3D OpenGL

Таким образом, Firefox в Windows Vista/7 обеспечивает не менее полное ускорение. Chrome может использовать Direct2D для рендеринга отдельных элементов, в частности , но, к примеру, не для текста. Хотя, учитывая темпы обновления браузера Google, все может поменяться уже к моменту публикации статьи. Safari поддерживает аппаратное ускорение только в Mac OS X (справедливости ради, отметим, что Chrome и Firefox, в свою очередь, пока особо не блещут на платформе Apple), а Opera, кажется, вообще не уделяет внимания данному аспекту.

В реальности поддержка аппаратного ускорения также зависит от используемой видеокарты и драйверов (которые в любом случае стоит обновить). Проверить состояние дел можно несколькими способами. В Internet Explorer 9 и Firefox имеются соответствующие параметры в окнах настроек. В Firefox можно получить и более подробную информацию в разделе Graphics страницы about:support:

В Chrome похожая информация отображается на странице about:gpu-internals:

Если что-то здесь будет вызывать ваши сомнения, попробуйте заглянуть в about:flags и включить опции, имеющие отношение к работе с графикой и GPU (имейте в виду, что соответствующие функции относятся к экспериментальным и могут работать нестабильно). В текущей версии Chrome 14 доступна только GPU Accelerated Canvas 2D, в предыдущих были и другие настройки, которые постепенно перекочевали в разряд штатных возможностей.

Итак, перейдем к тестам. Для начала несколько тестов, созданных разработчиками браузеров. Кстати, как видно, они вовсе не обязательно отдают предпочтение «своим» браузерам.

Табл. Результаты ряда тестов не зависят от используемой видеокарты

Браузер Mozilla Hardware Acceleration Stress Test, fps Microsoft FishIE Tank, fps (20/500 рыбок) Microsoft Psychedelic Browsing (больше — лучше)
Chrome 14.0.835.186 60 60/34 6048
Firefox 6.0.2 60 60/44 7541
IE 9.02 60 60/40 1815
Opera 11.51 13 20/2 3
Safari 5.1 6 16/2 2

Первые два из этих тестов проводились и в прошлый раз, динамика развития Chrome хорошо заметна. Здесь и далее ограничение в 60 fps искусственное, связанное с тем, что именно такова наиболее распространенная частота обновления экрана мониторов — а следовательно, превышение ее может вызывать разве что академический интерес, поскольку пользователь дополнительных кадров просто не увидит. Приведенные результаты получены с видеокартой HD 6790 и оставались такими же (в пределах статистической погрешности) при использовании других видеокарт, за одним исключением: Firefox в Psychedelic Browsing показал 6440 и 2217 баллов для HD 6670 и HD 6450 соответственно (при этом не воспроизводился звук). Вероятно, это связано с какими-то особенностями реализации отдельных функций. Для Chrome в Psychedelic Browsing решающее значение имела упомянутая выше опция GPU Accelerated Canvas 2D — с ее отключением результат опускался до значения 4. Вот наглядная демонстрация преимуществ аппаратного ускорения, отсутствие которого невозможно компенсировать оптимизацией других механизмов браузера.

Илон Маск рекомендует:  Пример класса captcha на php (2)

Следующий тест также по сути своей относится к предыдущей группе, но в нем уже заметно некоторое масштабирование в зависимости от видеокарты.

Табл. Microsoft FishBowl, fps (10/250 рыбок)

Браузер HD 6790 HD 6670 HD 6450
Chrome 14.0.835.186 60/35 60/35 60/34
Firefox 6.0.2 60/19 60/3 38/3
IE 9.02 60/60 60/60 60/22
Opera 11.51 2/1 2/1 2/1
Safari 5.1 2/0 2/0 2/0

В Firefox и Opera, как и раньше, вода красная.

Два следующих теста независимых разработчиков имитируют игровой контекст, причем первый разработан специалистами Facebook. Естественно, ни о какой 3D-графике здесь речь не идет, используются обычные «плоские» спрайты.

Табл. Независимые «игровые» тесты

Браузер JSGameBench (больше — лучше) Asteroids, баллы/fps
Chrome 14.0.835.186 796 1123/24
Firefox 6.0.2 923 434/10
IE 9.02 700 1080/23
Opera 11.51 43 755/16
Safari 5.1 114 1046/22

Здесь также масштабирование наблюдалось только у FireFox — в JSGameBench его показатели были 910 и 777 на HD 6670 и HD 6450 соответственно. Результаты в Asteroids выглядят очень интересно — хотя в этом тесте и применяется , аппаратное ускорение не имеет решающего значения. Вероятно, здесь сказываются ограничения в каких-то более традиционных частях движка, неплохо реализованных в Opera и Safari. Для сравнения, Chrome с отключенным 2D-ускорением показал 1043/22.

Как уже говорилось, все идет к тому, что Adobe Flash будет постепенно вытесняться из веба. Соответственно, возникает вопрос: насколько оправдана эта тенденция, учитывая предысторию, распространенность и достаточную отлаженность технологии Adobe? Следующий тест, конечно, не может претендовать на полноту, но тем не менее демонстрирует, что по производительности конкурировать с Flash непросто.

Табл. Сравнение различных механизмов анимации, fps

Браузер HTML Canvas SVG Flash
Chrome 14.0.835.186 21 30 18 44
Firefox 6.0.2 9 38 2 44
IE 9.02 16 34 25 50
Opera 11.51 29 28 12 50
Safari 5.1 23 31 51 50

Internet Explorer и Opera в HTML-тесте рисуют частички квадратными. Результат Chrome указан с отключенным 2D-ускорением : с использованием этой настройки частота кадров опускалась до 12-13 fps. Видно также, что в наиболее простых случаях отсутствие аппаратной акселерации можно компенсировать программной оптимизацией; не наблюдалось и масштабирования производительности.

Впрочем, в следующем тесте картина для Flash уже не столь однозначна: реализация растровой графики средствами HTML5 оказывается значительно более быстрой:

Табл. GUIMark 2, fps

Браузер Vector, HTML5 Vector, Flash Bitmap, HTML5 Bitmap, Flash
Chrome 14.0.835.186 9 18 37 14
Firefox 6.0.2 11 17 48 14
IE 9.02 10 20 47 16
Opera 11.51 16 19 9 15
Safari 5.1 2 19 12 15


Здесь хорошо заметно, что для HTML5 принципиальную роль играет аппаратное ускорение, хотя Opera отлично справилась с векторным тестом. Результаты Chrome с отключенным 2D-ускорением были значительно ниже. Однако нагрузка на GPU явно не слишком высока, и результаты совпадают на всех видеокартах.

Наконец, последний HTML5-тест — один из немногих, построенных на основе реального веб-приложения (архив-магазин записей радиостанции). Он комплексный, задействует различные механизмы, в том числе и , в процессе его исполнения заметно, как сильно «плавает» fps в зависимости от ситуации/задачи.

Табл. WebVizBench (баллы/fps)

Браузер Баллы/fps
Chrome 14.0.835.186 2800/5
Firefox 6.0.2 3050/3
IE 9.02 3970/14
Opera 11.51 2740/3,5
Safari 5.1 2650/2

Хороший пример того, насколько «тяжелыми» для браузеров могут быть HTML5-приложения. Результаты не зависели он используемой видеокарты, за исключением Internet Explorer, показавшего 3600/11 на HD 6450. Впрочем, надо иметь в виду, что данный сайт/тест разрабатывался именно с прицелом на браузер Microsoft.

WebGL

В данном контексте не вполне корректно говорить об аппаратном ускорении, поскольку WebGL представляет собой JavaScript API для отображения 3D-графики в . Но он основан на OpenGL и потому в большинстве случаев будет действительно исполняться на GPU. На сегодняшний день WebGL поддерживают Chrome и Firefox, а также Safari на платформе Mac OS X. В стабильной версии Opera поддержки нет, хотя она присутствовала в специальных тестовых сборках. Microsoft выступает против WebGL, аргументируя свою позицию соображениями безопасности: к качеству видеодрайверов имеются определенные претензии, а WebGL позволяет веб-приложениям напрямую взаимодействовать с ними, что может быть использовано для взлома системы. Впрочем, свято место пусто не бывает, и для Internet Explorer разрабатывается WebGL-плагин, хотя приложения для него, похоже, нужно корректировать (во всяком случае, пока ни один тест у нас корректно не запустился).

Табл. WebGL-реализация FishIE (2000/10000 рыбок, fps)

Браузер HD 6790 HD 6670 HD 6450
Chrome 14.0.835.186 60/28 60/27 54/4
Firefox 6.0.2 60/20 58/18 41/4

Трудно сравнивать между собой реализации совершенно различных механизмов, но, видимо, благодаря тому, что WebGL находится «ближе» к железу, он способен существенно поднять производительность графики (обратите внимание на количество рыбок и сравните с HTML5-тестом). В силу этого, наверное, начинает проявляться и масштабирование.

Табл. Полноэкранные WebGL-варианты JSGameBench

Браузер HD 6790 HD 6670 HD 6450
Chrome 14.0.835.186 3960 2080/1810 380/440
Firefox 6.0.2 3230 1910 410

Результаты Chrome отличаются в WebGL Demo и WebGL Demo 2 (приведены через косую черту). Здесь масштабирование также хорошо заметно, хотя на следующие тесты смена видеокарты влияния уже не оказывала.

Табл. Производительность в WebGL также не всегда масштабируется

Браузер Khronos Particles, fps Google Aquarium (100/1000 рыб), fps Thoughts in Computation Particles, fps
Chrome 14.0.835.186 60 60/37 28
Firefox 6.0.2 59 40/18 36

Резюме

Итак, насколько важно аппаратное ускорение в браузерах и должно ли оно волновать пользователя? Текущее состояние веба таково, что новые возможности HTML5 пока не слишком распространены. В пользу этого свидетельствует и неспешное развитие Opera и Safari. Однако ситуация будет меняться. В отношении перспектив HTML5 Google и Microsoft практически единодушны, а одно это уже говорит о многом.

Аппаратное ускорение реально необходимо для воспроизведения сравнительно качественного видео из веба. Судя по всему, именно с его отсутствием или недостаточной эффективностью связаны жалобы пользователей нет- и «хромбуков». Особо мощный GPU в данном случае не нужен, гораздо важнее качественная оптимизация декодера, которой пока очень не хватает для WebM.

C отображением веб-страниц ситуация менее однозначна. Неслучайно большинство тестов являются, по сути, демонстрационными приложениями: веб достаточно консервативен, создатели сайтов обычно стараются поддерживать все распространенные браузеры, а HTML5 пока даже не принят W3C. Однако новые возможности слишком заманчивы, и тройка ведущих браузеров делает их доступными для большинства пользователей. Соответственно, массового появления насыщенных сложным контентом сайтов можно ожидать уже в ближайшее время. В большинстве HTML-тестов аппаратное ускорение позволяет кардинально улучшить производительность, хотя реальная нагрузка на GPU, видимо, не слишком высока, раз не наблюдается масштабирования результатов при смене видеокарты на более мощную. Скажем, непонятно, как добиться большей частоты кадров в тесте WebVizBench.

Производительность WebGL масштабируется заметно лучше — судя по всему, данный API позволяет довольно эффективно задействовать GPU. Следовательно, появятся и по-настоящему тяжелые веб-приложения, работа которых будет существенно зависеть от видеокарты. Это, кстати, могут быть не только игры, хотя им уделяется внимание в первую очередь — вот, к примеру, Quake 2. Не менее перспективно выглядит и визуализация научных и инженерных расчетов. Если WebGL действительно сможет завоевать популярность, то значение GPU для веба существенно вырастет.

Еще один общий момент, на который стоит обратить внимание: аппаратное ускорение не только повышает производительность, но и снижает энергопотребление. Задачи, для которых не хватает даже 100% ресурсов CPU (к примеру, декодирование HD-видео), GPU нередко решает с минимальной нагрузкой, порядка нескольких процентов. Это, конечно, особенно важно для мобильных систем.

Ситуация же с самими браузерами достаточно ясна. Аппаратное ускорение дает последним версиям Chrome, Firefox и Internet Explorer ощутимое преимущество. На платформе Windows производительность этих браузеров существенно подровнялась, хотя у Chrome часть возможностей еще находится в экспериментальном состоянии. Дополнительными плюсами в пользу Chrome и Firefox являются их кроссплатформенность и поддержка WebGL, хотя не следует ожидать одинаковых результатов на всех платформах. Safari, по понятным причинам, в первую очередь развивается на Mac OS X, а вот позиция Opera откровенно разочаровывает, особенно если учесть популярность этого браузера в СНГ.

Атрибуты

Дата добавления: 2015-07-09 ; просмотров: 272 ; Нарушение авторских прав

· TYPE. Задает тип поля ввода. Может принимать значения: кнопка (BUTTON, SUBMIT, RESET), поле ввода (TEXT), поле ввода пароля (PASSWORD), скрытое поле (HIDDEN), флажок (CHECKBOX), переключатель (RADIO), файл (FILE).

С HTML5 добавились новые типы: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week. Если браузер не поддерживает какой-то из новых типов он будет считать, что это TEXT. Как организовать поддержку старых браузеров описано на примере даты.

Чуть ниже всё это рассмотрим подробно.

· NAME. Задает имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки.

· VALUE. Задает значение поля по умолчанию или надпись на кнопке.

· ONCLICK. Задает обработчик щелчка на кнопке.

· SIZE. Задает размер поля типа TEXT.

· MAXLENGTH. Задает ограничение в поле типа TEXT вводимого количества символов.

· AUTOCOMPLETE=»OFF». Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. [domelement].setAttribute(‘autocomplete’,’off’);

· AUTOFOCUS=»autofocus» or «». после загрузки страницы делает поле ввода активным. Пример эмуляции свойства автофокус для старых браузеров.

· readonly=»readonly» или «». Запрещает изменение элемента.

· disabled=»disabled» or «». Делает элемент недостпным. Недоступные элементы не передаются на сервер.

· required. Только HTML 5 Web Forms 2.0. Поле является обязательным. Автоматически проверяет заполнено ли поле.

· required email. Только HTML 5 Web Forms 2.0. Автоматически проверяет корректно ли указан адрес e-mail.

· min, max, step. Только HTML 5 Web Forms 2.0. Задает диаппазон возможных значений, для даты формат 2012-12-19.

· pattern Только HTML 5 Web Forms 2.0. Шаблон поля ввода. Примеры шаблонов для html5 form input pattern.

· placeholder. Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса. Пример настроки стиля подсказки

text-align: left; /* в Opera для полей number по умолчанию выравнивание вправо */

Общие атрибуты:

· accesskey. Назначает клавишу быстрого доступа элементу на странице. Клавиша доступа — один символ из набора символов документа, это может быть буква или цифра на клавиатуре с учетом выбранного языка и регистра. Например: accesskey=»G»

· contenteditable = «true» or «false» or «» (empty string) or empty HTML5

· contextmenu = ID reference HTML5

· dir = «ltr» or «rtl» or «auto»

· draggable = «true» or «false» HTML5

· dropzone = «copy», «move» или «link» HTML5

· h (empty string) or empty HTML5

· lang = language tag

· spellcheck = «true» or «false» or «» (empty string) or empty HTML5

· tabindex = integer Определяет порядок получения форуса в форме

· title = any value

Атрибуты обработки событий:

· onabort = function HTML5 Загрузка элемента прервана пользователем.

· onblur = function Элемент потерял фокус.

· oncanplay = function HTML5


· oncanplaythrough = function HTML5

· onchange = function Пользователь изменил значения элеменов формы.

· oncontextmenu = function HTML5 Пользователь вызвал контекстное меню для элемента.

· ondrag = function HTML5 Пользователь продолжает перетаскивание элемента

· ondragend = function HTML5 Пользователь закончил перетаскивание

· ondragenter = function HTML5 Пользователь начал перетаскивание

· ondragleave = function HTML5 Пользователь оставил элемент перетаскивания

· ondragover = function HTML5 Пользователь продолжает перетаскиавание на элементе

· ondragstart = function HTML5 Пользователь начал перетаскивать элемент

· ondrop = function HTML5 Пользователь закончил перетаскивать над элементом.

· ondurationchange = function HTML5 Изменена продолжительность (duration)

· onemptied = function HTML5 The video or audio element has returned to the uninitialized state.

· onended = function HTML5 The end of the video or audio element has been reached.

· onerror = function HTML5 Element failed to load properly.

· onfocus = function Element received focus.

· oninput = function User changed the value of element (form control).

· onkeydown = function User pressed down a key.

· onkeypress = function User pressed down a key that is associated with a character value.

· onkeyup = function User released a key.

· onload = function Element finished loading.

· onloadeddata = function HTML5 UA can render the video or audio element at the current playback position for the first time.

· onloadedmetadata = function HTML5 UA has just determined the duration and dimensions of the video or audio element.

· onloadstart = function HTML5 UA has begun looking for media data in the video or audio element.

· onmousedown = function User pressed down pointer button over element.

· onmousemove = function User moved mouse.

· onmouseout = function User moved pointer off boundaries of element.

· onmouseover = function User moved pointer into boundaries of element or one of its descendant elements.

· onmouseup = function User released pointer button over element.

· onmousewheel = function User rotated wheel of mouse or other device in a manner that emulates such an action.

· onpause = function HTML5 User has paused playback of the video or audio element.

· onplay = function HTML5 UA has initiated playback of the video or audio element.

· onplaying = function HTML5 Playback of the video or audio element has started.

· onprogress = function HTML5 UA is fetching media data for the video or audio element.

· onratechange = function HTML5 Either the DOM attribute defaultPlaybackRate or the DOM attribute playbackRate on the video or audio element has been updated.

· onreadystatechange = function HTML5 Element and all its subresources have finished loading.

· onreset = function The form element was reset.

· onscroll = function Element or document view was scrolled.

· onseeked = function HTML5 The value of the IDL attribute seeking changed to false (a seek operation on the video or audio element ended).

· onseeking = function HTML5 The value of the IDL attribute seeking changed to true, and the seek operation on the video or audio elements is taking long enough that the UA has time to fire the seeking event.

· onselect = function User selected some text.

· onshow = function HTML5 User requested the element be shown as a context menu.

· onstalled = function HTML5 UA is attempting to fetch media data for the video or audio element, but that data is not forthcoming.

· onsubmit = function The form element was submitted.

· onsuspend = function HTML5 UA is intentionally not currently fetching media data for the video or audio element, but does not yet have the entire contents downloaded.

· ontimeupdate = function HTML5 The current playback position of the video or audio element changed either as part of normal playback, or in an especially interesting way (for example, discontinuously).

· onvolumechange = function HTML5 Either the DOM attribute volume or the DOM attribute muted on the video or audio element has been changed.

· onwaiting = function HTML5 Playback of the video or audio element has stopped because the next frame is not yet available (but UA agent expects that frame to become available in due course).

Теперь познакомимся со всеми типами тэга .

Кнопка — BUTTON

В форме изображается кнопка с надписью, заданной атрибутом VALUE, при нажатии на которую вызывается JavaScript-обработчик, заданный атрибутом ONCLICK. Атрибут NAME служит для JavaScript-именования кнопки, а не для передачи на сервер. Атрибут TYPE, который может принимать значения submit, reset и button. Первые два значения и так ясно для чего, а вот третье предназначено для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция.

Пример

Кнопку можно задать также с помощью парного тега . . Внутри элемента BUTTON можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком. Вот так:

border=»0″ height=»115″ w >

Можно вместо рисунка вставить что угодно, хоть таблицу, если вам это необходимо.


13 сервисов тестирования сайта в разных браузерах и устройствах (обновлено)

Тестирование сайта в разных браузерах и устройствах

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

» Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями «. (Википедия)

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

Илон Маск рекомендует:  Что такое код sybase_fetch_array

1. Browsershots (бесплатно/платно)

Browsershots — это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах ( всего доступно более 130+ браузеров и платформы: Linux, Windows, Mac OS, Gecko, KHTML/WebKit). Причем, можно, дополнительно выставлять некоторые опции: разрешение экрана, глубину цвета, включить или выключить Javascript, Java, Flash. Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов. В бесплатной версии все происходит довольно медленно. Кроме того, одна сессия (запрос) может длиться только 30 минут.

Следует обратить внимание, что данный сайт имеет многоязычный интерфейс (в том числе — русский и украинский.)

Однако, хоть данный сервис заявлен как бесплатный, в нем есть и платные услуги. За 29.95 у.е. в месяц вы получите так называемую «приоритетную обработку«: скриншоты будут появляться намного быстрее, чем в бесплатной версии, сможете получить от 30 до 50 скриншотов всего за 5 минут. Кроме того, ваши скриншоты будете видеть только вы, тогда как в бесплатной версии они в итоге выкладываются в общую ленту.

2. Adobe

До марта 2013 года у Adobe был отличный бесплатный сревис Adobe BrowserLab для тестирования сайта в разных браузерах и ситемах. Но теперь он закрыт и вместо этого представлен новый сервис Adobe Edge Inspect CC.

Adobe Edge Inspect CC — это продукт, входящий в принципиально новую организацию Adobe продуктов — в облако Adobe Creative Cloud. Получить аккаунт в данном облаке можно по нескольким пакетам, все они платные. Средний стоит 49,99 у.е. в месяц. Бесплатно Adobe Creative Cloud можно попробовать 30 дней.

3. IE NetRenderer (бесплатно)

IE NetRendererбесплатный онлайн-сервис только для браузера Internet Explorer, который дает возможность проверить ваш сайт под браузером Internet Explorer версий: 9, 8, 7, 6, 5.5.

Тут все просто: вводите адрес своего сайта, выбираете версию IE и тут же получаете скриншот.

4. IE Tester (бесплатно)

IETester — это абсолютно бесплатное приложение только для браузера Internet Explorer, которое позволяет локально на вашем компьютере просматривать сайт в разных версиях Internet Exlporer (версии: 10, 9, 8, 7, 6, 5.5) под операционными системами Windows 7, Vista и XP.

Для этого нужно скачать IE Tester и установить у себя на компьютере. Найти последнюю версию IE Tester можно тут: http://www.my-debugbar.com/wiki/IETester/HomePage.

5. BrowserСam (платно)

BrowserСam — очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой. Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile. Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.

Цены стартуют от 19,95 у.е . в день в зависимости от функционала.

6. CrossBrowserTesting (платно)

CrossBrowserTesting — также очень функциональный платный сервис, где вы можете проверить за несколько минут сайт в разных браузерах, в разных операционных системах, на разных устройствах (поддерживается более 100 вариантов проверок, в том числе тестирование под Android, iPad, iPhone ) .

Ценовая политика выгодней и гибче, чем у предыдущего сервиса BrowserСam: базовая цена стартует от 29.95 у.е. в неделю . Кроме того, дается бесплатный тестовый триальный период в 7 дней на каждый из трех пакетов, правда с несколько с ограниченной квотой, нежели в платной версии.

7. Litmus (платно/бесплатно)

Litmus — онлайн-сервис, который предоставляет возможность тестирования сайта на разных браузерах. Кроме предоставления скриншотов, заодно проверяет валидность html и css кода. Особенность его в том, что он в основном ориентирован на тестирование е-мейлов в разных браузерах и на разных устройствах. Есть возможность протестировать е-мейл в 30 разных почтовых клиентах и другие важные функции, такие как аналитика для е-мейлов.

Платная версия сервиса предполагает три пакета: базовый (49 у.е. в месяц), плюс (99 у.е. в месяц), премиум (299 у.е. в месяц.) Бесплатная триал-версия действует 7 дней.

8. СloudTesting (платно)

CloudTesting — платный онлайн-сервис, который предоставляет возможность функционального тестирования кроссбраузерности сайта. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.

Ценовая политика стартует от 99 у.е. в месяц .

9. Mogotest (платно)

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

Ценовая политика стартует от 15 у.е. в месяц для физических лиц. При этом есть возможность бесплатно тестировать выбранный пакет (триальная версия) 14 дней.

10. Multi-Browser Viewer (платно)

Multi-Browser Viewer — платное приложение, которое работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом).

Ценовая политика Multi-Browser Viewer составляет 139,95 у.е. за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Кроме того доступна бесплатная триал-версия программы (14 дней).

11. Sauce Labs (бесплатно/платно)

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

Сервис предоставляет платные пакеты (цены стартуют от 49 у.е. в месяц ), кроме того, есть бесплатная квота на тестирование: 200 минут в месяц и позволяет создавать тесты автоматизированного тестирования в браузерах (используется Selenium)

12. Spoon (бесплатно)

Spoon — это онлайн-сервис эмуляции программ. Предоставляется бесплатная возможность запуска Firefox, Chrome, Opera и Safari для пользователей Windows. Доступны разные версии браузеров Firefox, Chrome, Safari, Opera. Технически, Spoon поддерживает виртуализацию IE, но эта возможность отключена по требованию Microsoft.

13. Browsera (бесплатно/платно)

Browsera — это онлайн-сервис, который обеспечивает автоматизацию тестирования кроссбраузерности. Он автоматически определяет различия в отображении страниц браузерами, тем самым упрощая процесс тестирования.

Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.

«Эмуляция» технических параметров в браузере. Часть 2 (browserleaks.com)

browserleaks.com

Пишу вторую часть своей статьи по «эмуляции» технических параметров. Если не успели ознакомиться с первой частью — welcome .

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

Заходим в левое меню на сайте и выбираем JavaScript:

JavaScript

На что обращаем внимание?

У параметра разрешения экрана есть ещё так же такой параметр как viewport(рабочая область в браузере). То есть из-за адресной строки и вкладок в браузере, полосы панели задач снизу с кнопкой пуск и прокрутки в браузере справа — разрешение viewport будет отличаться в меньшую сторону от разрешения экрана. Это стоит учитывать, если вы эмулируете, например, разрешение, больше размера экрана монитора (пусть 1920х1080), но viewport оставляете таким же, как при меньшем разрешении (к примеру viewport 1349×657, который принадлежит к разрешению 1366х768). Это будет очень палевным для детект-систем, особенно, если это будет повторяться.

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

Про hardwareConcurrency и deviceMemory я рассказывал в предыдущей статье и нового ничего не добавлю.


Battery Status API

Специально проверил, имеет ли слив по этому параметру последняя версия Chrome, выключив от сети свой ноутбук. Имеет:

Следовательно, при работе с ноутбука необходимо иметь заряд 100% и постоянное подключение к сети (при выходе и заходе в разные аккаунты, особенно в одной подсети IP).

Web Audio API

Затрону при обсуждении AudioContext Fingerprint (ниже).

Installed Plug-Ins

Затрагивал в прошлой статье . Держите список из ссылок на 30 самых популярных плагинов и рандомно устанавливайте каждый раз 3-5.

Silverlight

Далее в левом меню пропускаем Flash (т.к. обсуждали в прошлой статье) и выбираем Silverlight.

Если видите эту надпись — значит всё прекрасно и вы имеете одну из последних версий своего браузера (проверил на последних Chrome и Firefox), который не поддерживает эту устаревший и небезопасный плагин.

В том же случае, если он присутствует и вы не хотите от него избавляться, то стоит каждый раз очищать по пути все данные на вашей виртуальной (хостовой) машине:

Java Applet

Следующий пункт в меню слева Java Applet.

Как понимаете, тут та же самая ситуация, как и с Silverlight. Устаревший и небезопасный плагин, который убрали из поддержки в новых версиях браузеров. Настолько устаревший, что я даже не подскажу, как его включить. Вам это надо?

WebGL

Подскажу только с изменением значений: Unmasked Vendor, Unmasked Renderer и WebGL Report Hash (который меняется после смены первых двух). И только для Mozilla. Последнее значение разберу позже в одной из следующих статей.

Для этого набираем в адресной строке about:config, далее набираем в поиске Vendor и меняем на любое значение. К примеру, просто Mozilla.

Далее вводим Renderer и выбираем webgl.renderer-string-override:

Я ввёл к примеру ANGLE (Intel(R) HD Graphics 620 Direct3D11 vs_5_0 ps_5_0).

WebGL Report Hash у нас должен измениться тоже. Но с Image Hash придется попотеть. Я оставлю этот момент, возможно его дополню, но пока у меня нет кустарного решения по этому моменту, могу только сказать, что в разных браузерах он разный. Мне это не нужно, так как имею свой самописный браузер, где идет автоматическая подмена этого момента.

Можно, естественно и заблокировать доступ к WebGL — но это мощный звоночек к Цукеру и быстрый последующий бан.

WebRTC Leak Test

С WebRTC могу выделить здесь одну вещь — так называемые Media Devices. У меня опять же, этот момент подменяется в своем браузере, но здесь могу подсказать, что можно добавить какие-то девайсы в этот список с помощью программы Virtual Audio Cable (найдете на торрентах). Поиграйтесь с этой программой, без разницы, какие параметры будете менять. Главное изменить конечное значение аудиоотпечатка.

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

Canvas Fingerprint

Для подмены отпечатка Canvas можно использовать расширение Canvas Defender. Он есть как и для Mozilla, так и для Chrome. Да, это палево в какой-то степени, наверняка сайты могут подтянуть, что вы используете это расширение в данный момент. Но если других выходов нет — то можно именно так.

Как альтернатива — в Mozilla можно зайти в Настройки и найти этот раздел в меню Основные:

Выберем Дополнительно… и уберем там галочку с Разрешить веб-сайтам использовать свои шрифты вместо установленных выше. Сохраним изменения. И теперь выберем шрифт по умолчанию (поддерживающий кириллицу) с каким-нибудь размером (лучше стандартный).

Это изменит наш Canvas (кстати, как и Font Fingerprint).

Font Fingerprint

Как я говорил в прошлой статье — нужно иметь набор шрифтов, рандомно устанавливать некоторые из них перед запуском новой виртуальной машины к примеру. Добавлю некоторые свои мысли — необходимо устанавливать как можно более популярные шрифты (и иметь набор наиболее популярных шрифтов). Так как при вытягивании с помощью JS сайт вытягивает установленные шрифты по своему внутреннему списку (то есть ваши заморские он может и не выявить и будет фингерпринт у вас похож на прошлый). Вытягивать он может весь список только с помощью Flash, который уже давно у всех отключен.

Content Filtering

О чем я и говорил. Canvas Protection палится и альтернативное решение в этом плане лучше.

Adblock палится, это естественно, НО ОСОБЕННО будет палиться нестандартный и повторяющийся набор блок-листов. Выход — не использовать Adblock, либо никак его не трогать, чтобы не отличаться от группы людей.

Features Detection

Огромный набор по выделению каких-либо работающих/неработающих параметров на машине. Что можно сказать? Когда на виртуальной машине забанен аккаунт и вы не снесли винду или не почистили всё основательно — возможно, что этот набор остался и выдаст вас своим отпечатком на следующем аккаунте. То есть не устанавливайте лишних драйверов вида KLite Media Codec Pack. Конечно же, не нужно всматриваться в каждый этап, но сравните, для интереса, какие значения у вас на хостовой и виртуальной машины у Modernizr.video.h264 и например Modernizr.jpeg2000 и Modernizr.jpegxr. На хостовой машине наверняка h264true, а на виртуальных нет. А значения с jpeg и там и там — false. Это вполне нормальная вещь, но если будет что-то необычное и на протяжении долгого времени — это опять же составит о вас неблагоприятный отпечаток в глазах антифрод систем. Не стоит к этому цепляться, как к одному из моментов бана, но с цепочкой значений, где будет происходить слив — это будет играть больше негативно, чем наоборот.

More Tools

Выберите далее More Tools и я объясню некоторые параметры:

Firefox Resources Reader — неактуален, так как слив происходил на старых версиях Firefox. Слив заключался в том, что Firefox выдавал, что он именно Firefox и сливал некоторые хэши данных, которые хранились в его JS файлах.

ClientRects Fingerprinting — метод борьбы точно такой же, как и с Canvas. То есть изменение в Mozilla дефолтного шрифта.

CSS Media Queries — должно отличаться на разных виртуальных машинах.

Social Media Login Detection — одно из самых интересных вещей в этой статье, так как я нигде не видел об этом каких-либо мыслей. Как вы заметите, сайт определит на вашей машине, в какие из социальных сетей вы залогинены. И, наверняка, Facebook сделает тоже самое перед вашей регистрацией. Как ему неприятно будет быть вашей самой первой соцсетью, в которой вы будете зарегистрированы, Вы согласны? Сохраните этот список к себе и каждый раз перед регистрацией регайтесь на какие-нибудь из них рандомно.

audiofingerprint.openwpm.com

Для аудиоотпечатка я использую отдельный сайт audiofingerprint.openwpm.com . Как я говорил выше, для его изменения необходимо поиграться в установленной программе Virtual Audio Cable. Чтобы проверить свой отпечаток, жмите Fingerprint me! и смотрите.

Эпилог

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

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Страница 1 из 2 1 2 >

Для ИЕ можно еще http://spoon.net/browsers/ остальные браузеры можно и так поставить.

Firefox тоже прекрасно ставится несколько версий в одну систему, просто желательно для каждой версии свой профиль создать. Чтобы запустить отдельный процесс (не окно, а процесс) firefox (хоть другую версию, хоть ту же) при уже запущенном, нужно его a) запускать на отдельном профиле (ключ -p Profile), б) запускать с ключом -no-remote.

Спасибо, с этим разобрался ) У меня возник еще один вопрос, я решил не засорять форум и написать его сюда, так как в гугле ничего не нашел.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL