Несколько CSS методов по изменению визуального порядка

Несколько CSS методов по изменению визуального порядка

От автора: в этом уроке мы разберем несколько CSS методов по изменению порядка HTML элементов.

Наша цель

Мы хотим построить очень простой макет, особенно на маленьких экранах (т.е. <600px). Вот так он будет выглядеть:

На средних и больших экранах (т.е. выше или равно 600px) макет должен быть таким:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Самая сложная задача – найти способ перевернуть порядок кнопок.

Разметка

Разметка будет очень простая, обычный div с четырьмя кнопками внутри:

Базовые стили

На маленьких экранах у всех кнопок общие стили:

На больших экранах мы лишь добавим к кнопкам свойство width: 25%. Остальные стили будут добавляться в зависимости от CSS метода, который мы используем для инверсии порядка кнопок.

Осталось добавить стили кнопкам в состоянии focus:

Если при помощи клавиши Tab перемещаться по кнопкам, кнопка с фокусом изменит цвет на темно-красный.

Методы с изменением порядка колонок

Теперь мы готовы протестировать несколько способов по изменению порядка кнопок на экранах шириной больше 599px.

Метод №1: обтекания

Один из быстрых способов – добавить кнопкам правое обтекание. Дополнительный CSS код:

Метод №2: позиционирование

Можно спозиционировать элементы, относительно или абсолютно. В первом случае мы сдвигаем все кнопки влево при помощи свойства position: relative и при помощи свойства left выстраиваем их в ряд.Для этого нам нужен следующий CSS код:

Во втором случае кнопкам можно было бы задать свойство position: absolute и с помощью свойства left более точно настроить их позиционирование.

Метод №3: свойство direction

Менее очевидный способ – свойство direction. Обычно, в таком случае резервируется некоторое пространство под развернутый текст. В нашем случае мы задаем свойство direction: rtl (справа налево) контейнеру, что мгновенно меняет порядок элементов в макете. Обратите внимание: в этом примере элементам задается поведение ячеек таблицы для того, чтобы выстроить их в один ряд.

Также стоит сказать, что если по каким-либо причинам нам захочется сменить направление текста кнопок, можно использовать специальное правило:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Метод №4: трансформации

Изящный метод. Кнопкам необходимо добавить левое обтекание и свойство transform: scaleX(-1). Также данное свойство необходимо прописать для родительского блока. Отрицательное значение не увеличивает элементы. На самом деле, они просто отражаются по горизонтальной оси.

Для достижения нужного эффекта можно даже использовать функцию трансформации rotate. Нужно всего лишь добавить свойство transform: rotateY(180deg) к кнопкам и родительскому блоку.

Метод №5: flexbox

Изменить порядок колонок можно и с помощью flexbox. В нашем случае мы можем воспользоваться двумя свойствами flexbox для достижения необходимого эффекта. В первом случае родительский блок кнопок необходимо превратить в флекс контейнер и добавить к нему свойство flex-direction: row-reverse.

Второй способ – превратить родительский блок в флекс контейнер и с помощью свойство order задавать порядок кнопок.

Метод №6: CSS сетка

CSS сетка – один из самых лучших способов изменения порядка элементов. Несмотря на скудную поддержку в браузерах на момент написания статьи, давайте попробуем данный способ. Данный пример будет работать только в Chrome, в котором необходимое CSS свойство по умолчанию не поддерживается. Однако при помощи простых шагов мы можем активировать это свойство.

Не вдаваясь в детали, давайте разберем два способа. Первый способ – превратить родительский блок в grid-контейнер и с помощью свойства grid-column задавать порядок расположения кнопок. Также мы добавим свойство grid-row: 1, чтобы все кнопки были на одном ряду.

Второй способ с сетками похож на второй способ с flexbox. Необходимо превратить родительский блок в grid-контейнер и с помощью свойства order задавать порядок отображения кнопок.

Данное демо работает только с включенным флагом «Experimental Web Platform features» в Chrome.

Исходный порядок или визуальный порядок

Мы показали, что изменить порядок следования кнопок можно разными CSS способами. Давайте еще раз взглянем на все демо и с помощью клавиатуры пройдемся по кнопкам (при помощи клавиши Tab). Вы заметите, что даже если кнопка 4 визуально стоит первой, то первой получит фокус кнопка 1, так как она расположена первой в DOM. То же самое будет, если протестировать демо в скрин ридерах (я тестировал в NVDA).

Учитывая разницу между порядком в DOM и CSS, необходимо крайне осторожно работать с частями сайта, которые были перестроены при помощи CSS. К примеру, flexbox свойство order одно из самых гибких для изменения порядка отображения элементов, однако в спецификации говорится: «Редакторы должны использовать свойство order только для визуального, не логического изменения порядка контента. Стили, в которых свойство order используется для логического изменения порядка, неприемлемы.»

То же самое говорится в спецификации и про свойство order в сетках: «При изменении порядка флекс элементов свойство order должно использоваться только в случаях, когда визуальный порядок не должен совпадать с порядком чтения текста скрин ридерами и порядком меню. В противном случае документ должен быть перестроен.»

Обратите внимание: если вы тестировали второй способ с flexbox в браузере Firefox, вы могли заметить, что навигация с клавиатурой работает, но на средних экранах первый фокус получает кнопка 4. Это баг.

Заключение

В этом уроке мы рассмотрели разные CSS методы по изменению порядка отображения HTML элементов. Не все методы подходят на все случаи. Перед выбором нужно учесть:

Какие браузеры вы будете поддерживать. К примеру, некоторые из вышеупомянутых способов не работают в старых версиях IE (<10).

Сложность перестроения. Перестроение будет простым, как в наших примерах, или что-то посложнее?

Если вы знаете другие методы по изменению порядка кнопок, пишите о них в комментариях.

Редакция: George Martsoukos

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree