Modernizr - Modernizr

Modernizr
Modernizr logo.svg
Оригинальный автор (ы)Фарук Атеш
Разработчики)Фарук Атеш, Пол Айриш, Алекс Секстон, Райан Седдон, Патрик Кеттнер, Стю Кокс, Ричард Эррера и участники
изначальный выпуск1 июля 2009 г.; 11 лет назад (2009-07-01)[1]
Стабильный выпуск
3.11.3 / 28 сентября 2020 г.; 2 месяца назад (2020-09-28)[2]
Репозиторий
Отредактируйте это в Викиданных
Написано вJavaScript
ТипБиблиотека JavaScript
ЛицензияМассачусетский технологический институт; это было с двойной лицензией MIT-BSD с 14 июня 2010 г.[3] до 15 сентября 2012 г.[4]
Интернет сайтmodernizr.com

Modernizr это JavaScript библиотека который определяет функции, доступные в пользовательском браузер. Это позволяет веб-страницам избегать неподдерживаемых функций, сообщая пользователю, что его браузер не поддерживается, или загружая полифилл. Modernizr стремится предоставить обнаружение функции последовательным и простым в использовании способом, который препятствует использованию склонных к сбоям обнюхивание браузера.[5]

Обзор

Много HTML5 и CSS 3 функции уже реализованы по крайней мере в одном из основных браузер.[6] Modernizr определяет, реализовал ли браузер пользователя данную функцию.[7][8][9][10] Это позволяет разработчикам использовать преимущества новых функций, поддерживаемых браузерами, но при этом создавать резервные варианты для браузеров, которые не поддерживают их. И в 2010, и в 2011 году Modernizr выигрывал награду .net как приложение года с открытым исходным кодом, а в 2011 году один из его ведущих разработчиков, Пол Айриш, получил награду «Разработчик года».[11]

Функция

Modernizr использует обнаружение функций, а не проверку свойств браузера, чтобы определить, что браузер может делать, а что нет. Он считает обнаружение функций более надежным, поскольку один и тот же механизм рендеринга не обязательно поддерживает одни и те же вещи в двух разных браузерах, использующих этот механизм. Кроме того, некоторые пользователи изменяют строку своего пользовательского агента, чтобы обойти веб-сайты, которые блокируют функции для браузеров с определенными настройками пользовательского агента, несмотря на то, что их браузеры имеют необходимые возможности.

Modernizr предлагает тесты для более чем 250 функций, а затем создает JavaScript объект (названный "Modernizr"), который содержит результаты этих тестов как логический характеристики. Он также добавляет классы в HTML элемент в зависимости от того, какие функции поддерживаются, а какие нет.

Чтобы выполнить тесты на обнаружение функций, Modernizr часто создает элемент, устанавливает для этого элемента конкретную инструкцию стиля, а затем немедленно пытается получить этот параметр. Веб-браузеры которые поймут, что инструкция вернет что-нибудь толковое; браузеры, которые его не понимают, не вернут ничего или «undefined». Modernizr использует результат, чтобы оценить, поддерживается ли эта функция веб-браузером.[нужна цитата ]

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

Бег

При запуске он создает глобальный объект под названием Modernizr, который содержит набор логических свойств для каждой функции, которую он может обнаружить. Например, если браузер поддерживает API холста, свойство Modernizr.canvas будет иметь значение true. Если браузер не поддерживает Canvas API, свойство Modernizr.canvas будет иметь значение false:

если (Modernizr.холст) {  // Нарисуем фигуры ...!} еще {  // Нет поддержки собственного холста :(}

Ограничения

Библиотека - это просто метод обнаружения функций и, как таковая, не добавляет недостающих функций в старые версии. браузеры.[12]

Примеры

Пример Modernizr JavaScript

<!DOCTYPE html><html учебный класс="no-js" язык="en"><голова>  <заглавие>Modernizr - пример JavaScript</заглавие></голова><тело>  <п я бы="результат">Modernizr не будет работать, если не включен JavaScript.</п></тело>  <сценарий src="путь / к / modernizr.js"></сценарий>  <сценарий>    элем = документ.getElementById('результат');    если (Modernizr.веб-сокеты) {        элем.innerHTML = «Ваш браузер поддерживает WebSockets».;    } еще {        элем.innerHTML =«Ваш браузер не поддерживает WebSockets». ;    }  </сценарий></html>

Пример CSS

<!DOCTYPE html><html учебный класс="no-js" язык="en"><голова>	<заглавие>Modernizr - пример CSS</заглавие>	<стиль>		.wsno,		.wsyes,		.js .нет-js { отображать: никто; }		/ * Modernizr добавит один из следующих классов в элемент HTML на основе                   поддерживается ли WebSockets браузером пользователя. * /		.без веб-сокетов .wsno,		.веб-сокеты .wsyes { отображать: блокировать; }	</стиль></голова><тело>	<п учебный класс="wsno">Ваш браузер не поддерживает WebSockets.</п>	<п учебный класс="wsyes">Ваш браузер поддерживает WebSockets.</п>	<п учебный класс="no-js">Modernizr не запустится, если не включен javascript.</п></тело><сценарий src="путь / к / modernizr.js"></сценарий></html>

Смотрите также

Рекомендации

  1. ^ Фарук Атеш (1 июля 2009 г.). "С гордостью анонсируем Modernizr".
  2. ^ «Релизы · Модернизр / Модернизр». Получено 28 сентября 2020.
  3. ^ «Modernizr 1.5: новые функции, добавлены модульные тесты». Modernizr. 14 июня 2010 г.. Получено 30 июля 2013.
  4. ^ «Удалите лицензию BSD и улучшите readme». GitHub. 15 сентября 2012 г.. Получено 30 июля 2013.
  5. ^ «Что такое Модернизр». Получено 25 декабря 2019.
  6. ^ «Шпаргалка по CSS3 для начинающих».
  7. ^ Фарук Атеш (22 июня 2010 г.). «Использование HTML5 и CSS3 с помощью Modernizr».
  8. ^ Гил Финк (10 января 2011 г.). «Обнаружение функций HTML5 с помощью Modernizr».
  9. ^ Даниэль Селлергрен (февраль 2011 г.). «Использование Modernizr для определения поддержки HTML5 CSS3». Архивировано из оригинал на 22.08.2013.
  10. ^ Дэвид Пауэрс. «Использование Modernizr для определения поддержки браузерами HTML5 и CSS3».
  11. ^ .net Awards 2011: # 7. Приложение года с открытым исходным кодом: Modernizr 2.0, # 16. Разработчик года: Пол Айриш
  12. ^ «Элементы HTML 5 в IE». Получено 2012-06-14.

внешняя ссылка