Как веб-разработчик, вы должны убедиться, что ваши веб-сайты или приложения могут работать во всех браузерах и на всех устройствах, независимо от того, насколько они разные или старые. Если ваш сайт работает в Mozilla Firefox, это не означает, что он может работать в других браузерах или их более старых версиях, которые люди все еще могут использовать. Если ваш сайт работает на новейшем MacBook Pro, это не значит, что он работает на других устройствах или более старых продуктах.

Различия в браузерах и устройствах в основном связаны с разными наборами функций. Новые браузеры / устройства могут поддерживать новейшие функции HTML5 или CSS3, тогда как старые браузеры не имеют этих функций и поэтому будут отображать ошибку или что-то подобное, как показано ниже.

Заключение

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

Что такое обнаружение функций?

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

Простой код обнаружения функции может выглядеть примерно так:

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
}

(Код от: developer.mozilla.org/en-US/docs/Learn/Tool ..)

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

Вау, это кажется довольно простым в реализации, не правда ли?

НЕТ, потому что существует так много наборов функций, которые нужно проверить на совместимость! Проверка каждого из них с помощью такого кода займет вечность!

Решение: используйте библиотеку обнаружения функций!

Modernizr

Отраслевая библиотека обнаружения функций

Использование Modernizr - лучший способ реализовать обнаружение функций и улучшить доступность вашего сайта. Начать очень просто.

Шаг 1. Установите Modernizr с помощью npm

npm install -g modernizr

Шаг 2: Выберите свои конфигурации

Перейдите по этой ссылке, чтобы выбрать только те функции, которые необходимо проверить на совместимость. Затем нажмите Сборка, чтобы загрузить config.json из командной строки.

В моем примере я выбираю функциональный тест для свойства canvas text.

Затем я загружаю config.json из командной строки.

Шаг 3. Создайте modernizr.js

Переместите config.json, который вы скачали, в папку вашего проекта. Затем запустите:

modernizr -c modernizr-config.json

Это сгенерирует modernizr.js файл, который является вашим модулем определения пользовательских функций, который вы можете использовать для своего веб-сайта.

Шаг 4. Настройте HTML

Теперь вставьте файл js в свой HTML ‹head›.

<script src="modernizr.js" type="text/javascript"></script>

Также добавьте класс «no-js» в свой тег ‹html›.

<html class="no-js">

Этот добавленный класс гарантирует, что существует резервный вариант, если браузер работает без JavaScript. Modernizr заменит класс на js, если в браузере запущен JavaScript.

Modernizr будет делать то же самое для всех других функций, указанных в вашем config.json. Если он обнаружит эту функцию в вашем браузере, он добавит класс как есть в тег ‹html›. Но если ваш браузер не поддерживает эту функцию, он добавит класс с префиксом no-, чтобы вместо этого отображать резервный класс.

В моем примере у меня было только свойство canvastext для тестирования. Когда я запускаю свою HTML-страницу, мой тег ‹html› выглядит так:

<html class="js canvas canvastext">

Я вижу, что Modernizr заменил мой no-js на js, что означает, что в моем браузере включен JavaScript. И два следующих класса не имеют префикса no-, поэтому мой браузер поддерживает как canvas, так и canvastext.

Шаг 5: написание резервных копий

Так что мой браузер поддерживает canvastext. Но что, если какой-то пользователь не использует браузер, поддерживающий эту функцию?

Я должен предоставить запасной вариант, когда Modernizr покажет класс no-canvastext в теге ‹html›.

if (Modernizr.canvastext) {
    //show some cool canvas text
  } else {
    //show a picture with text on it
  }

Вот как вы можете предоставить запасной вариант, если браузер не поддерживает определенную функцию.

Вместо canvastext, которое является свойством API, если вы тестируете какую-либо функцию CSS3, вы можете написать что-то вроде этого:

.no-cssfeature {
  /*some CSS attributes if browser does not support*/
}

.cssfeature {
  /*the new CSS feature that can be used*/
}

И в этом суть!

С Modernizr теперь вы можете легко реализовать обнаружение функций, чтобы сэкономить так много времени! При работе с HTML5 или CSS3 рекомендуется включить эту полезную библиотеку, чтобы улучшить доступность вашего веб-сайта. Не стесняйтесь просматривать документацию Modernizr, чтобы узнать больше.

Надеюсь, это чтение было для вас полезным. Не стесняйтесь задавать любые вопросы в комментариях ниже. Я желаю вам всего наилучшего. Ваше здоровье!