Modernizr
Что такое Modernizr?
Modernizr — небольшой фрагмент JavaScript-кода, который автоматически определяет наличие веб-технологий нового поколения в браузере пользователя. Вместо того, чтобы создавать чёрный список целых групп браузеров на основе «sniffing UA», Modernizr использует обнаружение функций, что позволяет легко адаптировать пользовательский опыт к фактическим возможностям браузера.
Зная возможности браузера, которые даёт Modernizr, вы можете использовать новые функции в браузерах, которые их поддерживают, и надёжно управлять ситуацией в браузерах, которые их не поддерживают.
Что такое обнаружение функций?
В тёмные времена разработки веб-приложений нам часто приходилось прибегать к UA sniffing, чтобы определить, сможет ли пользователь использовать Awesome-New-Feature™. На практике это выглядело примерно так:
if (browser === "the-one-they-make-you-use-at-work") {
getTheOldLameExperience();
} else {
showOffAwesomeNewFeature();
}
Теперь это выглядит хорошо, да? Мы используем Awesome-New-Feature™, и, конечно, она не поддерживается в старых, устаревших браузерах, верно? Возможно, это так — сегодня. Но что, если следующая версия браузера добавит поддержку Awesome-New-Feature™? Теперь вам придётся возвращаться и проверять свой код, обновляя каждый случай проверки. Это предполагает, что у вас есть время для отслеживания всех обновлений функций для каждого браузера. Хуже того, пока вы не поймёте, что это действительно работает в новейшей версии, все те пользователи на работе getTheOldLameExperience, без всякой причины.
Эти пользователи — которым для непонятной причины предоставляется некачественный веб-сайт — могут фактически зайти в настройки своего браузера и ОС и изменить название браузера (или user-agent — то, с чем сравнивается код при выполнении UA sniffing) на что угодно. В этот момент ваш код становится бессмысленным. Вы блокируете пользователей, которые могут поддерживать все ваши функции, и, возможно, пропускаете тех, кто их не поддерживает. Практически все получают плохой опыт. Должен быть лучший способ!
И он есть, и он называется Feature Detection, и выглядит примерно так:
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
Вместо того, чтобы принимать решения на основе того, находится ли пользователь в one-they-make-you-use-at-work браузере и предполагать, что это значит, что у него есть или нет доступ к Awesome-New-Feature™, обнаружение функций фактически программно проверяет, работает ли Awesome-New-Feature™ в браузере, и возвращает результат true или false. Теперь, как только ваш самый ненавистный браузер добавит поддержку Awesome-New-Feature™, ваш код будет работать там — автоматически! Больше не нужно обновлять код — никогда. Код получается похожим, но намного более понятным по своему истинному назначению.
Загрузка Modernizr
С момента последней версии Modernizr многое изменилось. Больше нет единого базового modernizr.js файла. Вместо этого просто перейдите на страницу Загрузки, как и раньше, и выберите функции, которые хотите использовать в своём проекте. Таким образом, мы можем предоставить наименьший возможный файл, что означает более быстрый сайт для вас. После этого нажмите кнопку Build , и у вас будет собственная настройка Modernizr, готовая к использованию!
Вы можете заметить, что помимо вывода Build, где вы уже много лет можете загружать настраиваемые сборки по отдельности — появились два новых варианта.
Настройка командной строки
С версии 3.0 Modernizr также поставляется со своей системой сборки в качестве модуля node на npm. Это означает, что вы можете быстро создавать несколько сборок Modernizr для разных проектов, даже не открывая новую вкладку браузера.
После установки npm вы можете установить инструмент командной строки Modernizr, выполнив
npm install -g modernizr
Теперь вы готовы начать создание своей настраиваемой сборки! Вы можете скачать файл конфигурации из меню сборки (в разделе «Настройка командной строки»). Это даст вам файл в формате JSON, который вы передадите модулю Modernizr для создания вашей настраиваемой сборки.
modernizr -c modernizr-config.json
Обратите внимание, что необходимо указать пути к файлам конфигурации командной строки. В приведенном выше примере мы запускаем команду modernizr из той же папки, в которую загрузили файл modernizr-config.json.
Настройка Grunt
Если вы не хотите вручную запускать сборку из командной строки каждый раз при обновлении сайта, у вас также есть возможность загрузить задачу Grunt, которая сделает это за вас. Этот файл конфигурации можно использовать с grunt-modernizr для автоматической сборки вашей настраиваемой версии. Просто добавьте его в свой файл Gruntfile, и вы готовы к работе.
Обратите внимание, что вам нужно будет обновить предоставленный файл конфигурации, указав пути к devFile и outputFile. Более подробную документацию по grunt-modernizr вы найдёте здесь.
Параметры конфигурации
Помимо доступных параметров и обнаружения функций, есть несколько дополнительных параметров конфигурации.
classPrefix — по умолчанию: ""
Строка, добавляемая перед каждым классом CSS.
enableJSClass — по умолчанию: true
Включить или выключить обновление .no-js на элемент корня до .js.
enableClasses — по умолчанию: true
Включить или выключить добавление Modernizr своих классов CSS.
См. следующий раздел для получения дополнительной информации об этих параметрах.
Использование Modernizr с CSS
Классы Modernizr
По умолчанию Modernizr задаёт классы для всех тестов в корневом элементе (<html> для веб-сайтов). Это означает добавление класса для каждой поддерживаемой функции и добавление его с префиксом no- при отсутствии поддержки (например, .feature или .no-feature). Это существенно упрощает добавление функций с помощью поэтапного улучшения!
Предположим, что вы включили обнаружение Modernizr для градиентов CSS. В зависимости от браузера это приведёт к появлению класса <html class="cssgradients"> или <html class="no-cssgradients">. Теперь, зная эти два состояния, вы можете написать CSS для обоих случаев.
.no-cssgradients .header {
background: url("images/glossybutton.png");
}
.cssgradients .header {
background-image: linear-gradient(cornflowerblue, rebeccapurple);
}
classPrefix
Если имя одного из классов Modernizr совпадает с именем одного из ваших существующих классов, вы можете добавить classPrefix в свою конфигурацию. Рассмотрим обнаружение hidden, которое добавляет класс .hidden, который во многих кодовых базах уже используется для, ну, скрытия вещей. Если вы хотите использовать это конкретное обнаружение, вы можете использовать следующую конфигурацию:
{
"classPrefix": "foo-",
"feature-detects": ["dom/hidden"]
}
Это означает, что вместо <html class="hidden"> вы получите <html class="foo-hidden">.
no-js
По умолчанию Modernizr переименует <html class="no-js"> в <html class="js">. Это позволяет скрывать определённые элементы, которые должны отображаться только в средах с работающим JavaScript. Если вы хотите отключить это изменение, установите enableJSClass на false в вашей конфигурации.
enableClasses
Если вы используете префикс, например, classPrefix, такой как supports-, вам нужно включить этот префикс в вашем html элементе. Т.е. supports-no-js вместо no-js.
И, наконец, если вы не хотите, чтобы Modernizr добавлял свои классы, вы можете установить enableClasses на false. Это не влияет на обновление .no-js, поэтому если вы не хотите обновлять и это, вам нужно установить enableJSClass на false в вашей конфигурации.
Использование Modernizr с JavaScript
Объект Modernizr
Modernizr отслеживает результаты всех своих проверок функций через объект Modernizr. Это означает, что для каждого теста будет добавленное соответствующее свойство. Вам просто нужно проверить истинность в вашем коде, чтобы понять, что вы хотите сделать.
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
Вспомогательные методы
Modernizr необязательно предоставляет ряд дополнительных функций, о которых вы можете узнать больше в API Modernizr.
API Modernizr
Modernizr.on
Modernizr.on(feature,cb)
Modernizr.on('flash', function( result ) {
if (result) {
// the browser has flash
} else {
// the browser does not have flash
}
});
Modernizr.addTest
Modernizr.addTest(feature,test)
Наиболее распространённый способ создания собственных проверок функций — это вызов Modernizr.addTest со строкой (предпочтительно в нижнем регистре без знаков препинания) и функцией, которую вы хотите выполнить, которая вернёт логическое значение.
Modernizr.addTest('itsTuesday', function() {
var d = new Date();
return d.getDay() === 2;
});
При выполнении вышеуказанного кода Modernizr.itstuesday будет установлено на true при вторнике, и на false в любой другой день недели. Обратите внимание, что имена функций обнаружения функций всегда записываются в нижнем регистре при добавлении в объект Modernizr. Это означает, что Modernizr.itsTuesday не существует, но Modernizr.itstuesday существует. Так как мы рассматриваем только возвращаемое значение любой функции обнаружения функций, вам не нужно фактически использовать функцию. Для простых проверок достаточно просто передать выражение, которое возвращает логическое значение.
Modernizr.addTest('hasJquery', 'jQuery' in window);
Так же, как и раньше, при выполнении вышеуказанного кода Modernizr.hasjquery будет true, если jQuery включен на странице. Не использование функции немного снижает нагрузку на браузер, а также делает код гораздо более читаемым. Наконец, у вас также есть возможность передать объект имён функций и их проверок. Это удобно, если вы хотите добавить несколько проверок за один раз. Ключи должны всегда быть строками, а значения могут быть либо булевыми, либо функциями, возвращающими булевые значения.
var detects = {
'hasjquery': 'jQuery' in window,
'itstuesday': function() {
var d = new Date();
return d.getDay() === 2;
}
}
Modernizr.addTest(detects);
В действительности нет никакой разницы между первыми методами и этим, это просто удобство, которое позволяет писать более читаемый код.
Modernizr.atRule
Modernizr.atRule(prop)
var keyframes = Modernizr.atRule('@keyframes');
if (keyframes) {
// keyframes are supported
// could be `@-webkit-keyframes` or `@keyframes`
} else {
// keyframes === `false`
}
Modernizr._domPrefixes
Modernizr._domPrefixes — это то же самое, что и _prefixes, но вместо свойств с кебаб-кейс, все свойства — с заглавной буквы.
Modernizr._domPrefixes === [ "Moz", "O", "ms", "Webkit" ];
Modernizr.hasEvent
Modernizr.hasEvent(eventName,[element])
Modernizr.hasEvent позволяет определить, поддерживает ли браузер предоставленное событие. По умолчанию эта проверка выполняется на элементе div.
hasEvent('blur') // true;
Однако, вы можете передать объект в качестве второго аргумента функции hasEvent, чтобы проверить событие на элементе, отличном от div.
hasEvent('devicelight', window) // true;
Modernizr.mq
Modernizr.mq(mq)
Modernizr.mq позволяет программно проверить, соответствует ли текущее состояние окна браузера заданному медиа-запросу.
var query = Modernizr.mq('(min-width: 900px)');
if (query) {
// the browser window is larger than 900px
}
Поддерживаются только корректные медиа-запросы, поэтому вы всегда должны включать значения со своим медиа-запросом
// good
Modernizr.mq('(min-width: 900px)');
// bad
Modernizr.mq('min-width');
Если вы хотите просто проверить, поддерживаются ли медиа-запросы в целом, используйте
Modernizr.mq('only all'); // true if MQ are supported, false if not
Обратите внимание, что если браузер не поддерживает медиа-запросы (например, старые версии IE), mq всегда будет возвращать false.
Modernizr.prefixed
Modernizr.prefixed(prop,[obj],[elem])
Modernizr.prefixed принимает строковое значение CSS в формате camelCase стиля DOM (в отличие от kebab-case стиля CSS) и возвращает (возможно, префиксную) версию этого свойства, которое фактически поддерживается браузером. Например, в старых версиях Firefox...
prefixed('boxSizing')
возвращает 'MozBoxSizing'. В новых версиях Firefox, а также в любом другом браузере, поддерживающем не-префиксную версию, будет возвращать boxSizing. Любой браузер, который вообще не поддерживает свойство, вернёт false. По умолчанию prefixed проверяется по отношению к элементу DOM. Если вы хотите проверить свойство на другом объекте, просто передайте его в качестве второго аргумента
var rAF = prefixed('requestAnimationFrame', window);
raf(function() {
renderFunction();
})
Обратите внимание, что это вернёт собственно функцию - не имя функции. Если вам нужно фактическое имя свойства, передайте false в качестве третьего аргумента
var rAFProp = prefixed('requestAnimationFrame', window, false);
rafProp === 'WebkitRequestAnimationFrame' // in older webkit
Один из распространённых случаев использования prefixed - это определение события окончания перехода, к которому нужно привязаться. Вы можете сделать что-то вроде...
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd', * Saf 6, Android Browser
'MozTransition' : 'transitionend', * only for FF < 15
'transition' : 'transitionend' * IE10, Opera, Chrome, FF 15+, Saf 7+
};
var transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
Если вам нужен аналогичный поиск, но в формате kebab-case, вы можете использовать prefixedCSS.
Modernizr.prefixedCSS
Modernizr.prefixedCSS(prop)
Modernizr.prefixedCSS подобно Modernizr.prefixed, но возвращает результат в формате с дефисами
Modernizr.prefixedCSS('transition') // '-moz-transition' in old Firefox
Поскольку он полезен только для свойств стиля CSS, он может быть протестирован только по отношению к HTMLElement. Свойства могут быть переданы как в формате camelCase стиля DOM, так и в формате kebab-case стиля CSS.
Modernizr.prefixedCSSValue
Modernizr.prefixedCSSValue(prop,value)
Modernizr.prefixedCSSValue — это способ проверки префиксных свойств CSS (например, display: -webkit-flex)
Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')
Modernizr._prefixes
Modernizr._prefixes — это внутренний список префиксов, которые мы используем для проверки в таких функциях, как prefixed и prefixedCSS. Это просто массив префиксов поставщиков в формате kebab-case, которые вы можете использовать в своём коде. Некоторые распространённые примеры включают:
var rule = Modernizr._prefixes.join('transform: rotate(20deg); ');
rule === 'transform: rotate(20deg); webkit-transform: rotate(20deg); moz-transform: rotate(20deg); o-transform: rotate(20deg); ms-transform: rotate(20deg);'
Генерация всех возможных префиксных версий свойства CSS
rule = 'display:' + Modernizr._prefixes.join('flex; display:') + 'flex';
rule === 'display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; display:-ms-flex; display:flex'
Modernizr.testAllProps
Modernizr.testAllProps(prop,[value],[skipValueTest])
testAllProps определяет, поддерживается ли заданное свойство CSS в какой-либо префиксной форме браузером.
testAllProps('boxSizing') // true
Его можно дополнительно снабдить строковым значением CSS, чтобы проверить, является ли значение свойства допустимым
testAllProps('display', 'block') // true
testAllProps('display', 'penguin') // false
В качестве третьего параметра можно передать булевое значение, чтобы пропустить проверку значения, когда детекция native (@supports) недоступна.
testAllProps('shapeOutside', 'content-box', true);
Modernizr.testProp
Modernizr.testProp(prop,[value],[useValue])
Подобно testAllProps, только он не проверяет какие-либо префиксные версии строки. Обратите внимание, что имя свойства должно быть предоставлено в формате camelCase (например, boxSizing, а не box-sizing).
Modernizr.testProp('pointerEvents') // true
Вы также можете предоставить значение в качестве необязательного второго аргумента, чтобы проверить, поддерживается ли определённое значение.
Modernizr.testProp('pointerEvents', 'none') // true
Modernizr.testProp('pointerEvents', 'penguin') // false
Modernizr.testStyles
Modernizr.testStyles(rule,callback,[nodes],[testnames])
Modernizr.testStyles принимает правило CSS и вставляет его на текущую страницу вместе с (возможно, несколькими) элементами DOM. Это позволяет проверять функции, которые нельзя обнаружить, просто проверив IDL.
Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule) {
// elem is the first DOM node in the page (by default #modernizr)
// rule is the first argument you supplied - the CSS rule in string form
addTest('widthworks', elem.style.width === '9px')
});
Если ваш тест требует нескольких узлов, вы можете включить третий аргумент, указывающий, сколько дополнительных элементов div нужно включить на странице. Дополнительные узлы вставляются как дочерние элементы elem, который возвращается в качестве первого аргумента в обратном вызове.
Modernizr.testStyles('#modernizr {width: 1px}; #modernizr2 {width: 2px}', function(elem) {
document.getElementById('modernizr').style.width === '1px'; // true
document.getElementById('modernizr2').style.width === '2px'; // true
elem.firstChild === document.getElementById('modernizr2'); // true
}, 1);
По умолчанию все дополнительные элементы имеют идентификатор modernizr[n], где n — это их индекс (например, первый дополнительный, второй в целом — #modernizr2, второй дополнительный — #modernizr3, и т. д.). Если вы хотите использовать более осмысленные идентификаторы для своей функции, вы можете указать их в четвёртом аргументе в виде массива строк
Modernizr.testStyles('#foo {width: 10px}; #bar {height: 20px}', function(elem) {
elem.firstChild === document.getElementById('foo'); // true
elem.lastChild === document.getElementById('bar'); // true
}, 2, ['foo', 'bar']);
Обнаруженные Modernizr функциями
| Обнаружение | CSS класс/JS свойство |
|---|---|
| События окружающего света | ambientlight |
Обнаруживает поддержку API, предоставляющего информацию об уровне окружающего света, определяемого датчиком света устройства, в единицах люкс. | |
| Кэш приложения | applicationcache |
|
Обнаруживает поддержку кэша приложения для хранения данных, что позволяет веб-приложениям работать в автономном режиме. API подверглось серьезной критике, и ведутся обсуждения по этому вопросу. | |
| Элемент HTML5 Audio | audio |
Обнаруживает элемент аудио. | |
| API батареи | batteryapi |
Обнаруживает поддержку API батареи для доступа к информации об уровне заряда батареи системы. | |
| Конструктор Blob | blobconstructor |
Обнаруживает поддержку конструктора Blob для создания похожих на файлы объектов неизменяемых, необработанных данных. | |
| Canvas | canvas |
Обнаруживает поддержку элемента | |
| Текст Canvas | canvastext |
Обнаруживает поддержку API текста для элементов | |
| Редактирование содержимого | contenteditable |
Обнаруживает поддержку атрибута | |
| Контекстные меню | contextmenu |
Обнаруживает поддержку пользовательских контекстных меню. | |
| Куки | cookies |
Обнаруживает, включена ли поддержка куки. | |
| Cross-Origin Resource Sharing | cors |
Обнаруживает поддержку Cross-Origin Resource Sharing: метод выполнения XMLHttpRequests между доменами. | |
| Веб-криптография | cryptography |
Обнаруживает поддержку криптографических функций, доступных в window.crypto.subtle | |
| API пользовательских элементов | customelements |
Обнаруживает поддержку API пользовательских элементов для создания пользовательских html элементов через js | |
| Обработчик пользовательского протокола | customprotocolhandler |
Обнаруживает поддержку API | |
| CustomEvent | customevent |
Обнаруживает поддержку CustomEvent. | |
| Dart | dart |
Обнаруживает родную поддержку языка программирования Dart. | |
| DataView | dataview |
Обнаруживает поддержку интерфейса DataView для чтения данных из ArrayBuffer в рамках спецификации Typed Array. | |
| Эмодзи | emoji |
Обнаруживает поддержку наборов символов эмодзи. | |
| Обработчик событий | eventlistener |
Обнаруживает родную поддержку addEventListener | |
| Ориентация EXIF | exiforientation |
|
Обнаруживает поддержку ориентации EXIF в изображениях JPEG. iOS обращает внимание на флаг ориентации EXIF в JPEG и соответственно вращает изображение. Большинство настольных браузеров просто игнорируют эти данные. | |
| Flash | flash |
Обнаруживает поддержку Flash, а также плагины для блокировки Flash | |
| События Force Touch | forcetouch |
|
Проверяет, поддерживает ли браузер обнаружение событий Force Touch. События Force Touch позволяют реализовать пользовательские поведения и взаимодействия на основе заданного давления или изменения давления со совместительной сенсорной панели. События Force Touch доступны в OS X 10.11 и более поздних версиях на устройствах с сенсорными панелями Force Touch. | |
| API полноэкранного режима | fullscreen |
Обнаруживает поддержку возможности занять весь экран пользователя текущим веб-сайтом. | |
| API GamePad | gamepads |
Обнаруживает поддержку API Gamepad для доступа к геймпадам и контроллерам. | |
| API геолокации | geolocation |
Обнаруживает поддержку API геолокации, позволяющего пользователям предоставлять свои местоположения веб-приложениям. | |
| Событие hashchange | hashchange |
Обнаруживает поддержку события | |
| Скрытая полоса прокрутки | hiddenscroll |
Обнаруживает наложение полос прокрутки (когда полосы прокрутки переполненных блоков видны). Это чаще всего встречается на мобильных устройствах и в OS X. | |
| API истории | history |
Обнаруживает поддержку API истории для управления историей сеансов браузера. | |
| HTML импорты | htmlimports |
Обнаруживает поддержку HTML импорта, функции, используемой для загрузки веб-компонентов. | |
| Совместимость IE8 | ie8compat |
Обнаруживает, является ли текущий браузер IE8 в режиме совместимости (т.е. ведет себя как IE7). | |
| IndexedDB | indexeddb |
Обнаруживает поддержку API хранилища IndexedDB на стороне клиента (окончательная спецификация). | |
| IndexedDB Blob | indexeddbblob |
Обнаруживает, может ли браузер сохранять объекты File/Blob в IndexedDB | |
| Атрибуты input | input |
|
Обнаруживает поддержку атрибутов HTML5 элемента Modernizr.input.autocomplete Modernizr.input.autofocus Modernizr.input.list Modernizr.input.max Modernizr.input.min Modernizr.input.multiple Modernizr.input.pattern Modernizr.input.placeholder Modernizr.input.required Modernizr.input.step | |
| input[search] событие search | search |
В браузерах webkit реализовано пользовательское событие | |
| Типы ввода формы | inputtypes |
|
Обнаруживает поддержку типов ввода HTML5 форм и раскрывает булевы подсвойства с результатами: Modernizr.inputtypes.color Modernizr.inputtypes.date Modernizr.inputtypes.datetime Modernizr.inputtypes['datetime-local'] Modernizr.inputtypes.email Modernizr.inputtypes.month Modernizr.inputtypes.number Modernizr.inputtypes.range Modernizr.inputtypes.search Modernizr.inputtypes.tel Modernizr.inputtypes.time Modernizr.inputtypes.url Modernizr.inputtypes.week | |
| API интернационализации | intl |
Обнаруживает поддержку API интернационализации, который позволяет легко форматировать числа и даты, а также сортировать строки на основе локали. | |
| JSON | json |
Обнаруживает родную поддержку функций обработки JSON. | |
| Лигатуры шрифтов | ligatures |
Обнаруживает поддержку открытых типов лигатур. | |
| Обратный порядок списков | olreversed |
Обнаруживает поддержку атрибута | |
| MathML | mathml |
Обнаруживает поддержку MathML для математических уравнений на веб-страницах. | |
| Канал сообщений | MessageChannel |
Обнаруживает поддержку каналов сообщений, способа коммуникации между разными контекстами просмотра, такими как фреймы iframes, worker'ы и т.д.. | |
| Уведомления | notification |
Обнаруживает поддержку API уведомлений. | |
| API видимости страницы | pagevisibility |
Обнаруживает поддержку API видимости страницы, который может использоваться для отключения ненужных действий и повышения удобства использования. | |
| API времени навигации | performance |
Обнаруживает поддержку API времени навигации для измерения производительности браузера и соединения. | |
| API указателей DOM | pointerevents |
Обнаруживает поддержку API указателей DOM, который предоставляет унифицированный интерфейс событий для устройств ввода указателей, реализованных в IE10+, Edge и Blink. | |
| API блокировки указателя | pointerlock |
Обнаруживает поддержку API блокировки указателя, позволяющего зафиксировать курсор мыши в окне браузера. | |
| postMessage | postmessage |
Обнаруживает поддержку протокола | |
| API близости | proximity |
Обнаруживает поддержку API, позволяющего пользователям получать информацию о близости от датчика близости устройства. | |
| QuerySelector | queryselector |
Обнаруживает поддержку querySelector. | |
| API управления квотой хранения | quotamanagement |
Обнаруживает возможность запросить определенное количество места для доступа к файловой системе | |
| requestAnimationFrame | requestanimationframe |
Обнаруживает поддержку API | |
| API ServiceWorker | serviceworker |
ServiceWorker (ранее Navigation Controllers) — это способ постоянного кеширования ресурсов для создания приложений, которые лучше работают в автономном режиме. | |
| SVG | svg |
Обнаруживает поддержку SVG в элементах | |
| Строки шаблонов | templatestrings |
Строки шаблонов — это строковые литералы, допускающие встроенные выражения. | |
| События касания | touchevents |
|
Указывает, поддерживает ли браузер API W3C Touch Events. Это не обязательно отражает наличие сенсорного устройства:
См. эту статью: Вы не можете определить сенсорный экран. Рекомендуется одновременно привязывать события мыши и касания/указателя — см. этот учебник HTML5 Rocks. Этот тест также вернёт | |
| Типовые массивы | типовые массивы |
|---|---|
|
Определяет поддержку манипуляций с данными двоичного формата с помощью типовых массивов в JavaScript. Не проверяет поддержку DataView; используйте | |
| Диапазон Юникода | диапазон Юникода |
| Символы Юникода | символы Юникода |
Определяет, поддерживаются ли символы Юникода в текущем документе. | |
| API данных пользователя IE | API данных пользователя IE |
Определяет поддержку API userData для сохранения данных в IE, API, аналогичное localStorage, но поддерживается с IE5. | |
| API вибрации | API вибрации |
Определяет поддержку API, предоставляющего доступ к механизму вибрации устройства, чтобы обеспечить тактильную обратную связь. | |
| HTML5 Видео | HTML5 Видео |
|
Определяет поддержку элемента видео, а также проверяет, какие типы контента он поддерживает. Подсвойства предоставляются для описания поддержки Modernizr.video // true Modernizr.video.ogg // 'probably' | |
| VML | VML |
Определяет поддержку VML. | |
| Web Intents | Web Intents |
|
Определяет нативную поддержку API Web Intents для обнаружения сервисов и межприложного взаимодействия. Chrome добавил поддержку в v19, но удалил ее снова в v24 из-за «ряда областей для разработки как в API, так и в конкретном пользовательском опыте в Chrome». В настоящее время другие браузеры ее не поддерживают, но доступен JavaScript-шимм. | |
| API веб-анимации | API веб-анимации |
Определяет поддержку API веб-анимации, позволяющего создавать CSS-анимации с помощью JavaScript. | |
| WebGL | WebGL |
| Поддержка WebSockets | Поддержка WebSockets |
| XDomainRequest | XDomainRequest |
Определяет поддержку XDomainRequest в IE9 и IE8 | |
| Атрибут a[download] | Атрибут a[download] |
При использовании на | |
| Атрибут цикла аудио | Атрибут цикла аудио |
Определяет, может ли элемент аудио автоматически перезапускаться после завершения воспроизведения. | |
| Предварительная загрузка аудио | Предварительная загрузка аудио |
Определяет, может ли аудио загружаться в фоновом режиме перед началом воспроизведения в элементе | |
| API веб-аудио | API веб-аудио |
Определяет более старый нестандартный API веб-аудио (в отличие от стандартного API AudioContext). | |
| Низкий уровень заряда батареи | Низкий уровень заряда батареи |
Разрешает разработчикам удалять ресурсоемкие CSS/JS при низком уровне заряда батареи. | |
| Поддержка смешивания слоев canvas | Поддержка смешивания слоев canvas |
Определяет, доступны ли режимы смешивания в стиле Photoshop в canvas. | |
| Поддержка canvas.toDataURL для типов данных | Поддержка canvas.toDataURL для типов jpeg, png, webp |
| Поддержка canvas winding | Поддержка canvas winding |
Определяет, поддерживаются ли правила winding, которые управляют направлением обхода пути (по часовой стрелке или против часовой стрелки). | |
| getRandomValues | getRandomValues |
Определяет поддержку метода window.crypto.getRandomValues для генерации криптографически безопасных случайных чисел. | |
| cssall | cssall |
Определяет поддержку свойства CSS | |
| CSS Анимации | CSS Анимации |
Определяет, могут ли элементы анимироваться с помощью CSS. | |
| Внешний вид | Внешний вид |
Определяет поддержку свойства CSS | |
| Фильтр заднего фона | Фильтр заднего фона |
Определяет поддержку CSS-фильтров фона, позволяющих создавать эффекты размытия фона, подобные тем, которые были введены в iOS 7. Поддержка была добавлена в iOS Safari/WebKit в iOS 9. | |
| CSS режим смешивания фона | CSS режим смешивания фона |
Определяет способность браузера комбинировать фоны с помощью режимов наложения, подобных тем, которые есть в Photoshop или Illustrator. | |
| CSS обрезка текста фона | CSS обрезка текста фона |
Определяет возможность управления тем, распространяется ли фон элемента за пределы его границы в CSS. | |
| Сокращение позиции фона | Сокращение позиции фона |
|
Определяет, можно ли использовать сокращённую запись для одновременного определения нескольких частей позиции фона элемента. Например | |
| Позиция фона XY | Позиция фона XY |
Определяет возможность управления позицией фона элемента с помощью CSS. | |
| Повтор фона | Повтор фона (space, round) |
Определяет возможность использования round и space в качестве свойств для background-repeat. | |
| Размер фона | Размер фона |
| Размер фона (cover) | Размер фона (cover) |
| Изображение границы | Изображение границы |
| Радиус границы | Радиус границы |
| Тень рамки | Тень рамки |
| Размеры блока | Размеры блока |
| CSS Calc | CSS Calc |
|
Метод, позволяющий использовать вычисленные значения для единиц длины. Например: //lem {
width: calc(100% - 3em);
}
| |
| CSS псевдокласс :checked | :checked |
| CSS единицы измерения ch | CSS единицы измерения ch |
| CSS Столбцы | CSS Столбцы |
| CSS Сетка (старая и новая) | CSS Сетка, Legacy CSS Сетка |
| Диапазон кривых Безье CSS | Диапазон кривых Безье CSS |
| CSS отображение run-in | CSS отображение run-in |
| CSS отображение таблицы | CSS отображение таблицы |
| |
| CSS обрезка текста эллипсом | CSS обрезка текста эллипсом |
| CSS.escape() | CSS.escape() |
Тестирует поддержку | |
| CSS единицы измерения ex | CSS единицы измерения ex |
| CSS Фильтры | CSS Фильтры |
| Flexbox | Flexbox |
Определяет поддержку модели гибкой компоновки, а.к.а. Flexbox, которая позволяет легко управлять порядком и размерами элементов в контейнере. | |
| Flexbox (legacy) | Flexbox (legacy) |
| Flexbox (tweener) | Flexbox (tweener) |
| Перенос строк в Flexbox | Перенос строк в Flexbox |
|
Определяет поддержку свойства CSS Это свойство присутствует как в синтаксисе 'tweener' (реализованном в IE10), так и в 'современном' синтаксисе (реализованном другими браузерами). Этот детектор вернёт if (Modernizr.flexbox && Modernizr.flexwrap) {
// Modern Flexbox with `flex-wrap` supported
}
else {
// Either old Flexbox syntax, or `flex-wrap` not supported
}
| |
| CSS псевдоселектор :focus-within | :focus-within |
| @font-face | @font-face |
| CSS сгенерированное содержимое | CSS сгенерированное содержимое |
| CSS Градиенты | CSS Градиенты |
| CSS Тонкие линии | CSS Тонкие линии |
Определяет поддержку тонких линий hidpi/retina, которые являются CSS-границами шириной меньше 1px, но физически составляют 1px на экранах hidpi. | |
| CSS цвета HSLA | CSS цвета HSLA |
| CSS переносы | CSS переносы (csshyphens, softhyphens, softhyphensfind) |
| CSS псевдокласс :invalid | :invalid |
Определяет поддержку CSS псевдокласса ':invalid'. | |
| CSS псевдоселектор :last-child | :last-child |
| CSS Маски | CSS Маски |
| CSS Средства запросов | CSS Средства запросов |
| CSS Multiple Backgrounds | multiplebgs |
|---|---|
| CSS :nth-child псевдоселектор | nthchild |
Определяет поддержку CSS псевдоселектора ':nth-child()'. | |
| CSS Object Fit | objectfit |
| CSS Opacity | opacity |
| CSS Overflow Scrolling | overflowscrolling |
| CSS Pointer Events | csspointerevents |
| CSS position: sticky | csspositionsticky |
| CSS Анимации сгенерированного содержимого | csspseudoanimations |
| CSS Переходы сгенерированного содержимого | csspseudotransitions |
| CSS Отражения | cssreflections |
| CSS Регионы | regions |
| CSS Единицы шрифтов rem | cssremunit |
| CSS Изменение размера пользовательского интерфейса | cssresize |
Проверка поддержки свойства CSS 3 UI "resize". | |
| CSS rgba | rgba |
| CSS Стилевые полосы прокрутки | cssscrollbar |
| Точки привязки прокрутки | scrollsnappoints |
Определяет поддержку точек привязки CSS. | |
| CSS Фигуры | shapes |
| CSS селектор общего потомка | siblinggeneral |
| CSS Шрифты с субпиксельной отрисовкой | subpixelfont |
| CSS Supports | supports |
| CSS псевдокласс :target | target |
Определяет поддержку CSS псевдокласса ':target'. | |
| CSS text-align-last | textalignlast |
| CSS textshadow | textshadow |
| CSS Преобразования | csstransforms |
| CSS 3D преобразования | csstransforms3d |
| CSS Преобразования уровня 2 | csstransformslevel2 |
| CSS Стиль преобразования preserve-3d | preserve3d |
Определяет поддержку | |
| CSS Переходы | csstransitions |
| CSS user-select | userselect |
| CSS псевдокласс :valid | cssvalid |
Определяет поддержку CSS псевдокласса ':valid'. | |
| Переменные шрифты OpenType | variablefonts |
| CSS единица vh | cssvhunit |
| CSS единица vmax | cssvmaxunit |
| CSS единица vmin | cssvminunit |
| CSS единица vw | cssvwunit |
| will-change | willchange |
Определяет поддержку свойства | |
| CSS wrap-flow | wrapflow |
| classList | classlist |
| createElement с атрибутами | createelementattrs,createelement-attrs |
| API dataset | dataset |
| Документ-фрагмент | documentfragment |
Добавление нескольких элементов в DOM в рамках одного вставки. | |
| Атрибут [hidden] | hidden |
Поддерживает ли браузер атрибут HTML5 [hidden]? | |
| microdata | microdata |
| DOM4 MutationObserver | mutationobserver |
Определяет доступность поддержки DOM4 MutationObserver. | |
| Пассивные обработчики событий | passiveeventlisteners |
Определяет поддержку опции passive в addEventListener. | |
| Элемент bdi | bdi |
Определяет поддержку элемента bdi, позволяющего изолировать текст от окружающих бидирециональных контекстов. | |
| Элемент datalist | datalistelem |
| Элемент details | details |
| Элемент output | outputelem |
| Элемент picture | picture |
| Элемент progress/meter | progressbar,meter |
| Элементы ruby, rp, rt | ruby |
| Тэги шаблонов | template |
| Элемент time | time |
| Элемент track и Timed Text Track | texttrackapi,track |
| Элементы неизвестного типа | unknownelements |
Поддерживает ли браузер HTML с нестандартными/новыми элементами? | |
| ES5 Array | es5array |
Проверка реализации ECMAScript 5 Array. | |
| ES5 Date | es5date |
Проверка реализации ECMAScript 5 Date. | |
| ES5 Function | es5function |
Проверка реализации ECMAScript 5 Function. | |
| ES5 Object | es5object |
Проверка реализации ECMAScript 5 Object. | |
| ES5 | es5 |
Проверка реализации всех спецификаций ECMAScript 5. | |
| ES5 Строгий режим | strictmode |
Проверка реализации строгого режима ECMAScript 5 Object. | |
| ES5 String | es5string |
Проверка реализации ECMAScript 5 String. | |
| ES5 Синтаксис | es5syntax |
Проверка поддержки синтаксиса ECMAScript 5. | |
| ES5 Неизменяемый undefined | es5undefined |
Проверка предотвращения присваивания глобальной переменной | |
| ES6 Array | es6array |
Проверка реализации ECMAScript 6 Array. | |
| ES6 Стрелочные функции | arrow |
Проверка реализации ECMAScript 6 стрелочных функций. | |
| ES6 Коллекции | es6collections |
Проверка реализации ECMAScript 6 Map, Set, WeakMap и WeakSet. | |
| ES5 String.prototype.contains | contains |
Проверка реализации ECMAScript 6 contains. | |
| ES6 Генераторы | generators |
Проверка реализации ECMAScript 6 генераторов. | |
| ES6 Math | es6math |
Проверка реализации ECMAScript 6 Math. | |
| ES6 Number | es6number |
Проверка реализации ECMAScript 6 Number. | |
| ES6 Object | es6object |
Проверка реализации ECMAScript 6 Object. | |
| ES6 Promises | promises |
Проверка реализации ECMAScript 6 Promises. | |
| ES6 String | es6string |
Проверка реализации ECMAScript 6 String. | |
| События ориентации и движения устройства | devicemotion,deviceorientation |
|
Часть аспекта доступа к устройству HTML5, та же категория, что и геолокация.
| |
| Событие onInput | oninput |
| |
| API файлов | filereader |
|
Проверка объектов, специфичных для спецификации File API W3C, без избыточности (не нужно тестировать Blob, так как предполагается, что он является прототипом объекта File). | |
| API файловой системы | filesystem |
| Атрибут input[capture] | capture |
При использовании на | |
| Атрибут input[file] | fileinput |
|
Определяет доступность input type="file" на платформе. Например, iOS < 6 и некоторые версии Android не поддерживают это. | |
| Атрибут input[directory] | directory |
При использовании на | |
| Атрибут input[form] | formattribute |
Определяет доступность input form="form_id" на платформе. Например, IE 10 (и ниже) не поддерживают это. | |
| Локализация input[type="number"] | localizednumber |
Определяет, может ли input type="number" принимать и отображать локализованные числа, например, с разделителем запятой. | |
| атрибут placeholder | placeholder |
|---|---|
Тесты для атрибута placeholder в элементах input и textarea | |
| form#requestAutocomplete() | requestautocomplete |
При использовании с input[autocomplete] для аннотации формы, form.requestAutocomplete() отображает диалоговое окно в Chrome, что ускоряет процесс оформления заказов (в настоящее время специфично для платежей). | |
| Валидация формы | formvalidation |
|
Эта реализация тестирует только поддержку интерактивной валидации формы. Для проверки валидации для определенного типа или другого ограничения, тест можно комбинировать:
| |
| атрибут iframe[sandbox] | sandbox |
Тестирование атрибута | |
| атрибут iframe[seamless] | seamless |
Тестирование атрибута | |
| атрибут iframe[srcdoc] | srcdoc |
Тестирование атрибута | |
| Анимированный PNG | apng |
Тестирование поддержки анимированных PNG. | |
| crossOrigin изображения | imgcrossorigin |
Определяет поддержку атрибута crossOrigin для изображений, который позволяет использовать изображения с других доменов внутри холста без искажения. | |
| JPEG 2000 | jpeg2000 |
Тестирование поддержки JPEG 2000. | |
| JPEG XR (расширенный диапазон) | jpegxr |
Тестирование поддержки JPEG XR. | |
| атрибут sizes | sizes |
Тестирование атрибута | |
| атрибут srcset | srcset |
Тестирование атрибута srcset для изображений. | |
| Прозрачность WebP | webpalpha |
Тестирование поддержки прозрачного WebP. | |
| Анимация WebP | webpanimation |
Тестирование поддержки анимированного WebP. | |
| Безошибочный WebP | webplossless,webp-lossless |
Тестирование поддержки безошибочного WebP без альфа-канала. | |
| WebP | webp |
|
Тестирование поддержки сжатого WebP без альфа-канала. Тестирование всех форм поддержки WebP (безошибочное, сжатое, с альфа-каналом и анимированное). Modernizr.webp // Базовая поддержка (сжатое) Modernizr.webp.lossless // Безошибочное Modernizr.webp.alpha // С альфа-каналом (как сжатое, так и безошибочное) Modernizr.webp.animation // Анимированное WebP | |
| атрибут input formaction | inputformaction |
Обнаружение поддержки атрибута formaction для элементов form input. | |
| атрибут input formenctype | inputformenctype |
Обнаружение поддержки атрибута formenctype для элементов form input, который переопределяет атрибут enctype формы. | |
| атрибут input formmethod | inputformmethod |
Обнаружение поддержки атрибута formmethod для элементов form input. | |
| атрибут input formtarget | inputformtarget |
Обнаружение поддержки атрибута formtarget для элементов form input, который переопределяет атрибут target формы. | |
| Media запросы для наведения курсора | hovermq |
Обнаружение поддержки media запросов, основанных на наведении курсора. | |
| Media запросы для указателя | pointermq |
Обнаружение поддержки media запросов, основанных на указателе. | |
| API маяков | beacon |
Определяет поддержку API, который позволяет асинхронно передавать небольшие данные HTTP от клиента к серверу. | |
| Подключение с низкой пропускной способностью | lowbandwidth |
|
Тестирование определения низкой пропускной способности с помощью Существует две итерации интерфейса Первая присутствует в Android 2.2+ и только в браузере (не в WebView)
Вторая специфицирована по адресу http://dev.w3.org/2009/dap/netinfo/ и, возможно, появится в WebKit
Неизвестные устройства считаются высокоскоростными Для более тщательного тестирования сети рассмотрите использование boomerang.js: https://github.com/bluesmoon/boomerang/ | |
| Серверные отправленные события | eventsource |
Тестирование поддержки серверных отправленных событий (eventsource). | |
| API Fetch | fetch |
Обнаружение поддержки API Fetch, современного заменителя XMLHttpRequest. | |
| XHR responseType='arraybuffer' | xhrresponsetypearraybuffer |
Тестирование XMLHttpRequest xhr.responseType='arraybuffer'. | |
| XHR responseType='blob' | xhrresponsetypeblob |
Тестирование XMLHttpRequest xhr.responseType='blob'. | |
| XHR responseType='document' | xhrresponsetypedocument |
Тестирование XMLHttpRequest xhr.responseType='document'. | |
| XHR responseType='json' | xhrresponsetypejson |
Тестирование XMLHttpRequest xhr.responseType='json'. | |
| XHR responseType='text' | xhrresponsetypetext |
Тестирование XMLHttpRequest xhr.responseType='text'. | |
| XHR responseType | xhrresponsetype |
Тестирование XMLHttpRequest xhr.responseType. | |
| XML HTTP Request Level 2 XHR2 | xhr2 |
Тестирование XHR2. | |
| script[async] | scriptasync |
Обнаружение поддержки атрибута | |
| script[defer] | scriptdefer |
Обнаружение поддержки атрибута | |
| API распознавания речи | speechrecognition |
| API синтеза речи | speechsynthesis |
| Локальное хранилище | localstorage |
| Сеансовое хранилище | sessionstorage |
| База данных Web SQL | websqldatabase |
| style[scoped] | stylescoped |
Поддержка атрибута | |
| SVG как источник для тега <img> | svgasimg |
| SVG клип-маски | svgclippaths |
|
Обнаружение поддержки клип-масок в SVG (только для SVG, не для HTML-содержимого). См. это обсуждение по поводу применения SVG клип-масок к HTML-содержимому. | |
| SVG фильтры | svgfilters |
| SVG foreignObject | svgforeignobject |
Обнаружение поддержки тега foreignObject в SVG. | |
| Встроенный SVG | inlinesvg |
Обнаружение поддержки встроенного SVG в HTML (не в XHTML). | |
| SVG анимация SMIL | smil |
| textarea maxlength | textareamaxlength |
Обнаружение поддержки атрибута maxlength для элемента textarea. | |
| Blob URL | bloburls |
Обнаружение поддержки создания Blob URL. | |
| Data URI | datauri |
|
Обнаружение поддержки Data URI. Предоставляет подсвойство для отчётности о поддержке Data URI размером более 32 КБ: Modernizr.datauri // true Modernizr.datauri.over32kb // false in IE8 | |
| Парсер URL | urlparser |
Проверка реализации браузером конструктора URL для парсинга URL. | |
| API URLSearchParams | urlsearchparams |
Обнаружение поддержки API, предоставляющего утилитарные методы для работы с строкой запроса URL. | |
| Автовоспроизведение видео | videoautoplay |
Проверка поддержки атрибута autoplay для элемента video. | |
| crossOrigin видео | videocrossorigin |
Обнаружение поддержки атрибута crossOrigin для тега видео. | |
| Атрибут циклического воспроизведения видео | videoloop |
| Атрибут предварительной загрузки видео | videopreload |
| Расширения WebGL | webglextensions |
|
Обнаружение поддержки расширений OpenGL в WebGL. Это if (Modernizr.webglextensions) {
// WebGL extensions API supported
}
if ('OES_vertex_array_object' in Modernizr.webglextensions) {
// Vertex Array Objects extension supported
}
| |
| RTC канал данных | datachannel |
Обнаружение RTCDataChannel API, который позволяет передавать данные напрямую между участниками. | |
| getUserMedia | getusermedia |
Обнаружение поддержки нового API getUserMedia на основе Promise. | |
| RTC соединение поровну | peerconnection |
| Бинарные WebSockets | websocketsbinary |
| Кодирование/декодирование Base64 | atobbtoa |
Обнаружение поддержки API WindowBase64 (window.atob && window.btoa). | |
| Оконный фрейм | framed |
Проверяет, является ли страница iframe. | |
| matchMedia | matchmedia |
|---|---|
Определяет поддержку matchMedia. | |
| Рабочие потоки из Blob URI | blobworkers |
Определяет поддержку создания Web Workers из Blob URI. | |
| Рабочие потоки из Data URI | dataworkers |
Определяет поддержку создания Web Workers из Data URI. | |
| Общие рабочие потоки | sharedworkers |
Определяет поддержку API | |
| Объекты Transferables | transferables |
Определяет, могут ли веб-рабочие потоки использовать объекты | |
| Веб-рабочие потоки | webworkers |
Определяет поддержку базового API | |
© 2009–2020 The Modernizr team
Licensed under the MIT License.
https://modernizr.com/docs/
