Обнаружение функций включает определение того, поддерживает ли браузер определённый блок кода, и выполнение другого кода в зависимости от того, поддерживает ли он или нет, так что браузер всегда может обеспечить работу, а не сбой / ошибку в некоторых браузерах. В этой статье подробно описывается, как написать собственное простое обнаружение функций, как использовать библиотеку для ускорения реализации, а также встроенные функции для обнаружения функций, такие как@supports.

Концепция обнаружения функций

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

Давайте подведём итоги и посмотрим на пример, который мы затронули в нашем документеРешение самых распространённых проблем JavaScript—Использование геолокации (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойствоgeolocation, доступное на глобальном объектеNavigator. Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:

if ("geolocation" in navigator) {  navigator.geolocation.getCurrentPosition(function (position) {    // show the location on a map, perhaps using the Google Maps API  });} else {  // Give the user a choice of static maps instead perhaps}

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

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

Написание ваших собственных тестов обнаружения функций

В этом разделе мы рассмотрим реализацию ваших собственных тестов обнаружения функций как в CSS, так и в JavaScript.

CSS

Вы можете написать тесты для функций CSS, протестировав существованиеelement.style.property (например,paragraph.style.transform) в JavaScript.

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

Давайте реализуем что-то, что демонстрирует это, хотя мы пока оставим это простым.

1. Начните с создания локальных копий наших файловcss-feature-detect.html,flex-layout.css,float-layout-css, иbasic-styling.css. Сохраните их в новой дирекции.

2. Мы добавим HTML5 Shiv и в наш пример, чтобы семантические элементы HTML5 правильно стилизовались в старых версиях IE. Загрузите последнюю версию (См.Ручная установка), разархивируйте ZIP, скопируйте файлыhtml5shiv-printshiv.min.js иhtml5shiv.min.js в ваш пример дирекции и создайте ссылку на один из файлов, поместив следующее в свой<title> элемент:

   <script src="html5shiv.min.js"></script>

3. Посмотрите ваши примеры CSS-файлов - вы увидите, чтоbasic-styling.css обрабатывает все стили, которые мы хотим дать каждому браузеру, тогда как два других CSS-файла содержат CSS, который мы хотим выборочно применять к браузеру в зависимости от их уровни поддержки. Вы можете посмотреть на различные эффекты этих двух файлов, вручную изменив CSS-файл, на который ссылается второй элемент<link>, но давайте вместо этого реализуем некоторый JavaScript, чтобы автоматически заменять их при необходимости.

4. Сначала удалите содержимое атрибутаhref второго элемента<link> . Мы будем заполнять это динамически позже.

5. Затем добавьте элемент<script></script> внизу вашего контекста (непосредственно перед закрывающим тегом</body>).

6. Дайте ему следующее содержание:

   js

   const conditional = document.querySelector(".conditional");const testElem = document.createElement("div");if (  testElem.style.flex !== undefined &&  testElem.style.flexFlow !== undefined) {  conditional.setAttribute("href", "flex-layout.css");} else {  conditional.setAttribute("href", "float-layout.css");}

Здесь мы берём ссылку на второй элемент<link> и создаём элемент<div> как часть нашего теста. В нашем условном выражении мы проверяем, что свойстваflex иflex-flow существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объектаHTMLElement.style, используют нижний горбатый регистр, а не дефисы, для разделения слов.

Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, применённый к странице, если браузер поддерживает современный flexbox, и макет float, если нет.

@supports

Недавно, в CSS появился собственный механизм обнаружения собственных функций — @-правило@supports. Это работает аналогичномедиавыражениям (см. ТакжеАдаптивные проблемы дизайна) — за исключением того, что вместо выборочного применения CSS в зависимости от медиа-функции, такой как разрешение, ширина экрана или соотношение сторон, выборочно применяется CSS в зависимости от того, поддерживается ли функция CSS.

Например, мы могли бы переписать наш предыдущий пример для использования@supports — см.supports-feature-detect.html иsupports-styling.css. Если вы посмотрите на последнее, вы увидите пару блоков@supports например:

@supports (flex-flow: row) and (flex: 1) {  main {    display: flex;  }  main div {    padding-right: 4%;    flex: 1;  }  main div:last-child {    padding-right: 0;  }}

Этот блок применяет правило CSS только в том случае, если текущий браузер поддерживает объявления какflex-flow: row так иflex: 1. Чтобы каждое условие работало, вам необходимо включить полное объявление (а не просто имя свойства) и НЕ включать точку с запятой в конце.

@supports также имеет логикуOR иNOT — другой блок применяет разметку с плавающей запятой, если свойства flexbox недоступны:

@supports not (flex-flow: row) and (flex: 1) {  /* rules in here */}

Это может выглядеть намного удобнее, чем в предыдущем примере - мы можем выполнять все наши функции обнаружения в CSS, JavaScript не требуется, и мы можем обрабатывать всю логику в одном файле CSS, сокращая HTTP-запросы. Проблема здесь в поддержке браузера —@supports вообще не поддерживается в IE, а поддерживается только в самых последних версиях Safari / iOS WebKit (9 + / 9.2 +), тогда как версия JavaScript должна работать в гораздо более старых браузерах (вероятно, назад до IE8 или 9, хотя в более старых версиях IE будут возникать дополнительные проблемы, такие как отсутствие поддержкиDocument.querySelector и наличие испорченной блочной модели).

JavaScript

Мы уже видели пример теста на обнаружение функций JavaScript ранее. Как правило, такие тесты выполняются по одному из следующих общих шаблонов:

СтраницаПогружение в HTML5 Обнаружение функций HTML5 содержит гораздо больше полезных тестов для обнаружения функций, помимо перечисленных выше, и вы можете найти тест обнаружения функций для большинства вещей, выполнив поиск «обнаружение поддержки для ВАШИ-ФУНКЦИИ-ЗДЕСЬ» в своей любимой поисковой системе. Имейте в виду, однако, что некоторые функции, как известно, не обнаруживаются - см. список ModernizrНеобнаруживаемые.

matchMedia

Мы также хотели упомянуть функцию JavaScriptWindow.matchMedia на этом этапе. Это свойство, которое позволяет вам запускать тесты медиавыражений внутри JavaScript. Это выглядит так:

if (window.matchMedia("(max-width: 480px)").matches) {  // run JavaScript in here.}

В качестве примера, наша демо версияSnapshot использует её для выборочного применения библиотеки Brick JavaScript и её использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибутmedia,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:

<link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)">

Затем мы используемmatchMedia() в JavaScript несколько раз, чтобы запускать функции навигации Brick только в том случае, если мы на маленьком экране (в более широких экранах все можно увидеть сразу, поэтому нам не нужно переходить между различными изображениями).

if (window.matchMedia("(max-width: 480px)").matches) {  deck.shuffleTo(1);}

Использование Modernizr для реализации обнаружения функций

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

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

1. Нажав на ссылкуСборка разработки.
2. Нажав на большую розовую кнопкуBuild на появившейся странице.
3. Нажав на верхнюю ссылкуDownload в появившемся диалоговом окне.

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

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

CSS

Давайте посмотрим, как Modernizr работает с точки зрения избирательного применения CSS.

1. Во-первых, создайте копиюsupports-feature-detect.html иsupports-styling.css. Сохраните их какmodernizr-css.html иmodernizr-css.css.

2. Обновите ваш элемент<link> в своём HTML-коде, чтобы он указывал на правильный файл CSS (также следует обновить элемент<title> на что-то более подходящее!):

   html

   <link href="modernizr-css.css" rel="stylesheet" />

3. Над этим элементом<link> добавьте элемент<script>, чтобы применить библиотеку Modernizr к странице, как показано ниже. Это должно быть применено к странице перед любым CSS (или JavaScript), который может её использовать.

   html

   <script src="modernizr-custom.js"></script>

4. Теперь отредактируйте открывающий тег<html>, чтобы он выглядел так:

   html

   <html></html>

На этом этапе попробуйте загрузить свою страницу, и вы получите представление о том, как Modernizr работает с функциями CSS. Если вы посмотрите на инспектор DOM инструментов разработчика вашего браузера, вы увидите, что Modernizr обновил значение вашего<html>class следующим образом:

<html/ru/docs/Web/CSS/Reference/Properties/flex-wrap">flex-wrap, которого нет в некоторых реализациях.
Примечание:Вы можете найти список того, что означают все имена классов — см.Функции, обнаруженные Modernizr.
Далее, давайте обновим наш CSS, чтобы использовать Modernizr вместо@supports. Перейдите вmodernizr-css.css, и замените два блока@supports следующим:
css
/* Properties for browsers with modern flexbox */.flexbox main {  display: flex;}.flexbox main div {  padding-right: 4%;  flex: 1;}.flexbox main div:last-child {  padding-right: 0;}/* Fallbacks for browsers that don't support modern flexbox */.no-flexbox main div {  width: 22%;  float: left;  padding-right: 4%;}.no-flexbox main div:last-child {  padding-right: 0;}.no-flexbox footer {  clear: left;}
Так как же это работает? Поскольку все эти имена классов были помещены в элемент<html> вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определённые селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (no-flexbox).
Примечание:Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо.
Примечание:Если у вас возникли проблемы с выполнением этого, проверьте ваш код по файламmodernizr-css.html иmodernizr-css.css (см. Также этот запуск в реальном времени).

JavaScript

Modernizr также одинаково хорошо подготовлен для реализации функций обнаружения JavaScript. Это достигается за счёт того, что глобальный объектModernizr становится доступным для страницы, к которой он применяется, и содержит результаты функции, определяемой как свойстваtrue/false.

Например, загрузите наш примерmodernizr-css.html в своём браузере, затем попробуйте перейти на консоль JavaScript и набратьModernizr., а после некоторые из этих имён классов (они тоже здесь одинаковы). Например:

Modernizr.flexboxModernizr.websqldatabaseModernizr.xhr2Modernizr.fetch

Консоль вернёт значенияtrue/false, чтобы указать, поддерживает ли ваш браузер эти функции или нет.

Давайте посмотрим на пример, чтобы показать, как вы бы пользовали эти свойства.

1. Прежде всего, сделайте локальную копию файла примераmodernizr-js.html.

2. Присоедините библиотеку Modernizr к HTML, используя элемент<script> , как мы делали в предыдущих демонстрациях. Поместите его над существующим элементом<script> который прикрепляет API Google Maps к странице.

3. Затем заполните текст-заполнительYOUR-API-KEY во втором элементе<script> (как он есть сейчас) действительным ключом API Google Maps. Чтобы получить ключ, войдите в учётную запись Google, перейдите на страницуПолучить ключ / Аутентификация затем нажмите синюю кнопкуGet a Key и следуйте инструкциям.

4. Наконец, добавьте ещё один элемент<script> внизу тела HTML (непосредственно перед тегом</body> ) и поместите следующий скрипт в теги:

   js

   if (Modernizr.geolocation) {  navigator.geolocation.getCurrentPosition(function (position) {    let latlng = new google.maps.LatLng(      position.coords.latitude,      position.coords.longitude,    );    let myOptions = {      zoom: 8,      center: latlng,      mapTypeId: google.maps.MapTypeId.TERRAIN,      disableDefaultUI: true,    };    let map = new google.maps.Map(      document.getElementById("map_canvas"),      myOptions,    );  });} else {  const para = document.createElement("p");  para.textContent = "Argh, no geolocation!";  document.body.appendChild(para);}

Опробуйте свой пример! Здесь мы используем тестModernizr.geolocation, чтобы проверить, поддерживается ли геолокация текущим браузером. Если это так, мы запускаем некоторый код, который получает текущее местоположение вашего устройства и отображает его на карте Google.

Подведение итогов

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

Далее мы начнём изучать автоматизированное тестирование.