Якщо в таблиці всього два осередки, то наш особливий елемент повинен займати другу, проте якщо їх більше трьох, то він буде займати останнє вічко в першому рядку таблиці.
Лічильник на чистому CSS
Останнім часом я повністю занурився в flexbox, викладаючи його разом з обтіканням контенту за допомогою властивості float. Дані методи ми використовували в верстці нашого маленького проекту HackerYou. І я виявив, що студенти швидко схоплюють цю тему. У специфікації flexbox є властивості, що дозволяють нам змінювати розмітку новими способами. Один з цих способів це властивість order, воно дозволяє змінювати візуальний порядок контенту, не чіпаючи при цьому його розмітку.
У сукупності з медіа запитами order вкрай корисна річ, нам відкривається можливість змінювати порядок контенту в залежності від розміру вікна браузера. І це змусило мене задуматися: Чому ми не можемо змінювати порядок елементів в залежності від кількості контенту?
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
кількісні запити
Ідея, запропонована Lea Verou, André Luis і Heydon Pickering, полягає в тому, що ці запити підраховують число суміжних елементів і застосовують стилі до них, якщо набирається певна їх кількість. Що якщо ми скомбініруем кількісні запити з властивістю order, щоб змінити порядок контенту в залежності від його ж кількості?
Спосіб на основі Flexbox
Одним з найбільш значущих змін в flexbox став синтаксис присвоєння імен асоціативних властивостей і значень. Оскільки специфікація розвивається протягом усього часу, виробники браузерів будуть використовувати той синтаксис, який доступний на даний момент часу. Тому для підтримки застарілих браузерів необхідно використовувати Вендорний префікси.
Як зрозуміти суть порядку
Перш ніж зануритися в кількісні запити і розбиратися в їх роботі, необхідно зрозуміти, як працювати з властивістю order. Спочатку необхідно обгорнути контент батьківським елементом і додати до цього блоку-обгортці стилі display: flex.
За замовчуванням елементи шикуються в порядку, заданому розміткою. Всі дочірні елементи в батьківському flexbox мають значення order рівне 1.
Це значення не має одиниці виміру і просто зіставляється з порядковим номером елемента щодо інших елементів навколо нього. Але ми можемо змінити значення окремого елемента за допомогою властивості order.
В наведеному вище прикладі ми змінили порядок для рядка p.itemOne на значення 2, і цей рядок тепер відображається після p.itemTwo. Тим самим ми змінюємо візуальне уявлення елементів для користувача. Зверніть увагу на те, що розмітка залишилася колишньою.
Лічильники на CSS
Медіа запити, так? Настільки відмінний інструмент в CSS в окремих випадках. Такими випадками можуть виступати тип пристрою, розмір екрану, колір і т.д. - досить-таки потужна штука. Але дані запити застосовуються тільки до пристрою користувача; немає певного способу CSS, який обчислює кількість контенту в елементі.
Якщо поставитися до справи творчо і уважніше розглянути існуючі CSS псевдокласи, ми можемо створити інструментарій для підрахунку кількості дочірніх елементів і застосування відповідних стилів до них. Наприклад, давайте скористаємося звичайним нумерованим списком:
Вся магія за підрахунком суміжних елементів в коді нижче. Дані стилі застосовуються до елементів, якщо їх 4 або більше.
Стоп, не може бути!
Точно, це саме той селектор. На російську мову це можна перекласти як: «Коли дочірніх елементів в списку 4 або більше, отримуємо елементи іншого списку разом з першим дочірнім елементом». Розберемо докладніше. Для початку почнемо з лічильника:
Перекладається як «Дійди до останнього дочірнього елемента і відлічиш назад 4 елементи». Стилі застосовуються до четвертого елементу і всім, хто перед ним. (Відлік ведеться в зворотному порядку!). Продовжимо і поекспериментуємо з кодом, призначимо селекторам інші значення.
Ось такі лічильники. Якщо суміжних елементів менше чотирьох, то стилі не будуть застосовані. Тепер ми змінимо цей селектор, щоб він вибирав все li зі списку за допомогою універсального селектора.
Вся проблема в тому, що в такому разі не вибирається перший дочірній елемент. Ми можемо додати ще одні селектор:
Звичайно, ми можемо зробити селектор більш незалежним, просто вказавши батьківський елемент і дозволивши йому вибрати всі дочірні елементи. Ми зробимо це за допомогою селектора *.
Порядок на основі кількості елементів
Тепер, коли ми розібралися, як підраховувати елементи за допомогою CSS і як використовувати flexbox для зміни порядку контенту, давайте об'єднаємо їх і створимо інструментарій для упорядкування елементів на основі їх кількості.
Ще раз, ми хочемо зробити останній елемент третім в списку (тобто щоб той відображався останнім в першому рядку), якщо елементів більше трьох.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Додамо пару стилів. До контейнера-батькові додамо display: flex, це властивість дозволить нам застосувати властивість order до його дочірнім елементам. Крім того, щоб відрізняти елементи один від одного ми додамо пару стилів за замовчуванням до елементу .target.
Тепер, коли у нас є базові стилі, ми можемо створити логіку для упорядкування елементів певним чином. Ще раз, за замовчуванням всі елементи мають значення order рівне 1 і відображаються в тому порядку, в якому вони прописані в верстці. За допомогою кількісних запитів ми можемо підрахувати кількість елементів. Більше їх ніж три елементи.
Потім, якщо умова виповнилося, ми можемо вибрати необхідний нам елемент .target. Ми застосували значення -1 для властивості order, тепер цей елемент відобразиться на початку списку.
Вуаля! Ми тільки що стилізували елемент, підрахувавши кількість суміжних з ним елементів. За допомогою цього коду ми можемо ставити один елемент перед іншим. А що якщо необхідно поставити елемент між двома?
Трохи логічних роздумів
Перед нами завдання з трьома невідомими:
За замовчуванням всі елементи списку мають значення order: 1. Нам необхідно зробити так, щоб це значення не змінилося у перших двох елементів.
Наш особливий елемент повинен розташовуватися в кінці першого рядка. Значить, нам необхідно збільшити значення order і зробити його більше, ніж у перших двох елементів, тобто 2.
Всі елементи, починаючи з третього, повинні мати значення order вище, ніж у нашого цільового елемента. Значить, для інших елементів значення order дорівнюватиме 3.
Як вам? Так як всі елементи за замовчуванням мають значення 1, то нам не потрібно його оголошувати. Давайте встановимо нашому особливому елементу значення order: 2 за допомогою кількісних запитів, ефективно помістивши його врешті-решт.
Потім, застосувавши інший кількісний запит nth-child (), ми почнемо рахувати елементи з початку списку, а не з кінця. Так як раніше ми прописали запит для .target, то цей елемент буде проігнорований, проте всі інші третій і наступні за ним елементи змінять свій порядок.
Давайте розберемо ще раз!
Ми ведемо відлік з кінця списку по дочірнім елементам на предмет збігу з певною кількістю. Якщо кількість елементів задовольняє умові, ми застосовуємо стилі до обраних нами елементів. Потім ми ведемо відлік з початку списку і застосовуємо стилі до всіх елементів за певним, особливим елементом. Найголовніша особливість в тому, що якщо ми видалимо елементи, то цільової елемент залишиться на потрібному нам місці.
Кінцеве завдання
Першою думкою, коли я ставив перед собою це завдання, було використовувати мови програмування. Так як я використав WordPress, я міг би змінити цикл і, обчисливши кількість елементів, вставити в потрібному місці цільової елемент.
Але так як я створював сайт для школи по front-end розробці, я хотів зробити це на чистому CSS і розкрити можливості властивості flexbox order. Нижче приклад кінцевого результату, виконаного цілком на CSS.
Застосування на практиці
Концепція кількісних запитів досить нова, і в зв'язку з цим написання селектор може бути злегка важко. Проте, співтовариство розробників гаряче взяло цю концепцію і вже пише Sass mixin'и, які допоможуть нам робити запити набагато ефективніше. Такі бібліотеки, як, наприклад, бібліотека Quantity Queries Mixin від Daniel Guillan дозволяє нам писати медіа запити, як просте підключення.
Також дана концепція і міць, прихована в ній, пояснюються в безлічі статей. James Steinbach написав чудову статтю «Застосування Sass в кількісних запитах».
підтримка браузерами
На даний момент CSS псевдокласи і flexbox чудово працюють в сучасних браузерах. Якщо ваш проект враховує користувачів не нижче ніж IE10, ви можете використовувати кількісні запити разом з flexbox.
де використовувати
При створенні веб-сайтів ми часто вдаємося до мов програмування, які надають нам можливість підраховувати і модифікувати наш контент, якщо це необхідно. Однак CSS став набагато краще, і ми пішли від мов програмування в сторону просунутих властивостей CSS.
Кількісне упорядкування дозволяє нам видалити шматки коду з циклами, які відповідали за підрахунок і вставку елементів в правильному порядку, приводячи наш контент до семантично чистому вигляді.
висновок
Кількісні запити і упорядкування - просунуті концепції і можуть налякати новачків. Проте, чим далі ми відкладаємо стилізацію подання від мов програмування в сторону CSS, тим все більше ми будемо використовувати цей інструментарій. Все більша кількість членів нашої спільноти відкривають для себе контент запити, і тепер ми можемо використовувати кількісні запити для зміни порядку контенту просто за допомогою лічильників.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
