Модернизр
 | |
| Оригинальный автор(ы) | Фарук Атеш |
|---|---|
| Разработчик(и) | Фарук Атеш, Пол Айриш, Алекс Секстон, Райан Седдон, Патрик Кеттнер, Стю Кокс, Ричард Эррера и другие участники |
| Первоначальный выпуск | 1 июля 2009 г [1] |
| Стабильная версия | 3.12
/ 15 февраля 2022 г [2] |
| Репозиторий | |
| Написано в | JavaScript |
| Тип | библиотека JavaScript |
| Лицензия | Массачусетский технологический институт ; у него была двойная лицензия MIT - BSD. с 14 июня 2010 г. [3] по 15 сентября 2012 г. [4] |
| Веб-сайт | современный |
Modernizr — это JavaScript библиотека пользователя , которая определяет функции, доступные в браузере . Это позволяет веб-страницам избегать неподдерживаемых функций, сообщая пользователю, что его браузер не поддерживается, или загружая полифилл . Modernizr стремится обеспечить обнаружение функций последовательным и простым в использовании способом, который препятствует использованию подверженного сбоям анализа браузера . [5]
Обзор
[ редактировать ]Многие функции HTML5 и CSS 3 уже реализованы как минимум в одном крупном браузере . [ нужна ссылка ] Modernizr определяет, реализовала ли браузер пользователя данную функцию. [6] [7] [8] [9] Это позволяет разработчикам использовать преимущества новых функций, поддерживаемых браузерами, и в то же время создавать запасные варианты для браузеров, которые не поддерживаются. И в 2010, и в 2011 году Modernizr получил награду .net как «Приложение года с открытым исходным кодом», а в 2011 году один из ее ведущих разработчиков, Пол Айриш , получил награду «Разработчик года». [10]
Функция
[ редактировать ]Modernizr использует обнаружение функций, а не проверку свойств браузера, чтобы определить, что браузер может и не может делать. Он считает обнаружение функций более надежным, поскольку один и тот же механизм рендеринга не обязательно поддерживает одни и те же функции в двух разных браузерах, использующих этот механизм. Кроме того, некоторые пользователи меняют строку своего пользовательского агента, чтобы обойти веб-сайты, которые блокируют функции для браузеров с определенными настройками пользовательского агента, несмотря на то, что их браузеры имеют необходимые возможности.
Modernizr предлагает тесты для более чем 250 функций, а затем создает объект JavaScript (с именем «Modernizr»), который содержит результаты этих тестов в виде логических свойств. Он также добавляет классы к элементу HTML в зависимости от того, какие функции поддерживаются, а какие нет.
Чтобы выполнить тесты на обнаружение функций, Modernizr часто создает элемент, устанавливает для этого элемента определенную инструкцию стиля, а затем немедленно пытается получить этот параметр. Веб-браузеры , понимающие инструкцию, вернут что-то разумное; браузеры, которые этого не понимают, не вернут ничего или «неопределено». Modernizr использует результат, чтобы оценить, поддерживается ли эта функция веб-браузером. [ нужна ссылка ]
Многие тесты в документации сопровождаются небольшими примерами кода, иллюстрирующими, как конкретный тест можно использовать в рабочем процессе веб-разработки .
Бег
[ редактировать ]При запуске он создает глобальный объект под названием Modernizr, который содержит набор логических свойств для каждой функции, которую он может обнаружить. Например, если браузер поддерживает API холста, свойство Modernizr.canvas будет иметь значение true. Если браузер не поддерживает API холста, свойство Modernizr.canvas будет иметь значение false:
if (Modernizr.canvas) {
// Let's draw some shapes...!
} else {
// No native canvas support available :(
}
Ограничения
[ редактировать ]Библиотека представляет собой просто метод обнаружения функций и, как таковая, не добавляет недостающих функций в старые браузеры . [11]
Примеры
[ редактировать ]Пример Modernizr JavaScript
[ редактировать ]<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Modernizr - JavaScript Example</title>
</head>
<body>
<p id="result">Modernizr won't run if JavaScript is not enabled.</p>
</body>
<script src="path/to/modernizr.js"></script>
<script>
elem = document.getElementById('result');
if (Modernizr.websockets) {
elem.innerHTML = 'Your browser supports WebSockets.';
} else {
elem.innerHTML ='Your browser does not support WebSockets.' ;
}
</script>
</html>
Пример CSS
[ редактировать ]<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Modernizr - CSS Example</title>
<style>
.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; }
</style>
</head>
<body>
<p class="wsno">Your browser does not support WebSockets.</p>
<p class="wsyes">Your browser supports WebSockets.</p>
<p class="no-js">Modernizr won’t run if javascript is not enabled.</p>
</body>
<script src="path/to/modernizr.js"></script>
</html>
См. также
[ редактировать ]
Ссылки
[ редактировать ]- ^ Фарук Атеш (1 июля 2009 г.). «С гордостью анонсируем модернизацию» .
- ^ «Релизы · Модернизр/Модернизр» . Гитхаб . Проверено 7 сентября 2022 г.
- ^ «Modernizr 1.5: новые возможности, добавлены модульные тесты» . Модернизр. 14 июня 2010 г. Проверено 30 июля 2013 г.
- ^ «Удалить лицензию BSD и улучшить файл readme» . Гитхаб . 15 сентября 2012 года . Проверено 30 июля 2013 г.
- ^ «Что такое Модернизр» . Проверено 25 декабря 2019 г.
- ^ Фарук Атеш (22 июня 2010 г.). «Использование преимуществ HTML5 и CSS3 с помощью Modernizr» .
- ^ Гил Финк (10 января 2011 г.). «Обнаружение функций HTML5 с помощью Modernizr» .
- ^ Дэниел Селлергрен (февраль 2011 г.). «Использование Modernizr для определения поддержки HTML5 CSS3» . Архивировано из оригинала 22 августа 2013 г.
- ^ Дэвид Пауэрс. «Использование Modernizr для обнаружения поддержки браузерами HTML5 и CSS3» .
- ^ Награды .net 2011: №7. Приложение года с открытым исходным кодом: Modernizr 2.0, № 16. Разработчик года: Пол Айриш
- ^ «HTML 5 элементов в IE» . Проверено 14 июня 2012 г.