Способи зміни порядку виведення елементів за допомогою CSS
4 Вересня 2016
У цій статті ми розглянемо кілька різних методів CSS для переупорядкування виводу HTML елементів.
Наша розкладка дуже проста. Зокрема, на маленьких екранах (менше 600px) вона виглядатиме так:
На середніх екранах і більше (від 600px) кнопки будуть вишиковуватися в ряд:
Наше головне завдання - змінити порядок кнопок на зворотний.
Розмітка буде найпростіша: просто елемент div, що містить чотири кнопки:
На маленькому екрані у всіх кнопок будуть однакові стилі:
На великих екранах ми поставимо width: 25%, інші стилі будуть визначатися методом CSS, який ми будемо застосовувати для завдання зворотного порядку кнопок.
Нарешті, у нас будуть стилі для стану focus наших кнопок:
Таким чином, якщо ми будемо використовувати клавішу Tab для навігації, наші кнопки при фокусуванні стануть темно-червоними.
Методи упорядкування колонок
Тепер ми готові перевірити різні підходи CSS для виведення кнопок в реверсивному порядку при перевищенні видимості ширини в 599px.
Метод №1: плаваючі блоки
Можна просто додати блокам float: right , ось повні стилі:
І демо з Codepen:
Метод №2: позиціонування
Альтернативним варіантом буде завдання позиції елементам, відносної чи абсолютної.
За першим варіантом (з відносним позиціонуванням) ми задамо кнопкам, що пливуть вліво властивість position: relative і потім розставимо їх за допомогою left .
Другим варіантом (з використанням абсолютного позиціонування) ми задамо нашим кнопкам position: absolute, а за допомогою властивості left розмістимо їх точніше.
Демо на Codepen:
Метод №3: властивість direction
Менш очевидним є підхід на основі властивості direction — воно призначене для зміни напряму читання тексту. У нашому випадку ми задаємо direction: rtl (праворуч наліво) для елемента обгортки, що дозволить змінити напрямок розкладки.
Для цього прикладу ми дамо нашим кнопкам поведінку елементів таблиці, щоб створити горизонтальну розкладку.
Ви можете бачити необхідні стилі CSS нижче:
Варто згадати, що з якихось причин ми хочемо також змінити напрямок тексту в кнопках, ми можемо включити спеціальне правило у тому, щоб напрям символів юнікоду визначалося властивістю direction .
Демо на Codepen:
Метод №4: трансформація
Витонченим рішенням залишитиме кнопкам float: left; і потім застосувати transform: scaleX(-1) до них та їх батька. Задавши негативні значення ми зробимо так, що елемент, що трансформується, не масштабується, а перевертається по горизонтальній осі.
Демо на Codepen:
Ми також можемо використовувати для створення потрібного порядку функцію трансформації rotate. Все, що нам треба додати кнопкам та їх батькові властивість transform: rotateY(180deg) .
CSS для цього рішення:
Демо на Codepen:
Метод №5: флексбокс
Флексбокс це ще один спосіб зміни порядку колонок. У нашому прикладі ми використовуємо дві різні властивості флексбоксу для створення нашої розкладки.
Перший підхід це зробити батьківський елемент кнопок флекс-контейнером, а потім додати flex-direction: row-reverse , ось так:
Демо на Codepen:
Другий варіант з флексбокс полягає у використанні властивості order для визначення порядку, в якому кнопки повинні виводитися.
Демо на Codepen:
Метод №6: грід-розкладка
Багатообіцяючим рішенням дляРозміщення елементів є розкладка на основі CSS Grid. Незважаючи на вкрай обмежену підтримку в браузерах, на момент написання статті її варто спробувати. Враховуйте, що наш приклад буде працювати тільки в Chrome (за замовчуванням цю можливість вимкнено, але її легко активувати).
Не занурюючись глибоко в деталі, я опишу два способи з використанням CSS Grid.
Перший варіант - це завдання батьківського елементу кнопок властивості display: grid; та використання властивості grid-column для визначення порядку виведення кнопок. На додаток ми забезпечимо попадання всіх кнопок в один ряд шляхом прямої вказівки цього grid-row: 1 .
Демо на Codepen:
Другий варіант використання CSS Grid схожий на другий спосіб використання флексбоксу. Ми поставимо контейнеру властивість display: grid; , а потім використовуємо властивість order визначення порядку виведення кнопок.
Демо на Codepen:
Нагадаю, що для тестування цього методу вам потрібно активувати “Experimental Web Platform features” у Chrome.
Порядок вихідників та візуальний порядок
Як показано, ми можемо використовувати різні підходи CSS для зміни порядку наших кнопок. Спробуємо пройтись по наших демо, використовуючи клавіатуру (клікніть на пін і натисніть клавішу Tab) для навігації за кнопками. Навіть якщо кнопка з номером 4 виведена першою, фокус спочатку з'являється на кнопці з номером 1, оскільки вона розташована першою в DOM. Те саме станеться, якщо ми протестуємо наші демо зі скріндрідером (я проводив тести з NVDA).
Зважаючи на цю незалежність порядку CSS від порядку DOM, нам треба бути дуже обережними з частинами сторінок, порядок яких ми змінюємо за допомогою CSS. Наприклад, властивість флексбоксу order це один із найбільш гнучких способів для переупорядкуванняелементів, згідно специфікації:
Автори повинні використовувати order лише для візуального, а не логічного перевпорядкування контенту. Спроба використати order для логічного порядку не спрацює.
Те саме специфікація говорить про властивість order CSS Grid.
Так само, як і з переупорядкуванням флекс-елементів, властивість order може використовуватися тільки тоді, коли візуальний порядок треба розсинхронізувати з порядком зачитування та навігації — інакше треба змінювати вихідні документи.
Примітка: якщо ви використовуєте другий спосіб з флексбоксом Firefox, то ви помітите, що навігація з клавіатури працює відмінно і фокус на середніх екранах з'являється спочатку на кнопці №4. Така поведінка є багом.
Висновок
У цій статті ми перевірили різні методи CSS для переупорядкування елементів HTML. Звичайно, не всі ці методи універсальні і перед тим, як вибрати потрібний вам, ви повинні врахувати кілька речей:
-
Браузери, які потрібно підтримувати. Деякі з перелічених підходів не працюють у старих версіях Internet Explorer (тобто.