Войти
 | |
| Оригинальный автор (ы) | Фарук Атеш |
|---|---|
| Разработчики) | Фарук Атеш, Пол Айриш, Алекс Секстон, Райан Седдон, Патрик Кеттнер, Стю Кокс, Ричард Эррера и участники |
| изначальный выпуск | 1 июля 2009 г. ; 11 лет назад ( 2009-07-01) |
| Стабильный выпуск | 3.11.3 / 28 сентября 2020 г. ; 1 день назад ( 2020-09-28) |
| Репозиторий |  |
| Написано в | JavaScript |
| Тип | Библиотека JavaScript |
| Лицензия | MIT ; он имел двойную лицензию MIT- BSD с 14 июня 2010 г. по 15 сентября 2012 г. |
| Интернет сайт | modernizr.com |
Modernizr - это библиотека JavaScript, которая определяет функции, доступные в браузере пользователя. Это позволяет веб-страницам избегать неподдерживаемых функций, информируя пользователя о том, что их браузер не поддерживается, или загружая полифил. Modernizr стремится обеспечить обнаружение функций последовательным и простым в использовании способом, который препятствует использованию склонного к сбоям анализа браузера.
Многие функции HTML5 и CSS 3 уже реализованы как минимум в одном крупном браузере. Modernizr определяет, реализовал ли браузер пользователя данную функцию. Это позволяет разработчикам использовать преимущества новых функций, поддерживаемых браузерами, но при этом создавать резервные варианты для браузеров, которые не поддерживают их. И в 2010, и в 2011 году Modernizr выигрывал награду.net за приложение года с открытым исходным кодом, а в 2011 году один из его ведущих разработчиков, Пол Айриш, получил награду «Разработчик года».
Modernizr использует обнаружение функций, а не проверку свойств браузера, чтобы определить, что браузер может делать, а что нет. Он считает обнаружение функций более надежным, поскольку один и тот же механизм рендеринга не обязательно поддерживает одни и те же вещи в двух разных браузерах, использующих этот механизм. Кроме того, некоторые пользователи изменяют строку своего пользовательского агента, чтобы обойти веб-сайты, которые блокируют функции для браузеров с определенными настройками пользовательского агента, несмотря на то, что их браузеры имеют необходимые возможности.
Modernizr предлагает тесты для более чем 250 функций, а затем создает объект JavaScript (названный «Modernizr»), который содержит результаты этих тестов в виде логических свойств. Он также добавляет классы к элементу HTML в зависимости от того, какие функции поддерживаются, а какие нет.
Чтобы выполнить тесты на обнаружение функций, Modernizr часто создает элемент, устанавливает для этого элемента конкретную инструкцию стиля, а затем немедленно пытается получить этот параметр. Веб-браузеры, понимающие инструкцию, вернут что-нибудь дельное; браузеры, которые его не понимают, не вернут ничего или «undefined». Modernizr использует результат, чтобы оценить, поддерживается ли эта функция веб-браузером.
Многие тесты в документации приходят с небольшой пример кода, чтобы проиллюстрировать, как специфическое испытание можно использовать в веб - разработки рабочего процесса.
При запуске он создает глобальный объект под названием Modernizr, который содержит набор логических свойств для каждой функции, которую он может обнаружить. Например, если браузер поддерживает API холста, свойство Modernizr.canvas будет иметь значение true. Если браузер не поддерживает Canvas API, свойство Modernizr.canvas будет иметь значение false:
if (Modernizr.canvas) { // Let's draw some shapes...! } else { // No native canvas support available :( } Библиотека - это просто метод обнаружения функций и, как таковая, не добавляет недостающих функций в старые браузеры.
lt;!DOCTYPE htmlgt; lt;html class="no-js" lang="en"gt; lt;headgt; lt;titlegt;Modernizr - JavaScript Examplelt;/titlegt; lt;/headgt; lt;bodygt; lt;p gt;Modernizr won't run if JavaScript is not enabled.lt;/pgt; lt;/bodygt; lt;script src="path/to/modernizr.js"gt;lt;/scriptgt; lt;scriptgt; elem = document.getElementById('result'); if (Modernizr.websockets) { elem.innerHTML = 'Your browser supports WebSockets.'; } else { elem.innerHTML ='Your browser does not support WebSockets.' ; } lt;/scriptgt; lt;/htmlgt; lt;!DOCTYPE htmlgt; lt;html class="no-js" lang="en"gt; lt;headgt; lt;titlegt;Modernizr - CSS Examplelt;/titlegt; lt;stylegt;.wsno,.wsyes,.js.no-js { display: none; } /* Modernizr will add one of the following classes to the HTML element based on whether or not WebSockets is supported by the user's browser. */.no-websockets.wsno,.websockets.wsyes { display: block; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;p class="wsno"gt;Your browser does not support WebSockets.lt;/pgt; lt;p class="wsyes"gt;Your browser supports WebSockets.lt;/pgt; lt;p class="no-js"gt;Modernizr won’t run if javascript is not enabled.lt;/pgt; lt;/bodygt; lt;script src="path/to/modernizr.js"gt;lt;/scriptgt; lt;/htmlgt; 