Вертикальная перестановка блоков средствами CSS

Авторская статья «Вертикальная перестановка блоков средствами CSS» рассказывает о методе, позволяющем полноценно изменять визуальный порядок блоков по вертикали так, как если бы в HTML-коде они располагались именно в таком порядке.

Англоязычная версия статьи:
Vertical reordering of blocks with CSS.

Комментарии | добавить

GreLI 2011-06-06

А ведь

for (var i = count - 1; i >= 0; i--)

можно заменить на

for (var i = count; i--; )

результат тот же, запись проще.

pepelsbey 2011-06-06

> на данный момент в браузере Opera ссылки внутри такого элемента
> недоступны для щелчка либо не реагируют на наведение указателя мыши,
> игнорируя CSS-правила для псевдоклассов :hover

Простейший вариант с display:table-caption и ссылкой внутри прекрасно отрабатывает — http://jsfiddle.net/pepelsbey/uWPnu/ — нет ли какого-нибудь гарантированного кода, который подобным образом бажит?

MT (автор) 2011-06-06

GreLI: Я не любитель оптимизаций, снижающих ясность кода. Хотя любую задачу, несомненно, можно решить множеством способов. ;-)

pepelsbey: display: table-caption имеет смысл только для элементов, вложенных в контейнер, которому задано display: table. В Opera это подтверждает и getComputedStyle(), выдающий block в качестве значения CSS-свойства display для элемента, которому задано display: table-caption, но родителем которого не является элемент с display: table.

Создал тестовую страницу и отправил в Оперу баг-репорт (DSK-338752).

GreLI 2011-06-06

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

MT (автор) 2011-06-07

GreLI: Лаконичнее — да, прозрачнее — нет. Возможно, дело привычки. Так или иначе, в контексте статьи этот вопрос глубоко вторичен.