Данная статья является переводом с дополнениями поста css-tricks.com/how-to-use-the-webshims-polyfill/
В этой статье речь пойдет о о HTML5 и CSS3 polyfill библиотеке под названием Webshims и о ее правильном использовании.
В веб-разработке polyfill'ами, называются скрипты, частично эмулирующие спецификации HTML5 или CSS3. В качестве polyfill'a может выступать практически что угодно — библиотека на JavaScript, которая добавляет поддержку CSS3 селекторов в старых версиях Internet Explorer (например, Selectivizr), или высококлассное решение на базе технологии Flash для поддержки тегов <audio> и <video> в IE 6 (например, html5media).
Прим. переводчика. Сразу же может возникнуть вопрос: какой процент используемых браузеров на рынке еще не поддерживает HTML5? Нужно ли все это дело?
Дело в том, что нет такой галочки «поддерживается html5», а есть множество спецификаций, которые все еще дополняются и изменяются. Кроме того, в разных проектах процент браузеров IE6-8 может достигать больших значений, а в них и даже и «не пахнет» поддержкой html5 и ccs3. Поэтому всем тем, кому необходимо поддерживать большое количество браузеров и кто хочет использовать современные веб-технологии предлагается обратить внимание на данную библиотеку.
Введение в Webshims.
Библиотека Webshims является одним из наиболее полноценных polyfill'ом.Она основана на jQuery и Modernizr. Подключение только одного этого скрипта позволяет использовать много различных возможностей в рамках большого количества настольных браузеров.
Webshims «активирует» такие HTML5 и CSS3 функции, как семантические теги, canvas, интернет хранилища, геолокация, формы и мультимедиа. Во время прочтения этого списка первая мысль, которая может возникнуть — насколько велика эта библиотека? Вопрос с точки зрения загружаемого объема и скорости исполнения скрипта.
Трюк в том, что webshims автоматически определит, какие из функций браузер поддерживает сам и загрузит только то, что необходимо для эмуляции всех остальных. Таким образом, он не будет замедлять работу пользователей, которые уже используют современный браузер, такой, как Firefox или Chrome. Даже можно самим уменьшить количество функций для загрузки, если они не нужны.
Как использовать Webshims
Для использования библиотеки необходимо включить JQuery и Modernizr перед подключением webshims.
<script src="scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>
Теперь нужно инициализировать webshims и, при необходимости, указать, какие функции вы хотите использовать.
<script>
// Поддержка всей функциональности
$.webshims.polyfill();
</script>
<script>
// Поддержка только форм и canvas
$.webshims.polyfill('forms canvas');
</script>
И это все! Webshims будет автоматически обнаружит и «заменит» недостающие функции, в зависимости от браузера пользователя.
Полный список поддерживаемых функций:
- JSON-хранилища
- es5
- геолокация
- canvas
- формы
- расширения форм
- мультимедиа
- отслеживание
- детали
Пример
Рассмотрим работу с библиотекой на примере тега <video>. Прежде всего, создадим заготовку страницы без webshims или любого другого polyfill'а.
<!DOCTYPE html>
<html>
<head>
<title>Video native</title>
</head>
<body>
<video width="480" height="360" controls="controls">
<source src="Video.mp4" type="video/mp4">
<source src="Video.webm" type="video/webm">
</video>
</body>
</html>
Современные браузеры отобразят это видео правильно, но Internet Explorer 6, 7 или 8 — нет.
Теперь мы добавим в пример библиотеку webshims. Заметьте, что это не нужно редактировать что-либо еще в коде.
<!DOCTYPE html>
<html>
<head>
<title>Video including polyfill</title>
<script src="scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>
<script>
$.webshims.polyfill('mediaelement');
</script>
</head>
<body>
<video width="480" height="360" controls="controls">
<source src="Video.mp4" type="video/mp4">
<source src="Video.webm" type="video/webm">
</video>
</body>
</html>
Современные браузеры будут использовать встренную поддержку тега <video>, но теперь эта функция также доступна в Internet Explorer 6 и выше. Вы можете опробовать это демо.
Заключение
Как было показано в примере, webshims действительно очень легко использовать. Нет необходимости изменять существующий код и она никак не сказывается на производительности современных браузеров. Это позволяет каждому пользоваться всеми функциями, содержащимся на вашей странице. Документация и другие демо доступны на странице webshims.
P.S. от переводчика: термин polyfill, насколько я знаю, не имеет распространенного перевода на русский язык, поэтому, с вашего позволения, я его оставлю как есть. Если есть варианты переводы — сообщайте в комментариях, очень интересно их услышать!
Автор: druf
