Обратная совместимость

Intro.js обеспечивает плавное взаимодействие с пользователем через пошаговые руководства, но при этом важно учитывать различия в поддержке браузеров. Обратная совместимость позволяет корректно работать на устаревших версиях браузеров, где некоторые современные возможности JavaScript или CSS могут быть недоступны.

Минимальные требования к браузерам

Intro.js использует современный синтаксис ES5 и частично ES6. Основные рекомендации по совместимости:

  • Internet Explorer 9+
  • Edge 12+
  • Последние версии Chrome, Firefox, Safari

Для Internet Explorer 8 потребуется подключение полифиллов для таких функций, как Array.prototype.forEach, Object.keys и addEventListener. Без этого часть функционала, включая навигацию по шагам и обработку событий, будет недоступна.

Использование полифиллов

Для обеспечения обратной совместимости следует использовать полифиллы:

<script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>

Этот подход гарантирует, что методы массивов, строки и объекты будут работать даже в старых браузерах. Важные полифиллы для Intro.js:

  • classList — для работы с методами add, remove, toggle классов у DOM-элементов.
  • CustomEvent — для генерации собственных событий.
  • requestAnimationFrame — для анимаций переходов между шагами.
  • Promise — при использовании асинхронных колбэков для шагов.

CSS и визуальная совместимость

Intro.js активно использует CSS-анимации и трансформации. Для старых браузеров анимации можно адаптировать через вендорные префиксы:

.introjs-tooltip {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

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

Проверка совместимости шагов

Intro.js позволяет задавать шаги с помощью атрибутов data-intro и data-step. Для обратной совместимости необходимо убедиться, что эти атрибуты корректно распознаются в старых браузерах. Старые версии IE могут не поддерживать селекторы по атрибутам в некоторых методах (document.querySelectorAll). В таких случаях рекомендуется использовать полифилл querySelectorAll.

if (!document.querySelectorAll) {
  document.querySelectorAll = function (selectors) {
    var style = document.createElement('style'), elements = [], element;
    document.documentElement.firstChild.appendChild(style);
    document._qsa = [];
    style.styleSheet.cssText = selectors + "{x:ex * pression(document._qsa.push(this))}";
    window.scrollBy(0, 0);
    style.parentNode.removeChild(style);
    while(document._qsa.length) {
      element = document._qsa.shift();
      element.style.removeAttribute('x');
      elements.push(element);
    }
    document._qsa = null;
    return elements;
  };
}

Обработка событий и колбэков

Intro.js использует события onbeforechange, onchange, onafterchange, oncomplete и onexit. В старых браузерах важно, чтобы функции были совместимы с синтаксисом ES5. Стрелочные функции и let/const следует заменять на function и var:

intro.onchange(function(targetElement) {
  console.log("Смена шага: ", targetElement);
});

Асинхронные шаги и задержки

Функциональность асинхронных действий через setTimeout или обработку динамически создаваемых элементов должна проверяться отдельно для IE9–IE11. Старые версии браузеров могут некорректно обрабатывать DOMContentLoaded, поэтому лучше использовать:

window.onl oad = function() {
  intro.start();
};

Совместимость с мобильными браузерами

Intro.js работает на мобильных устройствах, но жесты и скроллинг могут отличаться. Для iOS 8+ и Android 4.4+ нет необходимости подключать дополнительные полифиллы. Для более старых версий следует отключать анимации:

intro.setOptions({
  showStepNumbers: true,
  disableInteraction: true,
  tooltipClass: 'introjs-no-animation'
});

Проверка доступности и degrade gracefully

В случаях, когда полностью поддерживаемая версия браузера отсутствует, рекомендуется реализовать graceful degradation:

  • Подсказки отображаются без анимации.
  • Навигация по шагам осуществляется через простые кнопки «Назад» и «Далее».
  • События выполняются без использования Promise или стрелочных функций.

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

Рекомендации по поддержке библиотек

Intro.js часто используется вместе с jQuery или другими фреймворками. Для обеспечения обратной совместимости важно:

  • Проверять наличие $ или jQuery.
  • Не использовать методы ES6, если они не полифилятся.
  • Для старых проектов подключать совместимые версии плагинов, избегая последних модулей, требующих современного JS.

Заключение по обратной совместимости

Intro.js обеспечивает высокий уровень гибкости при работе на различных платформах. Соблюдение принципов обратной совместимости позволяет сохранять основные функции для старых браузеров, используя полифиллы, адаптивные CSS и корректные JavaScript-практики.

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

Оглавление