Если вы стремитесь сделать свои сайты и веб-приложения как можно более компактными, то Modernizr придется весьма кстати, поскольку он позволяет условно загружать ресурсы (как CSS-, так и JavaScript-файлы). Таким образом, вместо того, чтобы обременять страницы всеми полизаполнениями, которые могут потребоваться пользователю (независимо от того, действительно ли он в них нуждается), мы сможем загружать только полизаполнения, которые действительно необходимы ему. Это позволит обеспечить как можно большую компактность наших страниц и наименьшее время их загрузки для всех без исключения пользователей.
Итак, добавив библиотеку Modernizr в теги <head> страниц, используем ее для обеспечения условной загрузки нашего полизаполнения Respond. js только в том случае, если конкретный браузер не будет поддерживать CSS3-медиазапросы (например, Internet Explorer версий 6, 7 и 8).
Modernizr включает JavaScript-микробиблиотеку под названием YepNope. js (http://yepnopejs.com/). Этот инструмент использует простой формат:
Modernizr. load ({
Test: Modernizr. mqConly all’), nope: ‘js/respond. min. js’
});
Сначала вызывается часть Modernizr, которая загружает ресурсы: Modernizr. load ({
Сюда входит тест, а также несколько возможных действий в зависимости от его результата. В данном примере мы спрашиваем, поддерживает ли браузер медиазапросы:
Test: Modernizr. mq (‘only all’),
Если окажется, что он не поддерживает их, то соответствующий ресурс должен будет загрузить наш файл respond. min. js:
Nope: ‘js/respond. min. js’
Здесь only all — это эквивалент вопроса «поддерживает ли данный браузер медиазапросы?» Устаревшие версии Internet Explorer всегда будут проваливать этот тест, что повлечет за собой nope и, следовательно, загрузку соответствующего ресурса. Благодаря этому respond. min. js будет загружаться только при необходимости.
Мы также можем выбрать загрузку дополнительных файлов:
Modernizr. load ({
Test: Modernizr. mqConly all’),
Nope: [‘js/respond. min. js, ‘css/extra. css’]
});
В данном примере для добавления файлов respond. min. js и extra. css используется массив. Мы можем выбрать загрузку CSS-кода таким путем, чтобы обеспечить поддержку отдельных стилей, необходимых только при наличии или отсутствии определенных функций. Не стоит забывать, что также можно загружать разные ресурсы в зависимости от результатов тестирования:
Modernizr. load ({
Test: Modernizr. mq (‘only all’), yep: ‘js/pass. js’,
Nope: ‘js/respond. min. js'[‘fail-polyfill. js, ‘fail. css’], both: ‘js/for-all. js’
});
Здесь мы загружаем один файл, если браузер проходит тест, два других (в массиве), если он его проваливает, и последний файл, если браузер проходит или проваливает тест.
Тесты для условной загрузки кода можно разместить в отдельном JavaScript-файле. В данном случае я присвоил своему файлу имя conditional. js и сохранил его в папке js наряду с modernizr. js и respond. min. js. Таким образом, тег <head> теперь выглядит так, как показано далее:
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1"
/>
<title>And the winner isn’t…</title>
<link href="css/main. css" rel="stylesheet" />
<script src="js/modernizr. js"></script>
<script src="js/conditional. js"></script>
</head>
Обратите внимание, что я удалил respond. min. js из <head>, поскольку теперь он загружается условно по мере необходимости.
ПРИМЕЧАНИЕ.
Дополнительная документация со сведениями об условной загрузке ресурсов с помощью Modernizr доступна по адресу http://www.modernizr.com/docs/#load.
ГДЕ МОЖНО НАЙТИ ПОЛИЗАПОЛНЕНИЯ.
Помните, что на сайте Github имеется отличный репозиторий полезных полизаполнений: Https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills.
Добавить комментарий