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
и его вариантов с префиксом.
Быстродействие
В общем случае в отношении быстродействия предпочтительность вариантов использования библиотеки такова (в порядке уменьшения быстродействия):
processChildren(parent)
;process(scope)
;process()
.
Это связано с тем, что выборка элементов, для которых указано CSS-свойство order
, осуществляется перебором всех элементов и проверкой значения свойства order
каждого из них, т. к. на момент написания библиотеки не существует стандартного способа быстрой выборки элементов по значению CSS-свойства (подобно querySelectorAll()
для выборки по селектору).
Соответственно, в первом случае перебираются лишь дочерние узлы заданного элемента, во втором — все потомки заданного элемента, в третьем — все элементы документа.