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

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

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

Наша цель

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

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

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

Разметка

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

<div class="boxes">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

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

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

.boxes button {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  margin-bottom: 5px;
  box-sizing: border-box;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background: gold;
  color: #000;
}
 
.boxes button:nth-of-type(even) {
  background: #e6c200;
}

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

@media screen and (min-width: 600px) {
  /* в методах с flexbox и сеткой мы пропускаем это свойство */
  width: 25%;	
   
 /* тут код */
}

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

.boxes button:focus {
  outline: none;
  color: #fff;
  background: firebrick;
}

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

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

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

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

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

@media screen and (min-width: 600px) {
  .boxes button {
    float: right;
    width: 25%;
  }
}

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

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

@media screen and (min-width: 600px) {
  .boxes button {
    position: relative;
    float: left;
    width: 25%;
   }
  
  .boxes button:nth-of-type(1) {
    left: 75%;
  }
 
  .boxes button:nth-of-type(2) {
    left: 25%;
  }
 
  .boxes button:nth-of-type(3) {
    left: -25%;
  }
 
  .boxes button:nth-of-type(4) {
    left: -75%;
  }
}

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

@media screen and (min-width: 600px) {
  .boxes {
    position: relative;
  }
   
  .boxes button {
    position: absolute;
    width: 25%;
  }
   
  .boxes button:nth-of-type(1) {
    left: 75%;
  }
   
  .boxes button:nth-of-type(2) {
    left: 50%;
  }
   
  .boxes button:nth-of-type(3) {
    left: 25%;
  }
   
  .boxes button:nth-of-type(4) {
    left: 0;
  }
}

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

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

@media screen and (min-width: 600px) {
  .boxes {
    display: table;
    width: 100%;
    direction: rtl;
  }
 
  .boxes button {
    display: table-cell;
    width: 25%;
  }
}

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

.boxes button {
  unicode-bidi: bidi-override;
}

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

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

@media screen and (min-width: 600px) {
  .boxes {
    transform: scaleX(-1);
  }
 
  .boxes button {
    float: left;
    transform: scaleX(-1);
    width: 25%;
  }
}

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

@media screen and (min-width: 600px) {
  .boxes {
    transform: rotateY(180deg);
  }
   
  .boxes button {
    float: left;
    transform: rotateY(180deg);
    width: 25%;
  }
}

Метод №5: flexbox

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

@media screen and (min-width: 600px) {
  .boxes {
    display: flex;
    flex-direction: row-reverse;
  }
}

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

@media screen and (min-width: 600px) {
  .boxes {
    display: flex;
  }
   
  .boxes button:nth-of-type(1) {
    order: 4;
  }
 
  .boxes button:nth-of-type(2) {
    order: 3;
  }
 
  .boxes button:nth-of-type(3) {
    order: 2;
  }
 
  .boxes button:nth-of-type(4) {
    order: 1;
  }
}

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

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

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

@media screen and (min-width: 600px) {
  .boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
  }
   
  .boxes button {
    grid-row: 1;
  }
   
  .boxes button:nth-of-type(1) {
    grid-column: 4;
  }
 
  .boxes button:nth-of-type(2) {
    grid-column: 3;
  }
 
  .boxes button:nth-of-type(3) {
    grid-column: 2;
  }
 
  .boxes button:nth-of-type(4) {
    grid-column: 1;
  }
}

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

@media screen and (min-width: 600px) {
  .boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
   
  .boxes button:nth-of-type(1) {
    order: 4;
  }
 
  .boxes button:nth-of-type(2) {
    order: 3;
  }
 
  .boxes button:nth-of-type(3) {
    order: 2;
  }
 
  .boxes button:nth-of-type(4) {
    order: 1;
  }
}

Данное демо работает только с включенным флагом «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 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree