Створення кількісних запитів CSS «на льоту»

18

Від автора: часто в проектах представлення нашого контенту змінюється під певні потреби. Ми помічаємо це при використанні медіа запитів, коли хочемо змінити стилі в залежності від пристрою користувача. Кількісні запити CSS працюють за тим же принципом зміни стилів за певних умов: умовою в кількісних запитах буде виступати число суміжних елементів.

Прикладом може послужити панель навігації, в якій кожен блок займає 25% ширини за умови, що доступно чотири блоки; при п’яти блоках, ширина зменшується до 20%. Це загальна проблема для фреймворків динамічних сайтів, таких як WordPress або Ghost. Адміністратор сайту може і не здогадуватися про таких труднощах. Наприклад, якщо додати ще один пункт меню, але в CSS дана умова не прописано, і блок не вписується в розміри. Тепер ви можете з легкістю впоратися з такою проблемою за допомогою Flexbox (і від багатьох інших проблем). А що щодо розумного фоллбэка для браузерів, які не підтримують Flexbox – кращий тільки CSS навіть без зв’язки з JavaScript? В ідеалі, нам би використовувати @supports – однак ви можете здогадатися, що не всі браузери підтримують цю властивість.

Створення кількісних запитів CSS «на льоту»

Ви повинні були стикатися з цією проблемою в минулому: у вас є динамічне число суміжних блоків, і вам необхідно надати їм різні стилі в залежності від загальної їх кількості. Цю проблему можна легко усунути за допомогою кількісних запитів CSS.

В деяких випадках навіть Flexbox може не впоратися. Якщо вам необхідно створити галерею з непарним числом картинок, і ви б хотіли підсвітити центральне зображення без відстеження в JavaScript кількості зображень на екрані? Або таблиця, окремі стовпці в якій вам необхідно стилізувати по-іншому в залежності від кількості стовпців, які вміщуються при поточному дозволі екрану – наприклад, при виборі авіакомпанії або бронювання квитків в кіно?

Все це поширюється і на інші модулі, які можуть постраждати при динамічному додавання або видалення елементів. Чи зможете ви не вдаватися до надмірного кількістю медіа запитів і обхідним функцій на JavaScript?

Звичайно, зможете. При такому розкладі краще всього використовувати кількісні запити. Якщо досить творчо підійти до створення CSS селекторів, ми можемо порахувати кількість суміжних елементів і застосувати стилі до певних з них, які підпадають під умови. Використовуючи запити, ми готуємо наш дизайн і проект в цілому на майбутнє розвиток і створюємо умови для витонченого зростання.

Приклад Кількісних Запитів

Використовуючи nth-last-child(), last-child і ~, ми можемо створити селектор, що задовольняє нашим вимогам. Якщо вас цікавить детальний розбір роботи даних селекторів, то Lea Verou, Heydon Pickering і Я написали статті по даній темі. Нижче наведено приклад кількісного запиту, який спрацює в тому випадку, якщо суміжних елементів не менше 5.

ul li:nth-last-child(n+5), ul li:nth-last-child(n+5) ~ li {
// стилі
}

Можна піти далі і змінити запит так, щоб вибрати всі елементи аж до певної кількості:

ul li:nth-last-child(-n+5):first-child, ul li:nth-last-child(-n+5):first-child ~ li {
// стилі
}

Ще далі, ми можемо встановити межі застосування стилів, якщо елементи знаходяться в певному діапазоні.

ul li:nth-last-child(n+5):nth-last-child(-n+10):first-child, ul li:nth-last-child(-n+5):nth-last-child(-n+10):first-child ~ li {
// стилі
}

Готові рішення для написання кількісних запитів

Як видно з прикладів вище, кількісні запити можуть бути трохи довгі і складні. Саме тому я створив QuantityQueries.com: інструмент, який був мені потрібен для допомоги у створенні та демонстрації кількісних запитів для своїх власних проектів.

Створення кількісних запитів CSS «на льоту»

Написаний як експеримент з бібліотекою React, проект перетворився на динамічний інструмент для нашої спільноти веб-дизайнерів. Він допомагає нам краще зрозуміти, як найкраще писати ці кількісні запити.

Веб-додаток дозволяє створювати запити за трьома основними параметрами: які елементи будуть вважатися, тип запиту і кількість елементів. На основі цих параметрів створюється CSS селектор, який можна використовувати у вашому проекті. Також на сторінці представлено невелике демо, що реагує на ваші запити.

Створення кількісних запитів CSS «на льоту»

«Але мені необхідно підтримувати Браузер Х…»

Кількісні запити створені з використанням сучасних властивостей. Вони будуть працювати у всіх сучасних браузерах (і десктопні та мобільні, включаючи Opera Mini 8) аж до IE9. Такі селектори як nth-last-child(), ~ і last-child були представлені в специфікації CSS3, а first-child в CSS2.1. Тобто ви можете сміливо використовувати їх в методиці прогресивного поліпшення, але якщо ви змушені підтримувати старі браузери, то зверніться до бібліотек Selectivizr і Modernizr.

Застосування на практиці

Не соромтеся і додавайте сайт в закладки і тримайте цю статтю під рукою. Для кожного проекту існують різні вимоги, і необхідно підлаштовуватися під потреби замовника. І цей інструмент може стати в нагоді, коли вам необхідно створити досить складний селектор і немає бажання розбиратися у всій його математики. Також ви можете скористатися тестером селекторів на структурних псевдоклассах CSS від Lea Verou, :nth tester і nth-test від CSS Tricks.

Якщо у вас є бажання поліпшити цей інструмент або ви помітили які-небудь помилки, ви можете допомогти веб-додатком або повідомити про проблеми. Сподіваюся, цей інструментарій буде корисний у ваших проектах!