Статьи

Что нового в Modernizr 2

Март 2, 2019

Вторая версия Modernizr была выпущена. Modernizr, пожалуй, самая известная и наиболее широко используемая библиотека обнаружения объектов. Наряду с 40 браузерными тестами и обновленной документацией , есть несколько новых функций, которые вдохновляют разработчиков HTML5, CSS3 и JavaScript…

Условная загрузка ресурсов

yepnope.js теперь интегрирован в Modernizr. Это позволяет странице условно загружать файлы JavaScript или CSS в зависимости от поддержки одной или нескольких функций браузера. Например: 


Modernizr.load({
	test: Modernizr.geolocation,
	yep : "geo.js",
	nope: "geo-polyfill.js"
});

В этой ситуации браузер, поддерживающий геолокацию HTML5, загрузит geo.js, а браузер без поддержки загрузит geo-polyfill.js, который, возможно, содержит дополнительный код для реализации аналогичной функциональности.

Для получения дополнительной информации обратитесь к Регрессивному Расширению с Modernizr и Yepnope .

Тестирование медиа-запросов

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

Modernizr 2 позволяет тестировать медиа-запросы в JavaScript, например 

 
if (Modernizr.mq("screen and (min-width:641px)")) // do something

Это может быть полезно при загрузке дополнительных ресурсов, которые не подходят для меньшего экрана, например, большие рекламные баннеры.

Новый плагин API

Теперь вы можете написать свои собственные методы тестирования, когда функция не поддерживается Modernizr. Основной синтаксис: 

 
Modernizr.addTest(str, function);

Давайте создадим простой пример, который определяет, является ли текущее окно всплывающим: 

 
Modernizr.addTest("popup", function(){
	return !!window.opener;
});

Если наша страница выполняется во всплывающем окне, к элементу HTML применяется класс .popup, и Modernizr.popup возвращает значение true. В противном случае элемент HTML будет иметь класс .no-popup.

Обнаружение префикса поставщика

Метод .prefixed () возвращает соответствующий вариант имени с префиксом или без префикса для свойства, поддерживаемого браузером, например 

 
var t = Modernizr.prefixed("transform");

Значение t будет «WebkitTransform» в браузерах Webkit и «MozTransform» в Firefox 4. Полезные вещи.

Пользовательский инструмент сборки

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

Вы используете Modernizr? Вы начнете использовать его сейчас?

36
Share: