Начини за промяна на реда на показване на елементи с помощта на CSS
4 септември 2016 г
В тази статия ще разгледаме няколко различни CSS метода за пренареждане на изхода на HTML елементи.
Нашето оформление е много просто. По-специално, на малки екрани (по-малко от 600px) ще изглежда така:
На средни екрани и по-големи (от 600px), бутоните ще се подредят:
Основната ни задача е да обърнем реда на бутоните.
Маркирането ще бъде възможно най-просто: просто div елемент, съдържащ четири бутона:
На малък екран всички бутони ще имат едни и същи стилове:
На по-големи екрани ще зададем ширина: 25%, останалата част от стила ще се определя от CSS метода, който ще използваме, за да обърнем реда на бутоните.
И накрая, ще имаме стилове за състоянието на фокус на нашите бутони:
По този начин, ако използваме клавиша Tab за навигация, нашите бутони ще станат тъмночервени, когато са на фокус.
Методи за подреждане на колони
Вече сме готови да тестваме различни CSS подходи за показване на бутони в обратен ред, когато прозорецът за изглед надвишава 599px ширина.
Метод #1: плаващи блокове
Можете просто да добавите float: точно към блоковете, ето пълните стилове:
И демонстрация от Codepen:
Метод #2: Позициониране
Алтернатива би била да се зададе позицията на елементите, относителна или абсолютна.
За първата опция (с относително позициониране) ще дадем на бутоните, които плават в лявата позиция: относително и след това ще ги позиционираме, като използваме свойството ляво.
Втората опция (използване на абсолютно позициониране) е да дадем на нашите бутони позиция: абсолютна и да използваме свойството ляво, за да ги позиционираме по-точно.
Демо на Codepen:
Метод #3: Свойството на посоката
Подходът, базиран на свойството на посоката, е по-малко очевиден - той е предназначен да промени посоката на четене на текста. В нашия случай задаваме посока: rtl (отдясно наляво) за обвиващия елемент, което ще ни позволи да променим посоката на оформлението.
Забележка: За този пример ще дадем на нашите бутони поведението на елементи на таблица, за да създадем хоризонтално оформление.
Можете да видите необходимите CSS стилове по-долу:
Струва си да споменем, че ако по някаква причина искаме да променим и посоката на текста в бутоните, можем да включим персонализирано правило, за да се определи посоката на уникод символите от свойството direction.
Демо на Codepen:
Метод #4: Трансформация
Елегантно решение би било да оставите бутоните плаващи: ляво; и след това приложете transform: scaleX(-1) към тях и техния родител. Като зададем отрицателни стойности, ще направим трансформираният елемент не мащабиран, а обърнат по хоризонталната ос.
Демо на Codepen:
Можем също да използваме функцията за завъртане на трансформацията, за да създадем желания ред. Всичко, което трябва да добавим към бутоните и техния родител е transform: rotateY(180deg) .
CSS за това решение:
Демо на Codepen:
Метод #5: Flexbox
Flexbox е друг начин за пренареждане на колони. В нашия пример използваме две различни свойства на flexbox, за да създадем нашето оформление.
Първият подход е да направите родителя на бутоните гъвкав контейнер и след това да добавите flex-direction: row-reverse, така:
Демо на Codepen:
Втората опция на flexbox е да използвате свойството order, за да определите реда, в който трябва да се показват бутоните.
Демо на Codepen:
Метод #6: Оформление на мрежата
Обещаващо решение заLayout е оформление, базирано на CSS Grid. Въпреки изключително ограничената поддръжка на браузъра към момента на писане, струва си да опитате. Имайте предвид, че нашият пример ще работи само в Chrome (тази функция е деактивирана по подразбиране, но е лесно да се активира).
Без да навлизам твърде дълбоко в подробности, ще опиша два начина за използване на CSS Grid.
Първата опция е да настроите родителския елемент на бутоните да показва: grid; и използване на свойството grid-column за определяне на реда, в който се показват бутоните. Освен това ще гарантираме, че всички бутони са на един и същи ред, като изрично посочим това - grid-row: 1 .
Демо на Codepen:
Вторият случай на употреба за CSS Grid е подобен на втория случай на употреба на Flexbox. Ще настроим контейнера да показва: grid; и след това използвайте свойството order, за да определите реда, в който се показват бутоните.
Демо на Codepen:
Нека ви напомня, че за да тествате този метод, трябва да активирате „Експериментални функции на уеб платформата“ в Chrome.
Ред на източника и визуален ред
Както е показано, можем да използваме различни CSS подходи, за да променим реда на нашите бутони. Нека се опитаме да преминем през нашата демонстрация с помощта на клавиатурата (щракнете върху писалката и натиснете клавиша Tab), за да навигирате през бутоните. Ще забележите, че дори ако бутон номер 4 се визуализира първи, фокусът първо се появява върху бутон номер 1, защото той е първият в DOM. Същото ще се случи, ако тестваме нашите демонстрации с екранен четец (проведох тестове с NVDA).
Като се има предвид тази независимост на реда на CSS от реда на DOM, трябва да сме изключително внимателни относно частите от страниците, които пренареждаме с CSS. Например, свойството flexbox order е един от най-гъвкавите начини за пренарежданеелементи, съгласно спецификацията:
Авторите трябва да използват ред само за визуално, а не за логическо пренареждане на съдържанието. Опитът да се използва ред за логичен ред няма да работи.
Спецификацията казва същото за свойството ред на CSS Grid.
Както при пренареждането на гъвкави елементи, свойството ред може да се използва само когато визуалният ред трябва да не е синхронизиран с реда за четене и навигация – в противен случай източниците на документи трябва да бъдат променени.
Забележка: ако използвате втория метод с flexbox във Firefox, ще забележите, че навигацията с клавиатурата работи добре и фокусът върху средни екрани се появява първо на бутон #4. Това поведение е грешка.
Заключение
В тази статия тествахме различни CSS методи за пренареждане на HTML елементи. Разбира се, не всички от тези методи са универсални и преди да изберете този, от който се нуждаете, трябва да имате предвид няколко неща:
-
Браузъри, които трябва да поддържате. Някои от горните подходи не работят в по-стари версии на Internet Explorer (т.е.