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

Packery — это библиотека для динамического расположения элементов в виде сетки с возможностью «мозаичного» размещения. При использовании в реальных проектах важно учитывать обратную совместимость с различными браузерами и старыми версиями JavaScript.

Особенности работы Packery в старых браузерах

Packery активно использует свойство CSS transform для позиционирования элементов и JavaScript события для перерасчета расположения при изменении размеров контейнера. В старых браузерах, таких как IE9 или ранние версии Firefox и Chrome, некоторые свойства могут работать некорректно или отсутствовать вовсе:

  • IE9 и ниже не поддерживает requestAnimationFrame, который используется для анимации перестановки элементов.
  • Отсутствие поддержки classList может привести к ошибкам при добавлении/удалении классов у элементов.
  • Старые версии Safari и Opera не всегда корректно обрабатывают getBoundingClientRect при трансформациях.

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

Для обеспечения работы Packery на старых браузерах необходимо подключать полифиллы:

  • requestAnimationFrame

    if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = function(callback) {
    return setTimeout(callback, 16);
  };
}

  • classList Для IE9 и IE10 можно использовать полифилл, предоставляемый MDN.

  • CustomEvent Для старых версий Firefox и IE необходимо полифиллить событие CustomEvent:

    (function () {
  if ( typeof window.CustomEvent === "function" ) return false;
  function CustomEvent(event, params) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent('CustomEvent');
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    return evt;
  }
  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent;
})();

Настройка Packery для старых браузеров

Packery поддерживает опцию transitionDuration, которая управляет анимацией перестановки элементов. В старых браузерах можно отключить анимацию для повышения стабильности:

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  transitionDuration: 0 // отключение анимации для старых браузеров
});

Также рекомендуется использовать фиксированные размеры элементов, так как старые браузеры часто неправильно обрабатывают динамическое изменение размеров элементов с transform.

Проверка поддержки CSS

Для работы Packery критически важны свойства:

  • transform и transform-origin
  • transition
  • box-sizing

Можно использовать библиотеку Modernizr для проверки поддержки и условного подключения полифиллов:

if (!Modernizr.csstransforms) {
  // подключение fallback для абсолютного позиционирования элементов
}

Работа с событиями

Packery реагирует на изменения контейнера и перетаскивания элементов через события layoutComplete и dragItemPositioned. Для старых браузеров необходимо убедиться, что события addEventListener и dispatchEvent поддерживаются:

if (!Element.prototype.addEventListener) {
  Element.prototype.addEventListener = function(event, callback) {
    this.attachEvent('on' + event, callback);
  };
}

Итоговые рекомендации

  1. Подключать необходимые полифиллы для requestAnimationFrame, classList, CustomEvent.
  2. Для IE9 и старше использовать фиксированные размеры элементов и отключать анимацию.
  3. Проверять поддержку CSS-свойств с помощью Modernizr и использовать fallback-методы для позиционирования.
  4. Обрабатывать события через проверку существования addEventListener и dispatchEvent.

Соблюдение этих правил обеспечивает корректную работу Packery на широком диапазоне браузеров и позволяет поддерживать обратную совместимость без потери функциональности сетки и интерактивных элементов.

Оглавление