Добавление полизаполнений для браузеров, не поддерживающих требуемые функции
HTML5-формы — это, конечно, замечательно. Однако, похоже, есть кое-что, серьезно ограничивающее наши возможности по их использованию: различия в том, как поддерживающие браузеры реализуют определенные функции. Кроме того, непонятно, как поступать с браузерами, которые эти функции вообще не поддерживают. К счастью, как и всегда, веб-сообщество смогло найти выход из сложившейся ситуации.
Еще в я упоминал о Modernizr (http://www.modernizr.com) — потрясающей JavaScript-библиотеке, которая позволяет добавлять полизаполнения для браузеров, не поддерживающих требуемые функции HTML5/CSS3. Библиотека Webshims Lib, написанная Александром Фаркасом (Alexander Farkas) (http://afarkas. github.com/webshim/demos/), базируется на Modernizr и вездесущей jQuery и дает возможность загружать полизаполнения, которые касаются форм (она также позволяет добавлять полизаполнения, относящиеся к другим HTML5-функциям) и необходимы для того, чтобы браузеры, не поддерживающие требуемые функциии, смогли обрабатывать наши HTML5-формы. Поскольку библиотека Webshims Lib использует загрузочные возможности Modernizr, то соответствующие полизаполнения добавляются только при необходимости, что очень удобно. Она совсем немного «утяжеляет» веб-страницы, если они просматриваются в браузере, поддерживающем определенные HTML5-функции. Несмотря на то что устаревшим браузерам приходится загружать больше кода (поскольку они заведомо являются менее совместимыми), они предусматривают схожее пользовательское взаимодействие, хотя для обеспечения соответствующей функциональности прибегают к помощи JavaScript.
Однако библиотека Webshims Lib полезна, не только когда речь идет об устаревших браузерах. Как мы уже видели, многие современные браузеры не полностью реализуют функции, касающиеся HTML5-форм. Задействуя Webshims Lib для конкретной веб-страницы, мы устраняем любые пробелы и в их функциональных возможностях. Например, браузер Safari (версии 5.1) не выводит предупреждающих сообщений, если пользователь пытается отправить данные HTML5-формы, не заполнив какие-либо поля. Хотя отправки данных на самом деле не происходит, браузер не сообщает пользователю, в чем заключается проблема — едва ли такой подход можно назвать идеальным. Вот что произойдет при описанном выше сценарии, если внедрить в веб-страницу Webshims Lib (рисунок 8.24).
При некорректном вводе данных выводится предупреждение.
Таким образом, если браузер Firefox (версии 9) не сможет обеспечить работу числового поля ввода со значением, изменяемым с помощью мыши, при использовании атрибута type="number", то Webshims Lib позаботится о подходящем резервном варианте, «приводимом в действие» библиотекой jQuery. Webshims Lib — отличный инструмент, поэтому установим и «подключим» замечательный небольшой пакет, который его содержит. В результате мы сможем продолжить создавать HTML5-формы, пребывая в полной уверенности, что посетители сайта увидят все необходимое для того, чтобы пользоваться нашими формами (за исключением тех двух человек, которые все еще используют браузер Internet Explorer 6 с отключенным JavaScript).
Сначала скачайте пакет с библиотекой Webshims Lib (http://github.com/aFarkas/ webshim/downloads) и распакуйте его. Затем скопируйте папку js-webshim в соответствующий каталог, относящийся к вашей веб-странице. Для простоты в этом примере я скопировал ее в корневой каталог сайта.
Далее добавьте следующий код в тег <head> своей страницы:
<script src="js/jquery-1.7.1.js"></script>
<script src="js-webshim/minified/extras/modernizr-custom. js"></script>
<script src="js-webshim/minified/polyfiller. js"></script>
<script>
// загрузить все указанное $. webshims. polyfill ();
</script>
Сразу разберемся в этом коде. Сначала я указал ссылку на локальную копию библиотеки jQuery (ее последнюю версию можно скачать по адресу www. jquery.com):
<script src="js/jquery-1.7.1.js"></script>
Затем я добавил соответствующие версии JavaScript-файлов modernizr-custom. js и polyfiller. js, которые имеются в Webshims Lib:
<script src="js-webshim/minified/extras/modernizr-custom. js"></script>
<script src="js-webshim/minified/polyfiller. js"></script>
И наконец, я дал указание сценарию загрузить все необходимые полизаполнения:
<script>
// загрузить все указанное $. webshims. polyfill ();
</script>
Вот и все. Теперь отсутствующая функциональность будет автоматически добавляться соответствующим полизаполнением. Отлично!
Добавить комментарий