2 Тестирование функций HTML5 в браузере
Приступим
Вы могли бы, конечно, спросить: «Как же мне начинать пользоваться HTML5, если старые браузеры его не поддерживают?» Но сама постановка такого вопроса ошибочна. HTML5 — это не единый большой инструмент, а совокупность отдельных функций, поэтому «поддержку HTML5» вообще нельзя протестировать: это выражение бессмысленно. Но можно проверить, поддерживает ли браузер отдельные нововведения: холст, видео, геолокацию и др.
Способы тестирования браузера
При прорисовке страницы браузер строит объектную модель документа (DOM) — набор объектов, которыми представляются HTML-элементы страницы. Каждый тег — <p>, <div>, <span> и т. д. — представляется в DOM-структуре отдельным объектом (есть также глобальные объекты — окно и целый документ, не привязанные
кспецифическим HTML-элементам).
Увсех DOM-объектов есть общие свойства, но у некоторых объектов их больше, чемудругих.Болеетого,вбраузерах,поддерживающихHTML5-функциональность, какие-то объекты будут располагать уникальными свойствами. Поддерживается ли та или иная функция, можно увидеть, заглянув в DOM.
Существуют четыре основных способа тестирования браузера на предмет поддержки разных возможностей HTML5. Рассмотрим их по порядку, от простейшего к более сложным.
1.Проверить, определено ли нужное свойство для такого глобального объекта, как window или navigator.
Пример — поддержка геолокации. Как протестировать браузер на ее наличие, читайте в разделе «Геолокация» данной главы.
2.Создать элемент и проверить, определено ли для него нужное свойство. Пример — поддержка рисования. О ней вы узнаете в разделе «Холст» этой главы.
3.Создать элемент, проверить, определен ли для него нужный метод, затем вызвать этот метод и посмотреть на возвращенное им значение.
26 |
Глава 2.. Тестирование функций HTML5 в браузере |
Пример — поддержка видеоданных разных форматов. О ней читайте в разделе «Форматы видео» этой главы.
4.Создать элемент, установить для него нужное значение какого-либо свойства, затем проверить, сохраняет ли свойство данное значение.
Пример — поддержка разных типов полей ввода. О ней вы узнаете в разделе «Типы полей ввода» данной главы.
Modernizr: библиотека для тестирования HTML5-функций
Modernizr(http://www..modernizr..com)—этоJavaScript-библиотека,распространяемая под лицензией MIT с открытым исходным кодом. Для большинства возможностей HTML5 и CSS3 она предоставляет простой способ проверить, поддерживает ли их исследуемыйбраузер.НамоментнаписанияэтойкнигипоследняяверсияModernizr имеланомер1.11.Обязательноприменяйтесамуюновуюверсию.Дляиспользования Modernizr надо включить в головную часть страницы следующий тег <script>:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>Название моей страницы</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Modernizr запускается автоматически, поэтому нет необходимости в функции modernizr_init(), которая бы вызывала ее. При запуске библиотека Modernizr создает одноименный объект с набором булевозначных свойств, по одному на каждую распознаваемуюфункцию.Так,например,есливашбраузерподдерживаетAPIрисования (см. главу 4), то свойство Modernizr.canvas примет значение true, а если нет — false:
if (Modernizr.canvas) {
//порисуем!
}else {
//тег <canvas> не поддерживается, печаль :(
Холст
В HTML5 тег <canvas> (http://bit..ly/9JHzOf) определен как «холст для зависимой от разрешения растровой графики, с помощью которого могут динамически прори-
1В январе 2011 года были доступны стабильная версия 1.6 и бета-версия 2.0. — Примеч.
перев.
Холст |
27 |
совываться диаграммы, графика игр и прочие изображения». На странице холст имеет вид прямоугольника, в границах которого можно рисовать с помощью JavaScript. В HTML5 определен «API рисования» — набор функций, позволяющих рисовать разные фигуры и контуры, создавать градиентную заливку, преобразовывать графику.
Протестировать поддержку API рисования можно способом 2 (см. раздел «Способы тестирования браузера» этой главы). Если <canvas> поддерживается в браузере, то для DOM-объекта, представляющего тег <canvas>, будет определен метод getContext() (см. раздел «Простые фигуры» главы 4). Если же поддержки рисования в браузере нет, то созданный объект не будет иметь характеристик холста. Поддерживается ли <canvas>, можно проверить с помощью такой функции:
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
В единственной ее строке сначала создается пустой тег <canvas>: return !!document.createElement('canvas').getContext;
Он не связан с какой-либо областью страницы и не будет отображаться на экране. Ничего не делая, он просто тихо покачивается на волнах оперативной памяти.
После создания пустого тега <canvas> надо проверить, определен ли для него метод getContext(). Этот метод определен только в том случае, если браузер поддерживает API рисования:
return !!document.createElement('canvas').getContext;
Наконец, двойное отрицание заставляет систему вывести значение булевого типа (true или false).
return !!document.createElement(‘canvas’).getContext;
Данным способом можно исследовать, поддерживается ли в браузере большинство функций API рисования: фигуры (см. раздел «Простые фигуры» главы 4), контуры (см. раздел «Контуры» главы 4), градиенты (см. раздел «Градиенты» главы 4) и узоры. Таким образом, не может быть обнаружена поддержка сторонней библиотеки ExplorerCanvas (см. раздел «А что в IE?» главы 4), реализующей API
рисования в Internet Explorer.
Чтобы не писать собственную функцию для проверки того, поддерживается ли в браузере API рисования, прибегните к помощи Modernizr (см. предыдущий раздел):
if (Modernizr.canvas) {
//порисуем!
}else {
//тег <canvas> не поддерживается :(
API рисования текста нужно тестировать особо, о чем и пойдет речь далее.
28 |
Глава 2.. Тестирование функций HTML5 в браузере |
Рисование текста
Если даже ваш браузер поддерживает тег <canvas> и API рисования, в нем может не быть поддержки API рисования текста. Инвентарь функций рисования расширялся постепенно, текстовые функции были добавлены сравнительно поздно, и некоторые браузеры с поддержкой рисования вышли в свет прежде, чем разработка текстового API была завершена.
Протестировать поддержку API рисования текста вновь позволяет способ 2 (см. раздел «Способы тестирования браузера» этой главы). Если рисование текста в вашем браузере поддерживается, то для DOM-объекта, представляющего тег <canvas>, будет определен метод getContext() (см. раздел «Простые фигуры» главы 4), а если нет, то соответствующий DOM-объект не будет располагать свойствами, специфичными для холста. Проверить, работает ли в браузере рисование текста, вам поможет такая функция:
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}
В начале кода этой функции вызывается ранее написанная нами функция supports_canvas(), которая тестирует поддержку API рисования:
if (!supports_canvas()) { return false; }
Понятно, что, если браузером не поддерживается тег <canvas>, то и рисование текста в нем будет невозможно.
Теперь создадим пустой тег <canvas> и выясним его контекст рисования. Это непременно удастся сделать, так как функция supports_canvas() уже удостоверилась в том, что метод getContext() определен для всех объектов-холстов:
var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext(‘2d’);
Выясним, наконец, существует ли в контексте рисования функция fillText(). Если да, то API рисования текстом доступен:
return typeof context.fillText == 'function';
Чтобы не писать собственную функцию, прибегните к помощи Modernizr: if (Modernizr.canvastext) {
//порисуем текст!
}else {
//порисовать текст не удастся :(
Видео
В HTML5 появился новый тег <video>, предназначенный для встраивания видео фрагментов в веб-страницы. Раньше это было невозможно без сторонних приложе ний, таких как Apple QuickTime и Adobe Flash.