Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Несколько различных методов CSS для изменения порядка отображения

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

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

Цель

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

На средних экранах и больше (то есть больше или равно 600 пикселей), мы хотим, чтобы он выглядел следующим образом:

Наша самая сложная задача - найти способ изменить порядок кнопок.

Разметка

Разметка, которую мы будем использовать, проста; только элемент div, содержащий четыре кнопки:

Основные стили

На маленьких экранах все кнопки имеют одинаковые стили:

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

Наконец, мы добавим несколько стилей для focus состояния наших кнопок:

Итак, если мы используем клавиатуру (клавиша «Tab»), чтобы перемещаться по кнопкам, то каждая кнопка, получающая фокус, будет иметь темно-красный цвет фона.

Методы упорядочения столбцов

На этом этапе мы рассмотрим различные подходы CSS для изменения порядка кнопок, когда область просмотра превышает 599 пикселей.

Метод #1: Floats

Первое постое решение это задать кнопкам свойство float:right. Вот дополнительный CSS:

Вот демонстрация в Codepen:

Метод #2: Позиционирование

Альтернативным решением является расположение элементов, как относительно, так и абсолютно.

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

Необходимый CSS выглядит следующим образом:

Вот демонстрация в Codepen:

Во втором варианте мы могли бы также задать нашим кнопкам position: absolute, а затем использовать свойство left для более точного позиционирования.

Соответствующие правила CSS:

Демонстрация Codepen:

Метод #3: Свойство direction

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

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

Ниже вы можете увидеть необходимые стили CSS:

Cтоит отметить, что если (по какой-то причине) мы хотим изменить текстовое направление кнопок, мы можем включить правило двунаправленного переопределения в нашей таблице стилей:

Codepen демо:

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

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

Ниже приведен необходимый CSS:

Демо Codepen:

Мы даже можем использовать функцию трансформации rotate для достижения желаемого результата. Все что мы должны сделать, это добавить свойство transform: rotateY(180deg) кнопкам и их родителям.

Вот необходимые CSS для этого способа:

И Codepen демо:

Метод #5: Flexbox

Flexbox является еще одним способом для изменения порядка отображения столбцов. В нашем примере мы можем использовать два разных свойства flexbox для создания желаемого макета.

Первый подход заключается в том, чтобы установить родительскому контейнеру кнопок свойство flex, а затем добавить ему свойство flex-direction: row-reverse.

Ниже приведены соответствующие стили:

Демонстрация Codepen показана ниже:

Второй вариант с использованием flexbox - установить родительский элемент кнопок в качестве контейнера flex, а затем использовать свойство order, чтобы определить, в каком порядке должны появляться кнопки.

Соответствующий CSS:

Codepen демо:

Метод #6: CSS Grid

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

Не вдаваясь в подробности, давайте опишем два способа достижения желаемого результата.

Первый вариант - установить родительскому элементу кнопок свойство контейнера grid, а затем использовать свойство grid-column, чтобы определить, в каком порядке должны отображаться кнопки. Кроме того, мы делаем так, что все кнопки принадлежат одной и той же (первой) строке, добавляя к ней grid-row: 1.

Смотрите нужные стили ниже:

Демонстрация в Codepen:

Второй вариант с grid похож на второе решение с flexbox. Мы устанавливаем родительскому контейнеру кнопок свойство grid, а затем используем свойство order чтобы определить, в каком порядке должны отображаться кнопки.

Вот требуемый CSS:

Демонстрация в Codepen:

Опять же вам нужно включить “Experimental Web Platform features” в Chrome, чтобы увидеть результат.

Source Order vs. Visual Order

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

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

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

Таким же образом, grid спецификация по свойству order говорит:

«Как и при переупорядочивании элементов flex, свойство order должно использоваться только тогда, когда визуальный порядок не должен быть синхронизирован с речевым и навигационным порядком; в противном случае исходный документ должен быть переупорядочен».

Примечание: Если вы проверите второе решение на flexbox (со свойством order) в Firefox, вы заметите, что навигация на клавиатуре работает нормально, а первая кнопка, которая фокусируется на средних экранах и выше это «Button 4». Такое поведение было заявлено как ошибка.

Заключение

В этом руководстве, мы рассмотрели разные CSS методы для переопределения порядка HTML элементов. Конечно, не все эти методы подходят во всех случаях. Прежде чем решить, какой метод использовать, вы должны учесть несколько вещей:

  • Браузеры, которые вы хотите поддерживать. Например, некоторые из вышеупомянутых примеров не работают в более ранних версиях Internet Explorer (например, <10).
  • Сложность вашей перегруппировки. Это будет что-то простое, как то, что мы видели в нашем примере, или что-то более сложное?

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

Для дальнейшего изучения

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.