CSS Global Order

CSS Global Order — JavaScript-библиотека, реализующая поддержку изменения визуального порядка HTML-элементов с помощью стандартного CSS-свойства order без необходимости включения механизма Flexbox (display: flex / display: inline-flex) для их родительского элемента.

Библиотека работает во всех браузерах, поддерживающих Flexbox (в том числе в устаревших браузерах, поддерживающих предварительные версии Flexbox с префиксами), а также в Internet Explorer 7 и выше.

Синтаксис (API)

Библиотека доступна как объект CSSGlobalOrder, имеющий два метода:

processChildren(parent)
Изменяет порядок непосредственных дочерних элементов заданного элемента.
process([scope])
Изменяет порядок элементов внутри заданного элемента.

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

Для метода process() аргумент является необязательным: если аргумент не задан, то обрабатываются все элементы HTML-документа.

Селектор в качестве аргумента поддерживается только в браузерах, поддерживающих метод querySelectorAll() (все современные браузеры и IE8+).

Примеры

При вызове методов обрабатываются элементы документа, доступные на момент вызова. Рекомендуется вызывать методы по событию DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {
    CSSGlobalOrder.processChildren('.foo, .bar');
}, false);

или, например, в аналогично работающем ready-обработчике документа в jQuery:

$(document).ready(function() {
    CSSGlobalOrder.processChildren('.foo, .bar');
});

Примеры вызовов методов с аргументами всех поддерживаемых типов:

CSSGlobalOrder.processChildren('.foo, .bar') /* селектор */;
CSSGlobalOrder.processChildren(document.getElementById('demo')); /* элемент */
CSSGlobalOrder.processChildren([a, b, c]); /* массив элементов */

CSSGlobalOrder.process('#lorem > .ipsum'); /* селектор */
CSSGlobalOrder.process(document.getElementsByTagName('main')[0]); /* элемент */
CSSGlobalOrder.process([a, b, c]); /* массив элементов */
CSSGlobalOrder.process(); /* аргумент не указан: обрабатываются все элементы */

Текстовые узлы

Помимо элементов, порядок которых подлежит изменению, допускается наличие текстовых узлов, значение CSS-свойства order которых принимается равным нулю (аналогично значению по умолчанию для элементов).

Flex-контейнеры

Дочерние элементы Flex-контейнеров при изменении порядка не затрагиваются, т. к. для них оно поддерживается на уровне чистого CSS и в эмуляции не нуждается. Flex-контейнером считается элемент, CSS-свойство display которого имеет одно из следующих значений:

  • flex,
  • inline-flex,
  • -webkit-flex,
  • -webkit-inline-flex,
  • -ms-flexbox,
  • -ms-inline-flexbox,
  • -moz-box,
  • -moz-inline-box,
  • -webkit-box,
  • -webkit-inline-box.

Устаревшие версии Firefox и WebKit

При необходимости поддержки устаревших версий Firefox (19 и ниже) и браузеров на основе устаревших версий движка WebKit (Safari 8 и ниже) следует помимо стандартного CSS-свойства order дополнительно использовать префикси­рованные нестандартные свойства -moz-box-ordinal-group, -webkit-box-ordinal-group и -webkit-order, для всех 4-х свойств указав одно и то же значение:

.example {
       -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 3;
            order: 3;
}

Внимание: в изначальной версии спецификации Flexbox 2009 года для свойства box-ordinal-group не были предусмотрены отрицательные значения. Поэтому при необходимости поддержки соответствующих устаревших версий браузеров следует использовать только нулевые и положительные значения свойства order и его вариантов с префиксом.

Быстродействие

В общем случае в отношении быстродействия предпочтительность вариантов использования библиотеки такова (в порядке уменьшения быстродействия):

  1. processChildren(parent);
  2. process(scope);
  3. process().

Это связано с тем, что выборка элементов, для которых указано CSS-свойство order, осуществляется перебором всех элементов и проверкой значения свойства order каждого из них, т. к. на момент написания библиотеки не существует стандартного способа быстрой выборки элементов по значению CSS-свойства (подобно querySelectorAll() для выборки по селектору).

Соответственно, в первом случае перебираются лишь дочерние узлы заданного элемента, во втором — все потомки заданного элемента, в третьем — все элементы документа.